:root {
    --bg-deep: #030014;
    --primary: #7928CA;
    --secondary: #FF0080;
    --cyan: #00DFD8;
    --text-main: #ffffff;
    --text-dim: #8892b0;
    
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* =========================================
   SCROLLBAR INVISIBLE (MODO FANTASMA)
   ========================================= */

/* 1. Para Chrome, Safari, Android y iOS */
::-webkit-scrollbar {
    display: none !important; /* ¡Adiós barra! */
    width: 0 !important;
    height: 0 !important;
    background: transparent;
}

/* 2. Para Firefox, IE y Edge */
html, body {
    scrollbar-width: none !important;  /* Firefox */
    -ms-overflow-style: none !important;  /* IE y Edge */
    overflow-y: auto; /* Asegura que el scroll siga funcionando aunque no se vea */
}

/* =========================================
   FIX GLOBAL: CERO SCROLL HORIZONTAL + BARRA INVISIBLE
   ========================================= */

html, body {
    /* 1. MATA EL SCROLL HORIZONTAL (Vital) */
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
    /* Evita el rebote elástico en iOS si no te gusta */
    overscroll-behavior-y: none; 
}

/* 2. SCROLLBAR INVISIBLE (Pero sigue funcionando el scroll) */

/* Para Chrome, Safari y Opera */
::-webkit-scrollbar {
    display: none;
}

/* Para IE, Edge y Firefox */
html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

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

body {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
    height: 100vh;
}

/* --- LUZ AMBIENTAL --- */
/* CORRECCIÓN LUZ AMBIENTAL */
.ambient-light {
    position: fixed; 
    top: 0; left: 0;
    width: 100%; height: 100%; /* CAMBIO: % en vez de vw/vh */
    background: 
        radial-gradient(circle at 15% 50%, rgba(121, 40, 202, 0.15) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(255, 0, 128, 0.15) 0%, transparent 25%);
    z-index: -1;
    pointer-events: none; /* Vital para que no bloquee clics */
    animation: ambientShift 10s ease-in-out infinite alternate;
}
@keyframes ambientShift { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

/* --- NAVBAR --- */
.navbar {
    position: fixed; top: 0; width: 100%; padding: 1.5rem 3rem;
    display: flex; justify-content: space-between; align-items: center;
    backdrop-filter: blur(10px); z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.05);
    /* Navbar entra suave también */
    opacity: 0; animation: fadeInDown 1s forwards 0.5s;
}
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

.logo-container { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.logo-icon { 
    width: 30px; height: 30px; background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex; align-items: center; justify-content: center; border-radius: 6px; color: white;
}

.nav-actions { display: flex; align-items: center; gap: 2rem; }
.link-hover { text-decoration: none; color: var(--text-dim); transition: 0.3s; font-size: 0.9rem; font-weight: 500; }
.link-hover:hover { color: white; }

/* 🔥 BOTÓN MEGA (VERSIÓN FINAL FLUIDA) 🔥 */
.mega-btn {
    position: relative;
    padding: 1px; border-radius: 8px;
    background: linear-gradient(90deg, var(--secondary), var(--primary), var(--cyan), var(--secondary));
    background-size: 200% auto;
    animation: flowGradient 3s linear infinite;
    text-decoration: none; display: inline-block;
    transform: translateZ(0); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-content {
    display: block; padding: 0.8rem 1.8rem; background: #000; border-radius: 7px; 
    color: white; font-weight: 700; font-family: var(--font-display);
    transition: background 0.3s, color 0.3s;
}
.mega-btn:hover { box-shadow: 0 0 25px rgba(255, 0, 128, 0.6); transform: translateY(-3px); }
.mega-btn:hover .btn-content { background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.mega-btn.small { transform: scale(0.9); }
.mega-btn.small:hover { transform: scale(0.9) translateY(-3px); }
@keyframes flowGradient { 0% { background-position: 0% center; } 100% { background-position: -200% center; } }


/* --- HERO LAYOUT --- */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    padding-top: 80px;
    align-items: center;
}

/* === COLUMNA IZQUIERDA (Texto) - Entra de Izq a Der === */
.text-side { padding-left: 10%; padding-right: 2rem; z-index: 10; }

/* KEYFRAMES IZQUIERDA */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-80px); filter: blur(10px); }
    to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* APLICANDO RETRASOS (+1s a todo) */
.pill-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    padding: 5px 12px; border-radius: 20px; font-size: 0.75rem; color: var(--cyan);
    margin-bottom: 2rem; font-family: var(--font-display); letter-spacing: 1px;
    opacity: 0; animation: slideInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.0s; /* Delay 1s */
}
.pulse-dot { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 10px var(--cyan); }

.titan-title {
    font-size: 4.5rem; line-height: 1; font-weight: 700; font-family: var(--font-display);
    margin-bottom: 1.5rem; letter-spacing: -2px;
    opacity: 0; animation: slideInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.2s; /* Delay 1.2s */
}

.neon-gradient {
    background: linear-gradient(to right, var(--cyan), var(--primary), var(--secondary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 1.2rem; color: var(--text-dim); max-width: 500px; margin-bottom: 2.5rem; line-height: 1.6;
    opacity: 0; animation: slideInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.4s; /* Delay 1.4s */
}

.cta-row { 
    display: flex; gap: 20px; align-items: center; 
    opacity: 0; animation: slideInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.6s; /* Delay 1.6s */
}

.link-secondary { color: var(--text-main); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }


/* === COLUMNA DERECHA (Visual 3D) - Entra de Der a Izq === */
.visual-side {
    position: relative; height: 100%; width: 100%;
    display: flex; align-items: center; justify-content: center;
    perspective: 1500px;
    /* Animación de entrada para todo el bloque derecho */
    opacity: 0; 
    animation: slideInRight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.0s; /* Delay base 1s */
}

/* KEYFRAMES DERECHA (Nueva) */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(80px); filter: blur(10px); } /* Empieza a la derecha */
    to { opacity: 1; transform: translateX(0); filter: blur(0); }
}


/* --- Estilos del 3D Stack (Sin cambios en animación interna) --- */
.iso-stack {
    position: relative; width: 400px; height: 500px;
    transform: rotateX(55deg) rotateZ(-35deg) rotateY(10deg);
    transform-style: preserve-3d;
    transition: transform 0.5s ease-out;
    /* La animación de flotar sigue ahí una vez que entra */
    animation: floatStack 6s ease-in-out infinite; 
}
.visual-side:hover .iso-stack { transform: rotateX(45deg) rotateZ(-25deg) rotateY(10deg) scale(1.05); }
.layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 20px; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Capa 1 */
.layer-1 {
    background: rgba(20, 20, 25, 0.9); border: 1px solid rgba(255,255,255,0.2);
    box-shadow: -20px 20px 60px rgba(0,0,0,0.5); transform: translateZ(60px);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ui-mockup { width: 100%; height: 100%; display: flex; flex-direction: column; }
.ui-header { height: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; padding-left: 15px; background: rgba(255,255,255,0.03); }
.ui-dots { width: 10px; height: 10px; background: #ff5f56; border-radius: 50%; box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f; }
.ui-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 15px; }
.ui-hero { height: 120px; background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); border-radius: 10px; }
.ui-grid { display: flex; gap: 10px; height: 80px; }
.ui-grid div { flex: 1; background: rgba(255,255,255,0.05); border-radius: 8px; }
/* Capa 2 */
.layer-2 {
    background: linear-gradient(135deg, var(--secondary), transparent);
    opacity: 0.3; transform: translateZ(30px) translateY(20px) translateX(-20px); filter: blur(2px);
}
/* Capa 3 */
.layer-3 {
    background: rgba(121, 40, 202, 0.2); border: 1px solid var(--primary);
    transform: translateZ(0px) translateY(40px) translateX(-40px);
    display: flex; align-items: center; justify-content: center;
}
.code-lines span {
    display: block; width: 150px; height: 6px; background: var(--primary); margin: 10px; opacity: 0.5; border-radius: 3px;
    animation: pulseCode 2s infinite;
}
.code-lines span:nth-child(2) { width: 100px; animation-delay: 0.3s; }

@keyframes floatStack {
    0%, 100% { transform: rotateX(55deg) rotateZ(-35deg) translateZ(0); }
    50% { transform: rotateX(55deg) rotateZ(-35deg) translateZ(30px); }
}

@media (max-width: 968px) {
    .hero-split { grid-template-columns: 1fr; text-align: center; }
    .text-side { padding: 0 20px; order: 2; margin-top: -50px; }
    .visual-side { order: 1; height: 400px; animation: slideInRight 1s forwards 0.5s; /* Menos delay en móvil */ }
    .titan-title { font-size: 3rem; }
    .cta-row { justify-content: center; }
    .iso-stack { transform: scale(0.7) rotateX(55deg) rotateZ(-35deg); }
    /* Ajustamos animaciones para móvil */
    @keyframes slideInLeft { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes slideInRight { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
}

/* =========================================
   SECCIÓN 2: BENTO GRID (ECOSISTEMA)
   ========================================= */

.bento-section {
    position: relative;
    padding: 120px 2rem;
    background: var(--bg-deep); /* Continuidad */
    overflow: hidden;
}

/* Fondo de rejilla técnica (Fondo Matrix sutil) */
.tech-grid-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    z-index: 0; pointer-events: none;
}

.container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }

/* Cabecera de Sección */
.section-header { text-align: center; max-width: 700px; margin: 0 auto 80px; }

.pill-badge-sm {
    font-size: 0.7rem; letter-spacing: 2px; color: var(--secondary); font-weight: 700;
    text-transform: uppercase; border: 1px solid rgba(255, 0, 128, 0.3); padding: 5px 10px; border-radius: 4px;
    margin-bottom: 15px; display: inline-block;
}

.section-title {
    font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1.1; margin-bottom: 20px;
}
.text-gradient {
    background: linear-gradient(to right, var(--primary), var(--secondary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.section-desc { color: var(--text-dim); font-size: 1.1rem; line-height: 1.6; }

/* --- EL GRID --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas base */
    grid-template-rows: repeat(2, minmax(250px, auto));
    gap: 20px;
}

/* Estilos de Tarjeta Base */
.b-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem;
    position: relative; overflow: hidden;
    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover Effect: Border Glow */
.b-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 40px -10px rgba(121, 40, 202, 0.3);
}

/* Glow interno animado */
.card-glow {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%);
    opacity: 0; transition: 0.4s; pointer-events: none;
}
.b-card:hover .card-glow { opacity: 1; transform: scale(1.1); }

/* Tamaños del Grid */
.card-large { grid-column: span 1; grid-row: span 2; } /* Vertical larga */
.card-square { grid-column: span 1; } /* Cuadrada */
.card-wide { grid-column: span 2; } /* Horizontal ancha */

/* Contenido Interno */
.card-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.b-card h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 10px; margin-top: 20px; }
.b-card p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; }

.icon-box { font-size: 2rem; width: 50px; height: 50px; background: rgba(255,255,255,0.05); border-radius: 10px; display: flex; align-items: center; justify-content: center; }

/* Visuales dentro de cards */
/* Barra de progreso animada (Card 1) */
.visual-meter { 
    height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-top: 20px; overflow: hidden; 
}
.bar-fill { 
    height: 100%; width: 0%; background: var(--cyan); border-radius: 3px; 
    transition: width 1.5s ease-out; 
}
.b-card:hover .bar-fill { width: 95%; } /* Se llena al hover */

/* Mockup de botón (Card 4) */
.row-layout { flex-direction: row; align-items: center; gap: 30px; }
.ui-mini-mockup { 
    flex: 1; height: 100px; background: rgba(0,0,0,0.3); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.btn-mock {
    padding: 8px 20px; background: var(--secondary); border-radius: 6px; font-weight: 700; font-size: 0.8rem;
    box-shadow: 0 0 15px var(--secondary);
}
.cursor-mock {
    width: 0; height: 0; 
    border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid white;
    position: absolute; bottom: 10px; right: 20px; transform: rotate(-45deg);
    animation: clickAnim 2s infinite;
}
@keyframes clickAnim { 0%, 100% { transform: translate(0,0) rotate(-45deg) scale(1); } 50% { transform: translate(-10px, -10px) rotate(-45deg) scale(0.9); } }

/* Animaciones de Entrada (Scroll) */
.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* Responsive Grid */
@media (max-width: 968px) {
    .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .card-large, .card-square, .card-wide { grid-column: span 1; grid-row: span 1; }
    .row-layout { flex-direction: column; text-align: center; }
    .section-title { font-size: 2rem; }
}

/* =========================================
   SECCIÓN 3: CUBOS 3D SÓLIDOS (FIXED)
   ========================================= */

.cubes-section {
    padding: 100px 2rem;
    background: var(--var);
}

.cubes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 60px;
    max-width: 1200px;
    margin-left: auto; margin-right: auto;
    row-gap: 80px;
}

/* --- ESCENARIO 3D --- */
.cube-wrapper {
    width: 220px;
    height: 220px;
    perspective: 1000px; /* Profundidad visual */
    margin: 0 auto;
}

/* --- EL CUBO --- */
.cube-3d {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d; /* ESTO HACE LA MAGIA 3D */
    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- LAS CARAS (CONSTRUCCIÓN SÓLIDA) --- */
.face {
    position: absolute;
    width: 220px; height: 220px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 15px;
    background: rgba(10, 10, 12, 0.95); /* Casi opaco para ocultar el interior */
    backface-visibility: hidden; /* Ocultamos la cara interna */
}

/* Posicionamiento Matemático de las Caras (Cubo 220px -> Z=110px) */
.face.front  { transform: translateZ(110px); z-index: 2; }
.face.back   { transform: rotateY(180deg) translateZ(110px); border-color: var(--secondary); }
.face.right  { transform: rotateY(90deg) translateZ(110px); background: var(--primary); opacity: 0.3; }
.face.left   { transform: rotateY(-90deg) translateZ(110px); background: var(--primary); opacity: 0.3; }
.face.top    { transform: rotateX(90deg) translateZ(110px); background: var(--secondary); opacity: 0.3; }
.face.bottom { transform: rotateX(-90deg) translateZ(110px); background: var(--secondary); opacity: 0.3; }

/* Estilos de Contenido Frontal */
/* =========================================
   AJUSTES CUBOS 3D (COLOR SÓLIDO & BOTÓN MEGA FIX)
   ========================================= */

/* --- CARA FRONTAL (AHORA AZUL SÓLIDO) --- */
.face.front {
    /* ANTES: background: linear-gradient(...) */
    /* AHORA: Azul sólido profundo y premium */
    background: #0d0d1a; 
    box-shadow: 0 0 20px rgba(0,0,0,0.3) inset;
    border: 1px solid rgba(255,255,255,0.05);
    /* Aseguramos que el texto sea blanco */
    color: white;
}

.face.front h3 { 
    font-family: var(--font-display); 
    font-size: 13px; 
    margin-bottom: 20px; 
    color: white; /* Texto blanco sobre fondo azul */
}

/* --- BOTÓN MEGA DENTRO DEL CUBO (CONFIRMADO) --- */
.cube-mega-btn {
    position: relative;
    padding: 1px; /* Espacio para el borde gradiente */
    border-radius: 6px;
    /* El mismo gradiente que los botones grandes */
    background: linear-gradient(90deg, var(--secondary), var(--primary), var(--cyan), var(--secondary));
    background-size: 200% auto;
    /* AQUÍ ESTÁ LA ANIMACIÓN BRO, CONFIRMADA */
    animation: flowGradient 3s linear infinite;
    text-decoration: none; display: inline-block;
    margin-top: 10px;
    /* Fix para que no tiemble en Safari/Chrome */
    transform: translateZ(0);
}

/* Estilo para el contenido interno (SPAN) */
.cube-mega-btn .btn-content {
    display: block;
    padding: 6px 16px;
    background: #000; /* Fondo negro sólido */
    border-radius: 5px;
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: var(--font-display);
    transition: background 0.3s, color 0.3s;
}

/* Hover Effects (Igual que los de arriba) */
.cube-mega-btn:hover {
    box-shadow: 0 0 15px rgba(255, 0, 128, 0.5);
    transform: translateY(-2px);
}

/* Al hover, fondo transparente para ver el gradiente full */
.cube-mega-btn:hover .btn-content {
    background: transparent;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}


/* =========================================
   ANIMACIONES DE GIRO (DIRECCIONES)
   ========================================= */

/* 1. Giro Izquierda (Muestra cara derecha al girar, termina en back) */
.dir-left.active .cube-3d { transform: rotateY(-180deg); }

/* 2. Giro Derecha */
.dir-right.active .cube-3d { transform: rotateY(180deg); }

/* 3. Giro Abajo (Vertical) */
/* NOTA: Para giros verticales, la cara 'back' necesita estar orientada correctamente */
.dir-down.active .cube-3d { transform: rotateX(-180deg); }
.dir-down .face.back { transform: rotateX(180deg) translateZ(110px); } /* Ajuste especial vertical */

/* 4. Giro Arriba (Vertical) */
.dir-up.active .cube-3d { transform: rotateX(180deg); }
.dir-up .face.back { transform: rotateX(180deg) translateZ(110px); } /* Ajuste especial vertical */


/* Responsive */
@media (max-width: 1100px) { .cubes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .cubes-grid { grid-template-columns: 1fr; } }

/* --- ICONOS DEGRADADOS --- */
.material-symbols-outlined.icon-gradient {
    font-size: 3rem;
    margin-bottom: 10px;
    background: #0f00df;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(70, 70, 70, 0.2));
    transition: 0.3s;
}

/* --- BOTÓN MEGA DENTRO DEL CUBO (FIXED) --- */
.cube-mega-btn {
    position: relative;
    padding: 1px; /* Espacio para el borde gradiente */
    border-radius: 6px;
    background: linear-gradient(90deg, var(--secondary), var(--primary), var(--cyan), var(--secondary));
    background-size: 200% auto;
    animation: flowGradient 3s linear infinite;
    text-decoration: none; display: inline-block;
    margin-top: 10px;
}

/* Estilo para el SPAN interno (igual que el Hero) */
.cube-mega-btn .btn-content {
    display: block;
    padding: 6px 16px;
    background: #000; /* Fondo negro */
    border-radius: 5px;
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: var(--font-display);
    transition: background 0.3s, color 0.3s;
}

.cube-mega-btn:hover {
    box-shadow: 0 0 15px rgba(255, 0, 128, 0.5);
    transform: translateY(-2px);
}

/* Al hover, fondo transparente para ver el gradiente */
.cube-mega-btn:hover .btn-content {
    background: transparent;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* --- CARA TRASERA (REDISEÑADA PREMIUM) --- */
.face.back {
    /* Fondo oscuro técnico */
    background-color: #050508;
    
    /* Patrón de puntos sutil (Efecto Matrix/Ingeniería) */
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    
    /* Borde sutil gris/cristal (Adiós rosa) */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* Sombra interna para profundidad */
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
    
    /* Asegurar rotación */
    transform: rotateY(180deg) translateZ(110px);
    
    /* Ajustes de flex para centrar */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Título Trasero */
.face.back h3 {
    color: var(--cyan); /* Azul eléctrico tech */
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 223, 216, 0.3); /* Línea divisoria cyan sutil */
    width: 80%; /* No ocupa todo el ancho */
}

/* Texto Trasero */
.face.back p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #a1a1aa; /* Gris claro legible */
    font-weight: 400;
}

/* =========================================
   EFECTO DE LEVITACIÓN (ANTI-GRAVEDAD)
   ========================================= */

/* Definimos la animación de flotar */
@keyframes floatCube {
    0%, 100% { 
        transform: translateY(0); /* Posición original */
    }
    50% { 
        transform: translateY(-15px); /* Sube 15px suavemente */
    }
}

/* Aplicamos la animación al contenedor del cubo */
.cube-wrapper {
    /* Mantenemos tus estilos anteriores... */
    /* Y agregamos la animación: */
    animation: floatCube 6s ease-in-out infinite;
}

/* --- SINCRONIZACIÓN ALTERNA (Para que no parezcan robots) --- */

/* Los pares esperan 1.5 segundos antes de empezar */
.cube-wrapper:nth-child(even) {
    animation-delay: 1.5s;
}

/* El 3ro y el 7mo esperan 0.5 segundos (Rompe el patrón par/impar) */
.cube-wrapper:nth-child(3), 
.cube-wrapper:nth-child(7) {
    animation-delay: 0.5s;
}

/* El 1ro y el 5to esperan 2.5 segundos */
.cube-wrapper:nth-child(1),
.cube-wrapper:nth-child(5) {
    animation-delay: 2.5s;
}

/* =========================================
   SECCIÓN 4: PORTAFOLIO (BROWSER STYLE)
   ========================================= */

.portfolio-section {
    padding: 120px 2rem;
    background-color: var(--bg-deep); /* CONSISTENCIA TOTAL */
    position: relative;
}

/* Sutil luz para separar visualmente sin cambiar el color base */
.portfolio-section::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
    pointer-events: none;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Adaptable */
    gap: 40px;
    max-width: 1200px; margin: 0 auto 60px;
}

/* --- TARJETA DE PROYECTO --- */
.project-card {
    position: relative;
    border-radius: 12px;
    transition: transform 0.4s ease;
}
.project-card:hover { transform: translateY(-10px); }

/* --- MARCO DE NAVEGADOR --- */
.browser-frame {
    background: #1e1e24; /* Gris oscuro navegador */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
}

/* Cabecera del Navegador (Puntos y URL) */
.browser-header {
    background: rgba(255,255,255,0.05);
    padding: 10px 15px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }

.browser-address {
    margin-left: 10px; flex-grow: 1;
    background: rgba(0,0,0,0.3);
    color: var(--text-dim); font-size: 0.7rem; font-family: monospace;
    padding: 4px 10px; border-radius: 4px; text-align: center;
}

/* Cuerpo del Navegador (Donde va la imagen) */
.browser-body {
    height: 300px; /* Altura de la ventana visible */
    overflow: hidden; /* Ocultamos el resto de la imagen larga */
    position: relative;
    background: #000;
}

/* =========================================
   SECCIÓN 4: PORTAFOLIO (UPDATED: CLICK & HOVER)
   ========================================= */

/* --- IMAGEN REAL (ESTILO BASE) --- */
.project-img {
    width: 100%; 
    display: block;
    /* Velocidad del scroll automático */
    transition: transform 4s ease-in-out;
}

/* --- EFECTO SCROLL (HOVER + CLICK) --- */
/* Esta regla activa el scroll si pasas el mouse (PC) 
   O si la tarjeta tiene la clase .active (Móvil/Clic) */
.project-card:hover .project-img,
.project-card.active .project-img {
    /* Sube hasta mostrar el final de la imagen */
    /* El cálculo asume que la ventana visible mide 300px */
    transform: translateY(calc(-100% + 300px)); 
}

/* --- OVERLAY DE INFORMACIÓN (ESTILO BASE) --- */
.project-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 20px;
    background: rgba(5, 5, 8, 0.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.1);
    transform: translateY(100%); /* Oculto inicialmente (abajo) */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex; justify-content: space-between; align-items: center;
}

.project-overlay h3 { font-size: 1.1rem; color: white; margin-bottom: 2px; }
.project-overlay p { font-size: 0.8rem; color: var(--cyan); }

.view-btn {
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;
    color: white; border-bottom: 1px solid var(--primary);
}

/* --- OVERLAY VISIBLE (HOVER + CLICK) --- */
/* Muestra el texto si pasas el mouse O si das clic */
.project-card:hover .project-overlay,
.project-card.active .project-overlay {
    transform: translateY(0);
}

.center-btn-wrapper { text-align: center; margin-top: 40px; }

/* (Opcional) Placeholders antiguos, los dejo por si acaso aún no tienes todas las fotos */
.project-image-placeholder {
    width: 100%; height: 300%; background-size: cover; transition: transform 4s ease-in-out;
}
.project-card:hover .project-image-placeholder,
.project-card.active .project-image-placeholder {
    transform: translateY(calc(-100% + 300px)); 
}
.gradient-1 { background: linear-gradient(to bottom, #2b5876, #4e4376, #1a1a1a); }
.gradient-2 { background: linear-gradient(to bottom, #cc2b5e, #753a88, #1a1a1a); }
.gradient-3 { background: linear-gradient(to bottom, #42275a, #734b6d, #1a1a1a); }

/* =========================================
   SECCIÓN 5: VALOR / PRECIO (HIGH IMPACT)
   ========================================= */

/* CORRECCIÓN VALUE SECTION */
.value-section {
    padding: 100px 2rem;
    position: relative;
    overflow: hidden; /* Esto corta cualquier luz que se salga */
    /* CORREGIDO: Usamos la variable de fondo correcta */
    background: var(--bg-deep); 
}

/* Luz de fondo detrás del precio */
.spotlight-bg {
    position: absolute;
    top: 50%; right: 10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(121, 40, 202, 0.15) 0%, transparent 70%);
    transform: translateY(-50%);
    z-index: 0; pointer-events: none;
}

.value-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Texto más ancho, precio compacto */
    gap: 60px;
    align-items: center;
    position: relative; z-index: 2;
}

/* --- COLUMNA IZQUIERDA (LISTA) --- */
.value-title {
    font-size: 3.5rem; font-family: var(--font-display); 
    line-height: 1.1; margin-bottom: 20px;
}
.value-desc {
    font-size: 1.1rem; color: var(--text-dim); margin-bottom: 40px; max-width: 90%;
}

.mega-list { list-style: none; }
.mega-list li {
    display: flex; gap: 20px; margin-bottom: 30px;
}
.check-icon {
    min-width: 30px; height: 30px;
    background: var(--cyan); color: #000;
    border-radius: 50%; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 15px var(--cyan);
}
.mega-list strong { color: white; font-size: 1.1rem; display: block; margin-bottom: 5px; }
.mega-list p { color: var(--text-dim); font-size: 0.95rem; margin: 0; }


/* --- COLUMNA DERECHA (TARJETA DE PRECIO) --- */
.price-col { position: relative; }

.price-card-glass {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.price-card-glass:hover {
    transform: translateY(-5px);
    border-color: var(--secondary);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* Efecto de borde brillante superior */
.price-card-glass::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--secondary), var(--primary), var(--cyan));
}

.price-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.price-header h3 { font-size: 1.2rem; font-weight: 700; color: white; letter-spacing: 1px; }

.popular-tag {
    background: rgba(255, 0, 128, 0.2); color: var(--secondary);
    border: 1px solid var(--secondary);
    padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 800;
}

/* EL PRECIO GIGANTE */
.price-number {
    font-family: var(--font-display);
    font-size: 5rem; font-weight: 700;
    color: white; line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 0 30px rgba(255,255,255,0.1);
}
.currency { font-size: 2.5rem; vertical-align: top; color: var(--text-dim); }
.period { font-size: 1rem; color: var(--text-dim); font-weight: 400; display: block; margin-top: 10px; letter-spacing: 2px;}

.price-separator { height: 1px; background: rgba(255,255,255,0.1); margin: 30px 0; }

.price-text { color: var(--text-dim); margin-bottom: 30px; font-size: 1rem; }
.highlight { color: var(--cyan); font-weight: 600; }

.full-width { width: 100%; text-align: center; } /* Botón ancho completo */

.micro-text { font-size: 0.75rem; color: #555; margin-top: 15px; }


/* Responsive */
@media (max-width: 968px) {
    .value-grid { grid-template-columns: 1fr; gap: 40px; }
    .value-title { font-size: 2.5rem; text-align: center; }
    .value-desc { text-align: center; margin: 0 auto 40px; }
    .price-col { max-width: 400px; margin: 0 auto; }
}

/* =========================================
   SECCIÓN 6: MEGA FOOTER
   ========================================= */

.mega-footer {
    background: #020205; /* Casi negro absoluto */
    padding: 80px 2rem 30px;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}

/* Decoración de fondo */
.footer-grid-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5; pointer-events: none;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr; /* Marca ancha, links compactos */
    gap: 40px;
    margin-bottom: 60px;
    position: relative; z-index: 2;
}

/* Marca */
.brand-desc { color: var(--text-dim); margin: 20px 0; font-size: 0.9rem; max-width: 300px; }

.social-links { display: flex; gap: 15px; }
.social-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.05); color: white;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s; border: 1px solid rgba(255,255,255,0.1);
    text-decoration: none;
}
.social-btn:hover {
    background: var(--primary); border-color: var(--primary);
    transform: translateY(-3px); box-shadow: 0 0 15px var(--primary);
}

/* Columnas de Links */
.footer-col h4 { color: white; margin-bottom: 20px; font-family: var(--font-display); letter-spacing: 1px; }

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
    color: var(--text-dim); text-decoration: none; font-size: 0.9rem; transition: 0.3s;
}
.footer-links a:hover { color: var(--cyan); padding-left: 5px; }

/* Newsletter */
.newsletter-text { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 15px; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    padding: 10px; border-radius: 6px; color: white; width: 100%; outline: none;
}
.newsletter-form button {
    background: var(--secondary); border: none; color: white; padding: 0 15px;
    border-radius: 6px; cursor: pointer; transition: 0.3s; font-weight: bold;
}
.newsletter-form button:hover { background: var(--primary); }

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 30px;
    display: flex; justify-content: space-between; align-items: center;
    color: #555; font-size: 0.8rem;
}

/* =========================================
   BOTÓN FLOTANTE WHATSAPP (BIGGER VERSION)
   ========================================= */
.whatsapp-float {
    position: fixed;
    bottom: 30px; right: 30px;
    /* AUMENTADO DE 70px A 110px (+50%) */
    width: 110px; height: 110px;
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s ease;
}

/* Resplandor verde ajustado al nuevo tamaño */
.wa-glow {
    position: absolute; top: 15px; left: 15px; 
    width: 80px; height: 80px; /* Aumentado */
    background: #25D366; 
    filter: blur(25px); opacity: 0.6;
    border-radius: 50%; z-index: -1;
    animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 0.3; } /* Pulsación un poco más suave */
    100% { transform: scale(1); opacity: 0.6; }
}

.whatsapp-float:hover {
    transform: scale(1.1) rotate(-5deg);
}

/* Responsive: En móvil lo hacemos un poco más chico para que no tape todo, 
   pero sigue siendo grande (90px) */
@media (max-width: 968px) {
    .whatsapp-float { bottom: 20px; right: 20px; width: 90px; height: 90px; }
    .wa-glow { width: 60px; height: 60px; top: 4px; left: 3px; }
    
    /* Importante: Forzar al lottie a ajustarse en móvil */
    .whatsapp-float lottie-player { width: 90px !important; height: 90px !important; }
}

/* Responsive Footer */
@media (max-width: 968px) {
    .footer-content { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .footer-brand { align-items: center; display: flex; flex-direction: column; }
    .brand-desc { margin: 20px auto; }
    .social-links { justify-content: center; }
    .footer-bottom { flex-direction: column; gap: 15px; }
    
    /* Ajuste botón flotante en móvil */
    .whatsapp-float { bottom: 20px; right: 20px; width: 60px; height: 60px; }
}

/* =========================================
   SECCIÓN 7: CONTACTO (FORMULARIO PERRÓN)
   ========================================= */

.contact-section {
    padding: 100px 2rem;
    background: #030014; /* Mantenemos el fondo dark */
    position: relative;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px; margin: 0 auto;
}

/* Columna Info */
.contact-desc { color: var(--text-dim); font-size: 1.1rem; margin-bottom: 40px; line-height: 1.6; }

.c-item {
    display: flex; gap: 20px; margin-bottom: 25px; align-items: center;
}
.c-icon {
    font-size: 1.5rem; color: var(--cyan);
    background: rgba(0, 223, 216, 0.1);
    width: 50px; height: 50px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(0, 223, 216, 0.2);
}
.c-item span { font-size: 0.8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.c-item p { font-size: 1.1rem; color: white; font-weight: 600; }

/* Wrapper del Formulario */
.contact-form-wrapper { position: relative; }

/* El Formulario Glass */
.glass-form {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    padding: 40px; border-radius: 24px;
    position: relative; z-index: 2;
}

/* Campos de Texto */
.form-group { margin-bottom: 25px; }
.form-group label {
    display: block; color: var(--text-dim); font-size: 0.9rem; margin-bottom: 10px; margin-left: 5px;
}

.input-wrapper {
    position: relative; display: flex; align-items: center;
}

.input-icon {
    position: absolute; left: 15px; color: var(--text-dim); pointer-events: none; transition: 0.3s;
}

.glass-form input, 
.glass-form textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 15px 15px 45px; /* Espacio para el icono */
    color: white; font-family: var(--font-body); font-size: 1rem;
    outline: none; transition: 0.3s;
}

.glass-form textarea { resize: none; }

/* Efecto Focus (Brillo al escribir) */
.glass-form input:focus,
.glass-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(121, 40, 202, 0.2);
    background: rgba(0, 0, 0, 0.5);
}
.glass-form input:focus + .input-icon, /* Esto es truco CSS si el icono va despues, pero aqui va antes en HTML */
.input-wrapper:focus-within .input-icon {
    color: var(--cyan);
}

/* Glow detrás del formulario */
.form-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(0, 223, 216, 0.15) 0%, transparent 70%);
    z-index: 1; pointer-events: none;
    filter: blur(40px);
}

/* Responsive */
@media (max-width: 968px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-info { text-align: center; }
    .c-item { justify-content: center; }
}

/* =========================================
   SCROLLBAR PERRONA (Personalizada)
   ========================================= */

/* Ancho de la barra */
::-webkit-scrollbar {
    width: 10px;
}

/* El fondo de la barra (Track) */
::-webkit-scrollbar-track {
    background: #020205; 
}

/* El indicador que mueves (Thumb) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--primary), var(--cyan));
    border-radius: 5px;
    border: 2px solid #020205; /* Borde para que se vea separada */
}

/* Al pasar el mouse por la barra */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, var(--secondary), var(--primary));
}

/* =========================================
   RESPONSIVE DESIGN (MÓVIL Y TABLET)
   ========================================= */

/* Tablets y Laptops Pequeñas (max 1024px) */
@media (max-width: 1024px) {
    .titan-title { font-size: 3.5rem; }
    
    /* Grids de 2 columnas en Tablet */
    .cubes-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* El Bento Card ancho ocupa todo el ancho */
    .card-wide { grid-column: span 2; }
    .card-large { grid-column: span 2; grid-row: auto; } /* Deja de ser alta */
}

/* MÓVIL (max 768px) - AQUÍ ESTÁ EL CAMBIO FUERTE */
@media (max-width: 768px) {
    
    /* Ajustes Generales */
    body { overflow-x: hidden; } /* Evita scroll horizontal indeseado */
    .section-title { font-size: 2rem; }
    .pill-badge-sm { font-size: 0.6rem; }
    
    /* --- NAVBAR MÓVIL --- */
    .navbar { padding: 1rem 1.5rem; }
    
    /* Ocultamos los links normales en móvil */
    .nav-actions {
        position: fixed;
        top: 0; right: -100%; /* Oculto a la derecha */
        width: 80%; height: 100vh;
        background: rgba(3, 0, 20, 0.95);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        transition: 0.4s ease;
        border-left: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Clase para abrir el menú */
    .nav-actions.active { right: 0; }
    
    .link-hover { font-size: 1.5rem; } /* Links más grandes en menú móvil */

    /* Botón Hamburguesa (Lo crearemos en HTML abajo) */
    .mobile-menu-btn { display: block !important; }

    /* --- HERO MÓVIL (ARREGLADO: ORDEN Y LEVITACIÓN) --- */
    .hero-split {
        grid-template-columns: 1fr;
        padding-top: 120px; /* Más espacio arriba para que no choque con el menú */
        text-align: center;
        gap: 20px;
        display: flex;       /* Usamos Flex para controlar el orden fácilmente */
        flex-direction: column; 
    }
    
    /* 1. EL TEXTO PRIMERO (H1 ARRIBA) */
    .text-side { 
        order: 1; /* Prioridad 1: Arriba */
        padding: 0 1.5rem; 
    }

    .titan-title { 
        font-size: 2.8rem; 
        margin-bottom: 20px; 
    }

    /* 2. LA IMAGEN DESPUÉS (ABAJO) */
    .visual-side { 
        order: 2; /* Prioridad 2: Abajo */
        height: 350px; 
        margin-bottom: 0;
        margin-top: -20px; /* Acercamos un poco la imagen al texto */
        position: relative;
    }

    /* 3. ANIMACIÓN DE LEVITACIÓN (SOLO PARA MÓVIL) */
    /* Creamos una animación que sube y baja respetando la perspectiva isométrica */
    @keyframes floatHeroMobile {
        0%, 100% { 
            /* Posición original (Escala 0.6 para móvil) */
            transform: scale(0.6) rotateX(55deg) rotateZ(-35deg) translateZ(0px);
        }
        50% { 
            /* Sube 40px hacia arriba (Efecto flotar) */
            transform: scale(0.6) rotateX(55deg) rotateZ(-35deg) translateZ(40px);
        }
    }

    .iso-stack { 
        /* Activamos la animación infinita */
        animation: floatHeroMobile 5s ease-in-out infinite;
        
        /* IMPORTANTE: !important para ganar al JS que intenta moverlo con el mouse */
        transform-style: preserve-3d;
    }

    /* --- BENTO GRID --- */
    .bento-section { padding: 60px 1.5rem; }
    .bento-grid { grid-template-columns: 1fr; display: flex; flex-direction: column; }
    .b-card { min-height: 250px; }

    /* DENTRO DE @media (max-width: 768px) { ... } */

    /* --- CUBOS 3D (MODO MÓVIL: 2 POR FILA CENTRADOS) --- */
    .cubes-section { 
        padding: 60px 10px; /* Menos padding lateral para ganar espacio */
    }

    .cubes-grid { 
        display: grid;
        /* Aquí forzamos las 2 columnas */
        grid-template-columns: repeat(2, 1fr); 
        /* Espacio reducido entre cubos */
        gap: 10px; 
        /* ESTO ARREGLA LA ALINEACIÓN: Centra todo */
        justify-content: center;
        justify-items: center;
        row-gap: 40px;
    } 

    /* Reducimos el cubo a 160px para que quepan dos sin romperse */
    .cube-wrapper { 
        width: 160px; 
        height: 160px; 
        margin: 0; /* Quitamos márgenes viejos */
    }
    
    .face { 
        width: 160px; 
        height: 160px; 
        padding: 8px; /* Menos relleno interno */
    }

    /* --- RECALCULO MATEMÁTICO 3D (Vital para que no se desarme) --- */
    /* Como el cubo ahora mide 160px, la profundidad Z es la mitad: 80px */
    
    .face.front  { transform: translateZ(80px); }
    .face.back   { transform: rotateY(180deg) translateZ(80px); }
    .face.right  { transform: rotateY(90deg) translateZ(80px); }
    .face.left   { transform: rotateY(-90deg) translateZ(80px); }
    .face.top    { transform: rotateX(90deg) translateZ(80px); }
    .face.bottom { transform: rotateX(-90deg) translateZ(80px); }

    /* Ajuste especial para los que giran verticalmente */
    .dir-down .face.back, 
    .dir-up .face.back { 
        transform: rotateX(180deg) translateZ(80px); 
    }

    /* --- AJUSTE DE CONTENIDO MINI --- */
    /* Hacemos los iconos y textos un poco más chicos para el cubo pequeño */
    .material-symbols-outlined.icon-gradient { font-size: 2.5rem; margin-bottom: 5px; }
    .face h3 { font-size: 0.9rem; margin-bottom: 5px; }
    .face p { font-size: 0.75rem; line-height: 1.2; display: none; } /* Ocultamos texto largo en la vuelta si quieres, o déjalo visible */
    
    /* Botón un poco más pequeño */
    .cube-mega-btn { transform: scale(0.85); margin-top: 5px; }
    .cube-mega-btn .btn-content { padding: 5px 10px; font-size: 0.65rem; }

    /* --- PORTAFOLIO --- */
    .portfolio-section { padding: 60px 1.5rem; }
    .portfolio-grid { grid-template-columns: 1fr; }

    /* --- PRECIOS (VALOR) --- */
    .value-section { padding: 60px 1.5rem; }
    .value-grid { grid-template-columns: 1fr; gap: 40px; }
    .spotlight-bg { width: 300px; height: 300px; opacity: 0.5; }
    .price-number { font-size: 4rem; }

    /* --- CONTACTO --- */
    .contact-section { padding: 60px 1.5rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .glass-form { padding: 25px; }

  /* --- FOOTER MÓVIL (ALINEACIÓN SIMÉTRICA) --- */
    .mega-footer { 
        /* Damos más espacio abajo para que el botón de WhatsApp no tape el formulario */
        padding: 40px 1.5rem 100px; 
    }

    .footer-content { 
        display: grid;
        /* EL SECRETO: Usamos 'max-content' para que las columnas no se estiren */
        grid-template-columns: repeat(2, max-content); 
        /* Centramos el GRUPO de columnas en la pantalla */
        justify-content: center; 
        /* Ajustamos el espacio entre columnas (horizontal) y filas (vertical) */
        gap: 30px 50px; 
        /* El texto interno sigue a la izquierda (legibilidad) */
        text-align: left; 
    }

    /* Regla para que la Marca (arriba) y Newsletter (abajo) abarquen todo y se centren */
    .footer-brand, 
    .footer-col:last-child { 
        grid-column: 1 / -1; /* Ocupa las 2 columnas */
        text-align: center;  /* Alineado con el centro de la pantalla */
        width: 100%;
    }
    
    /* Ajuste visual para los títulos de los menús */
    .footer-col h4 {
        margin-top: 0;
        font-size: 1rem;
        /* Color cyan para que destaque la cabecera de la lista */
        color: var(--cyan); 
    }

    /* 3. La Newsletter (La última columna) ocupa todo el ancho abajo */
    .footer-col:last-child {
        grid-column: span 2; /* Ocupa las 2 columnas */
        text-align: center; /* El formulario se ve mejor centrado */
        margin-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.05);
        padding-top: 30px;
    }

    /* Ajuste del formulario para móvil */
    .newsletter-form {
        flex-direction: column; /* Input arriba, botón abajo */
    }
    .newsletter-form button {
        width: 100%;
        margin-top: 10px;
        padding: 12px;
    }
    
    /* Footer bottom */
    .footer-bottom { text-align: center; font-size: 0.7rem; }

    /* --- DENTRO DE @media (max-width: 768px) --- */

    /* 1. EL CULPABLE PRINCIPAL: El Stack 3D */
    .iso-stack {
        /* Antes tenías 400px fijo, eso rompe el móvil. */
        /* Ahora le decimos: "Sé ancho, pero nunca más que la pantalla" */
        width: 100%; 
        max-width: 280px; /* Reducimos drásticamente el ancho base */
        height: auto; /* Altura automática */
        aspect-ratio: 4/5; /* Mantiene la proporción */
        margin: 0 auto; /* Centrado */
        
        /* Ajuste de la transformación para que no se salga las esquinas al rotar */
        transform: scale(0.6) rotateX(55deg) rotateZ(-35deg) !important;
        left: -10px; /* Pequeño ajuste visual a la izquierda */
    }

    /* 2. CONTENEDOR VISUAL */
    .visual-side {
        width: 100%;
        max-width: 100%; /* Asegura que no crezca más */
        overflow: hidden; /* Corta cualquier brillo que sobre */
        padding: 0;
    }

    /* 3. LUZ AMBIENTAL (Ajuste final) */
    .ambient-light {
        width: 100%; /* NUNCA uses 100vw en móvil */
        max-width: 100%;
        overflow: hidden;
    }
    
    /* 4. ASEGURAR QUE TODO RESPETE EL ANCHO */
    .container, .hero-split, .nav-actions {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Estilos del Botón Hamburguesa */
.mobile-menu-btn {
    display: none; /* Oculto en PC */
    cursor: pointer;
    z-index: 1001; /* Encima del menú */
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: white;
    transition: 0.3s;
    border-radius: 2px;
}

/* Animación cuando se abre (se vuelve una X) */
.mobile-menu-btn.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobile-menu-btn.active .bar:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* =========================================
   PARCHE DE SEGURIDAD FINAL (Anti-Desborde)
   ========================================= */

/* 1. Forzamos a los contenedores mayores a cortarse */
.hero-split, 
.bento-section, 
.cubes-section, 
.portfolio-section,
.value-section,
.contact-section,
.mega-footer {
    max-width: 100vw;
    overflow-x: hidden !important; /* Corta lo que sobre a los lados */
    position: relative;
}

/* 2. Aseguramos que el stack 3D no empuje el ancho en móvil */
@media (max-width: 768px) {
    .visual-side {
        width: 100%;
        overflow: hidden; /* Corta el cubo si se sale */
    }
    .iso-stack {
        /* Asegura que no sea más ancho que la pantalla */
        max-width: 100%; 
        margin: 0 auto;
    }
}