/* ==========================================================================
   1. 🎨 VARIABLES, ROOT Y PALETA DE COLORES
   ========================================================================== */
/* Reemplaza este bloque dentro de :root */
:root {
    /* Colores Corporativos Actualizados */
    --primary: #0a1128;         /* Azul oscuro base */
    --primary-light: #1c13c5;   /* Azul claro exacto solicitado */
    --dark: #0f111a;
    --light-bg: #f8fafc;
    --white: #ffffff;
    --gray-text: #64748b;
    --gray-light: #e2e8f0;
    
    /* Variables de Estilo Moderno (Hero y Acentos) */
    --blue-neon: white;
    --blue-glow: #00f2fe;
    --hero-gradient: linear-gradient(135deg, #1c13c5 0%, #06116c 50%, #1c13c5 100%);
    --gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    
    /* Sombras y Elevaciones basadas en el nuevo tono */
    --shadow-sm: 0 2px 8px rgba(28, 19, 197, 0.04);
    --shadow-md: 0 10px 30px rgba(28, 19, 197, 0.08);
    --shadow-lg: 0 20px 40px rgba(28, 19, 197, 0.12);
    --video-shadow: 0 25px 50px -12px rgba(0, 242, 254, 0.25);
    
    /* Bordes y Transiciones */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. 🧱 RESET DE MAQUETACIÓN GENERAL
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--dark);
    background-color: var(--white);
    line-height: 1.6;
}

body {
    overflow-x: hidden;
}


.logo img {
   width: 160px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 💎 DETALLES TIPOGRÁFICOS GENERALES */
h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
}

.gradient-text {
    background: linear-gradient(90deg, var(--blue-neon), var(--blue-glow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.accent {
    color: var(--primary-light);
}

/* ==========================================================================
   3. 🕹️ COMPONENTES: BOTONES PREMIUM
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}

.btn-primary {
    background: var(--gradient);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    filter: brightness(1.15);
}

.btn-secondary {
    background-color: #42119E;
    color: white;
    border-radius: 50px;
}
/*--hero-gradient: linear-gradient(135deg, #1c13c5 0%, #06116c 50%, #1c13c5 100%);*/


.btn-secondary:hover {
    background-color: rgba(40, 33, 181, 0.12);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--gray-light);
    color: var(--dark);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ==========================================================================
   4. 🎯 NAVBAR PERMANENTE
   ========================================================================== */
/* Reemplaza la sección 4 de tu CSS con esta estructura */
/* ==========================================================================
   4. 🎯 NAVBAR INTELIGENTE (OCULTO POR DEFECTO)
   ========================================================================== */
.main-header {
    position: fixed; /* Cambiado a fixed para que flote sobre el contenido al bajar */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-light);
    padding: 16px 0;
    
    /* Efecto de ocultado inicial */
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    pointer-events: none; /* Evita clics accidentales mientras está oculto */
}

/* Esta clase se añadirá mediante JavaScript al hacer scroll */
.main-header.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto; /* Reactiva la interacción */
    box-shadow: var(--shadow-md);
}

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

.logo-text {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--primary); /* Aplica el nuevo azul oscuro al logo */
}

.nav-menu {
    display: none; /* Oculto en móvil por defecto */
    gap: 32px;
}

.nav-menu a {
    text-decoration: none;
    color: var(--gray-text);
    font-weight: 500;
    font-size: 15px;
    transition: var(--transition);
}

.nav-menu a:hover {
    color: var(--primary-light); /* Hover con el azul claro #1c13c5 */
}

/* ==========================================================================
   5. 🌟 SECCIÓN 1: HERO SECTION CENTRADO CON NEUROMARKETING
   ========================================================================== */
.hero-section {
    background: linear-gradient(135deg, #1a0c7a 0%, #2813a8 45%, #5c35d4 80%, #7c5cfc 100%);        
    position: relative;
    padding: 3rem 1.5rem 7rem 1.5rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: var(--white);
    overflow: hidden;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3rem;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.hero-text-center .tagline {
    font-size: 1.2rem;
    letter-spacing: 2px;
    font-weight: 700;
    color: white;
    margin-bottom: 0;
    text-transform: uppercase;
    font-family:'Jost',sans-serif; !important;
}

.hero-text-center h1 {
    font-size: 2.2rem !important;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 1.2rem;
}

.hero-text-center p {
    font-size: 1.1rem;
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Contenedor de Video Tipo Reel Vertical (Proporción 1080x1920) */
.hero-video-centered {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.reel-mockup {
    position: relative;
    width: 100%;
    aspect-ratio: 1080 / 1920;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--video-shadow);
    border: 2px solid rgba(56, 189, 248, 0.2);
    background-color: var(--dark);
}

.reel-mockup video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.reel-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--white);
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.reel-badge .dot {
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
}

.reel-controls {
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.reel-controls button {
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Indicador de Flecha Vibrante */
.scroll-down-indicator {
    position: absolute;
    bottom: -4.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.vibrant-arrow {
    font-size: 1.8rem;
    color: white !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
    animation: bounceVibrant 1.5s infinite alternate ease-in-out;
}

@keyframes bounceVibrant {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    100% { transform: translateY(12px) scale(1.15); opacity: 1; color: var(--blue-glow); }
}

/* ==========================================================================
   6. 📊 SECCIÓN 2: PRUEBA SOCIAL ANIMADA
   ========================================================================== */
.stats-section {
    padding: 40px 0;
    background-color: var(--light-bg);
    border-top: 1px solid var(--gray-light);
    border-bottom: 1px solid var(--gray-light);
}

.stats-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.stat-card {
    background-color: var(--white);
    padding: 24px;
    border-radius: var(--radius-sm);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(40, 33, 181, 0.03);
}

.stat-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: var(--gray-text);
    font-weight: 500;
}

.stat-icon-wrapper {
    font-size: 32px;
    color: var(--primary-light);
    margin-bottom: 8px;
}

.stat-label-large {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
}

/* ==========================================================================
   7. 📂 SECCIÓN 3: PORTAFOLIO Y FILTROS INTERACTIVOS
   ========================================================================== */
.portfolio-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #f0f4fa 0%, #e6eef8 100%); /* Azul suave Premium, no invasivo */
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-header h2 {
    font-size: 36px;
    letter-spacing: -0.5px;
    color: var(--dark);
    margin-bottom: 16px;
}

.section-header p {
    font-size: 16px;
    color: var(--gray-text);
    max-width: 580px;
    margin: 0 auto;
}

/* Selector de Categorías Estilo App Navegación */
.portfolio-tabs {
   display: flex;
    justify-content: center; /* Centra los botones perfectamente en Desktop */
    align-items: center;
    gap: 12px;               /* Espacio uniforme entre cada pestaña */
    margin: 0 auto 40px auto;/* Centra el bloque general y le da margen abajo */
    width: 100%;
    max-width: 900px;        /* Evita que se estire demasiado */
}

.portfolio-tabs::-webkit-scrollbar {
    display: none; /* Oculta scrollbar en Chrome/Safari */
}

.tab-btn {
    white-space: nowrap;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(28, 19, 197, 0.08);
    border-radius: 30px; /* Estilo píldora nativa de iOS/Android */
    cursor: pointer;
    color: var(--gray-text);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.tab-btn.active, 
.tab-btn:hover {
    background: linear-gradient(135deg, #3A0899 25%, #5C1FD1 100%); /* Usa tu degradado corporativo unificado */
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(28, 19, 197, 0.2);
    transform: translateY(-1px);
}


@media (max-width: 767px) {
    .portfolio-tabs {
        justify-content: flex-start; /* Permite un deslizamiento natural en pantallas chicas */
        overflow-x: auto;            /* Habilita el scroll horizontal táctil tipo App */
        scroll-behavior: smooth;
        padding: 4px 16px 14px 16px; /* Padding extra abajo para esconder barras de scroll visuales */
        margin-bottom: 25px;
        
        /* Oculta la barra de scroll nativa en Webkit (Safari/Chrome) para mantener la UI limpia */
        -webkit-overflow-scrolling: touch;
    }
    
    .portfolio-tabs::-webkit-scrollbar {
        display: none; /* Barra invisible para estética premium */
    }
}



/* ==========================================================================
   Estilos para Categoría FOTO (Imagen Completa)
   ========================================================================== */
.portfolio-item[data-category="foto"] {
    cursor: pointer;
}

.portfolio-item[data-category="foto"] .portfolio-img {
    background-size: cover;       /* Asegura que llene todo el espacio sin dejar bordes */
    background-position: center;   /* Centra la fotografía en el encuadre */
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   UI Modal / Lightbox Estilo App Premium
   ========================================================================== */
.custom-lightbox {
    display: none; 
    position: fixed;
    z-index: 9999; /* Por encima de cualquier menú o cabecera */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 17, 0.92); /* Fondo oscuro premium */
    backdrop-filter: blur(8px); /* Desenfoque estético de fondo */
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Estado activo para animación suave */
.custom-lightbox.active {
    display: flex;
    opacity: 1;
}

/* Contenedor de la Imagen dentro del Modal */
.lightbox-content {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 16px; /* Esquinas curvas tipo app */
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-lightbox.active .lightbox-content {
    transform: scale(1);
}

/* Botón de Cierre Flotante */
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    color: #ffffff;
    font-size: 38px;
    font-weight: 300;
    cursor: pointer;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

/* Optimización para dispositivos móviles táctiles */
@media (max-width: 767px) {
    .lightbox-content {
        max-width: 95%;
        max-height: 80vh;
        border-radius: 12px;
    }
    
    .lightbox-close {
        top: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
        font-size: 32px;
    }
}



/*SECCIÓN MODAL*/

/* ==========================================================================
   Estilos para Categoría FOTO (Imagen Completa)
   ========================================================================== */
.portfolio-item[data-category="foto"] {
    cursor: pointer;
}

.portfolio-item[data-category="foto"] .portfolio-img {
    background-size: cover;       /* Asegura que llene todo el espacio sin dejar bordes */
    background-position: center;   /* Centra la fotografía en el encuadre */
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   UI Modal / Lightbox Estilo App Premium
   ========================================================================== */
.custom-lightbox {
    display: none; 
    position: fixed;
    z-index: 9999; /* Por encima de cualquier menú o cabecera */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 17, 0.92); /* Fondo oscuro premium */
    backdrop-filter: blur(8px); /* Desenfoque estético de fondo */
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Estado activo para animación suave */
.custom-lightbox.active {
    display: flex;
    opacity: 1;
}

/* Contenedor de la Imagen dentro del Modal */
.lightbox-content {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 16px; /* Esquinas curvas tipo app */
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-lightbox.active .lightbox-content {
    transform: scale(1);
}


/* Contenedor centralizado para mantener alineados la imagen y el texto */
.lightbox-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
}

/* Botones de Navegación (Flechas Flotantes) */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.2s, transform 0.2s;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.05);
}

.nav-prev { left: 24px; }
.nav-next { right: 24px; }

/* Texto de Descripción (Subtítulo Móvil Premium) */
.lightbox-caption {
    color: #e4e4e7;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 500;
    margin-top: 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 20px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.custom-lightbox.active .lightbox-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Adaptación estricta para pantallas táctiles celulares */
@media (max-width: 767px) {
    .lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.5); /* Más oscuro en móvil para mejor contraste sobre fotos */
    }
    .nav-prev { left: 12px; }
    .nav-next { right: 12px; }
    
    .lightbox-caption {
        font-size: 13px;
        padding: 6px 16px;
        max-width: 85%;
    }
}


/*FIN DE MODAL*/

/* Botón de Cierre Flotante */
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    color: #ffffff;
    font-size: 38px;
    font-weight: 300;
    cursor: pointer;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

/* Optimización para dispositivos móviles táctiles */
@media (max-width: 767px) {
    .lightbox-content {
        max-width: 95%;
        max-height: 80vh;
        border-radius: 12px;
    }
    
    .lightbox-close {
        top: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
        font-size: 32px;
    }
}

/* ==========================================================================
   📂 PORTAFOLIO PREMIUM: ESTILO CARD APP CON OVERLAY
   ========================================================================== */

/* Contenedor Grid optimizado: 2 columnas en móvil por defecto */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 proyectos por fila en modo celular */
    gap: 16px; /* Espaciado amigable para pantallas táctiles */
    padding: 8px 4px;
}

/* Tarjeta contenedora estilo App */
.portfolio-item {
    position: relative;
    border-radius: var(--radius-md); /* 16px para acabados suavizados de App */
    overflow: hidden;
    /* Fondo amarillo vendedor tenue por defecto para rellenar espacios libres */
    background-color: #fecc4e; 
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(220, 220, 200, 0.4); /* Borde sutil a tono con el amarillo */
    aspect-ratio: 1 / 1; /* Formato cuadrado perfecto */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Remueve destello azul nativo en móviles */
}

/* Estilo Base del Badge (Estilo App Móvil) */
.badge-reciente {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10; /* Por encima de la imagen y del overlay */
    background: linear-gradient(135deg, #0b0914, #2D2D2E);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3);/* Azul iOS premium (puedes cambiarlo por tu color de marca) */
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden; /* Esencial para contener el reflejo */
    pointer-events: none; /* Evita que interfiera con los clics del usuario */
    transition: transform 0.3s ease;
}

/* Capa del Reflejo (Destello de luz) */
.badge-reciente::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
}

/* Imagen base del proyecto */
.portfolio-img {
    width: 100%;
    height: 100%;
    background-size: cover; /* Mantiene cover en móviles para llenar la tarjeta si lo deseas */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- OPTIMIZACIÓN EXCLUSIVA PARA DESKTOP --- */
@media (min-width: 992px) {
    .portfolio-img {
        /* En pantallas grandes, la imagen se adaptará por completo sin recortarse */
        background-size: contain; 
    }
}

/* Capa de opacidad, desenfoque y centrado (Oculta por defecto) */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 17, 40, 0.75); /* El azul oscuro corporativo con opacidad elegante */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    backdrop-filter: blur(6px); /* Efecto Glassmorphism refinado */
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.4s ease;
}

/* Alineación del contenido del overlay */
.portfolio-overlay-content {
    text-align: center;
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    transform: translateY(15px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Títulos sutiles dentro de la App Card */
.portfolio-overlay-content h3 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Corta el texto limpiamente si es muy largo */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Badge de categoría adaptado para espacios compactos */
.category-tag {
    font-size: 10px;
    font-weight: 700;
    color: #38bdf8; /* Azul Neón para alto contraste en fondo oscuro */
    background-color: rgba(56, 189, 248, 0.12);
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Botón flotante central "Ver proyecto" */
.view-project-btn {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #06116c;
    background-color: white; /* Tu azul claro #1c13c5 */

    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(28, 19, 197, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-project-btn i {
    font-size: 10px;
    transition: transform 0.3s ease;
}


/* EFECTO INTERACTIVO: Al hacer hover sobre la tarjeta del portafolio */
.portfolio-item:hover .badge-reciente {
    transform: scale(1.05); /* Sutil pulso en la app card */
}

/* Animación del reflejo disparada por el Hover de la tarjeta */
.portfolio-item:hover .badge-reciente::before {
    animation: brilloReflejo 0.8s ease-in-out forwards;
}

/* Animación CSS para el destello */    
@keyframes brilloReflejo {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}

/* ==========================================================================
   🕹️ EFECTOS HOVER (ESCRITORIO) / FOCUS & ACTIVE (MÓVIL)
   ========================================================================== */
@media (hover: hover) {
    .portfolio-item:hover .portfolio-img {
        transform: scale(1.06); /* Sutil zoom interactivo */
    }

    .portfolio-item:hover .portfolio-overlay {
        opacity: 1;
    }

    .portfolio-item:hover .portfolio-overlay-content {
        transform: translateY(0);
    }
    
    .portfolio-item:hover .view-project-btn i {
        transform: translateX(3px); /* Pequeña guía visual en la flecha */
    }
}

/* Comportamiento táctil excelente en smartphones */
.portfolio-item:active .portfolio-overlay,
.portfolio-item:focus .portfolio-overlay {
    opacity: 1;
}
.portfolio-item:active .portfolio-overlay-content,
.portfolio-item:focus .portfolio-overlay-content {
    transform: translateY(0);
}



/* ==========================================================================
   Ajustes de Optimización para Modo Móvil (2 columnas por fila)
   ========================================================================== */
@media (max-width: 767px) {
    .badge-reciente {
        top: 8px;          /* Más pegado a la esquina para ganar espacio */
        left: 8px;
        font-size: 9px;    /* Texto más compacto pero totalmente legible */
        padding: 4px 10px; /* Reducimos el grosor para que se vea estilizado */
        letter-spacing: 0.3px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    
    /* Opcional: Si el botón "Ver proyecto" u overlay también se ve gigante, */
    /* este ajuste equilibrará toda la tarjeta para que parezca una app móvil */
    .view-project-btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    
    .portfolio-overlay-content {
        padding: 10px !important;
    }
}


/* ==========================================================================
   🖥️ BREAKPOINTS RESPONSIVOS (ESCRITORIO E INTEL)
   ========================================================================== */
@media (min-width: 768px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 proyectos por fila en pantallas medianas */
        gap: 24px;
    }
    
    .portfolio-overlay-content h3 {
        font-size: 16px;
    }
    
    .view-project-btn {
        font-size: 13px;
        padding: 8px 18px;
    }
}

@media (min-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 proyectos por fila en monitores para maximizar escaneo visual */
        gap: 30px;
    }
    
    .portfolio-item {
        aspect-ratio: 4 / 3; /* Formato apaisado cinemático ideal para computadoras */
    }
}



@media (min-width: 992px) {
    .portfolio-item .portfolio-img{
    background-size: auto calc(100% - 5px);
    background-position: center;
    background-repeat: no-repeat;
}
}


/* Badge o Etiqueta Interna Refinada */
.category-tag {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-light); /* Azul #1c13c5 */
    background-color: rgba(28, 19, 197, 0.06);
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Controles de Paginación UI Mobile First */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 56px;
}

.pag-btn {
    background-color: var(--white);
    border: 1px solid var(--gray-light);
    color: var(--dark);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.pag-btn:not(:disabled):hover {
    border-color: var(--primary-light);
    color: var(--primary-light);
    box-shadow: 0 6px 16px rgba(28, 19, 197, 0.1);
    transform: translateY(-1px);
}

.pag-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.page-indicator {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-text);
}

#currentPage {
    color: var(--dark);
    font-weight: 700;
}

/* ==========================================================================
   Media Queries Consolidadas
   ========================================================================== */
@media (min-width: 576px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Columnas en tablet */
    }
}

@media (min-width: 992px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 Columnas en Desktop perfectas */
    }
    .section-header h2 {
        font-size: 42px;
    }
}
/* ==========================================================================
   8. 🏢 SECCIÓN 4: MOVIMIENTO INFINITO DE LOGOS (OPTIMIZADO)
   ========================================================================== */
.logos-section {
    padding: 10px 0; /* Un poco más de aire vertical */
    
}

.logos-title {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--gray-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 35px;
}

.logos-slider-container {
    width: 100%;
    overflow: hidden;
}

.logos-track {
    display: flex;
    gap: 60px; /* Incrementamos el espacio entre marcas */
    width: max-content;
    animation: scrollLogos 25s linear infinite;
    align-items: center;
}

.logo-item {
    font-size: 20px; /* Texto de marca más grande y legible */
    font-weight: 700;
    color: #94a3b8; /* Gris moderno */
    display: flex;
    align-items: center;
    gap: 0px; /* Más separación entre la imagen y el texto */
    cursor: pointer;
    transition: color 0.3s ease;
}

/* Estilo para tus imágenes con fondo blanco */
.logo-img {
    height: 80px; /* Altura fija optimizada para mantener consistencia visual */
    width: auto;  /* Mantiene la proporción perfecta basada en tus 418x176px */
    object-fit: contain;
    background-color: #ffffff;
    padding: 6px 14px; /* Marco interno limpio para que respire el logo */
    border-radius: 12px; /* Bordes suaves estilo App Móvil */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); /* Sombra ultra sutil */
    
    /* Efecto Blanco y Negro inicial */
    filter: grayscale(100%) opacity(0.7);
    transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
}

/* --- Estados HOVER interactivos --- */
.logo-item:hover .logo-img {
    filter: grayscale(0%) opacity(1); /* Recupera color original al 100% */
    /*transform: translateY(-2px); /* Pequeña microinteracción hacia arriba */
}

.logo-item:hover {
    color: #1e293b; /* El texto también oscurece al pasar el mouse */
}

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

/* --- Ajuste Adaptable para Dispositivos Móviles --- */
@media (max-width: 767px) {
    .logos-section {
        padding: 25px 0;
    }
    
    .logo-item {
        font-size: 17px; /* Escalado armónico para pantallas pequeñas */
        gap: 10px;
    }
    
    .logo-img {
        height: 72px; /* Ajustamos ligeramente el tamaño del logo en móviles */
        padding: 4px 10px;
    }
    
    .logos-track {
        gap: 40px; /* Compactamos el track para pantallas chicas */
    }
}
/* ==========================================================================
   9. 🎥 SECCIÓN 5: TESTIMONIOS VERTICALES
   ========================================================================== */
.testimonials-section {
    padding: 80px 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.testimonial-video-card {
    background-color: var(--light-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-light);
}

.reel-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1080 / 1920;
    background-color: var(--dark);
    cursor: pointer;
}

.testimonial-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(40, 33, 181, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 20px;
}

.testimonial-meta {
    padding: 20px;
    text-align: center;
}

/* ==========================================================================
   10. 🗺️ SECCIÓN 6: CÓMO TRABAJAMOS TIMELINE
   ========================================================================== */
.process-section {
    padding: 80px 0;
    background-color: var(--light-bg);
}

.process-timeline {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.process-step {
    background-color: var(--white);
    padding: 32px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-light);
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--gradient);
    color: var(--white);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    margin-bottom: 16px;
}

/* ==========================================================================
   11. 🛡️ SECCIÓN 7: GARANTÍAS
   ========================================================================== */
.guarantees-section {
    padding: 80px 0;
}

.guarantees-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.guarantee-card {
    padding: 32px;
    background-color: var(--white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-light);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.guarantee-icon {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 16px;
}

/* ==========================================================================
   12. 🚀 SECCIÓN 8: CTA GRADIENTE FINAL
   ========================================================================== */
.cta-section {
    padding: 60px 0;
}

.cta-card-gradient {
    background: var(--gradient);
    color: var(--white);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);
    position: relative;

    /* Alineación Horizontal y Vertical */
    display: flex;
    align-items: center; /* Centra verticalmente los elementos */
    justify-content: space-between;
    gap: 30px;
    min-height: 200px;
    padding-bottom: 0 !important;
    padding-top: 20px !important;
}

/* Imagen pegada a la base */
.cta-img {
    max-height: 250px; /* Ajusta según la altura deseada */
    width: auto;
    align-self: flex-end; /* La apoya en la base del contenedor */
    object-fit: contain;
    display: block;
}

/* Agrupación central del texto */
.cta-content-text {
    flex: 1; /* Ocupa el espacio disponible central */
    text-align: left;
}

.cta-card-gradient h2 {
    font-size: 28px;
    margin-bottom: 8px;
}

.cta-card-gradient p {
    font-size: 16px;
    margin: 0;
}

/* Ajustes del Botón */
.cta-card-gradient .social-btn-premium {
    margin-top: 0 !important; /* Invalida el inline style previo */
    flex-shrink: 0; /* Evita que el botón se reduzca */
}

/* Adaptabilidad para Celulares (Pasa a Vertical) */
@media (max-width: 991px) {
    .cta-card-gradient {
        flex-direction: column;
        padding: 40px 24px 0 24px;
        text-align: center;
    }

    .cta-img {
        order: 1; /* En móviles la imagen queda abajo o arriba según prefieras */
        max-height: 200px;
        margin-top: 20px;
    }

    .cta-content-text {
        text-align: center;
    }

    .cta-card-gradient .social-btn-premium {
        margin-top: 20px !important;
    }
}

/* ==========================================================================
   13. 🏛️ SECCIÓN 9: FOOTER & TRASPARENCIA
   ========================================================================== */

.main-footer {
    background: linear-gradient(135deg, #36098d 90%, #36098d 90%, #36098d 90%, #36098d 90%);
    color: #94a3b8;
    padding: 80px 0 20px 0;
    font-size: 14px;
    border-top: 2px solid var(--primary);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 40px;
}

.footer-brand .logo-text {
    color: var(--white);
}

.footer-brand img {
    width: 220px;
}


.social-links a {
    color: white;
    font-size: 20px;
    margin-right: 16px;
}

.footer-legal h4, .footer-links h4 {
    color: var(--white);
    margin-bottom: 20px;
}

.footer-links a {
    display: block;
    color: white;
    text-decoration: none;
    margin-bottom: 12px;
}

.complaints-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #1e293b;
    color: #f1f5f9 !important;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    border: 1px solid #334155;
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid #1e293b;
    font-size: 12px;
}

/* ==========================================================================
   14. 🟢 COMPONENTE FLOTANTE: WHATSAPP CON PULSO
   ========================================================================== */
.whatsapp-floating-pulse {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background-color: #22c55e;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
    text-decoration: none;
    z-index: 999;
    animation: pulseWhatsapp 2s infinite;
}

@keyframes pulseWhatsapp {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ==========================================================================
   15. 🖥️ RESPONSIVE MEDIA QUERIES (BREAKPOINTS CONSOLIDADOS)
   ========================================================================== */

/* Ajustes específicos para móviles pequeños o medianos */
@media (max-width: 768px) {
    .hero-text-center h1 {
        font-size: 2rem;
    }
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .hero-actions .btn {
        width: 100%;
    }
}

/* Breakpoint Global para Escritorio, Tablets y Pantallas Grandes */
@media (min-width: 768px) {
    .nav-menu { 
        display: flex; 
    }
    .hero-text-center h1 {
        font-size: 3.2rem;
    }
    .stats-container { 
        grid-template-columns: repeat(5, 1fr); 
    }
    .portfolio-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }
    .testimonials-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }
    .process-timeline { 
        flex-direction: row; 
    }
    .process-step { 
        flex: 1; 
    }
    .guarantees-grid { 
        grid-template-columns: repeat(4, 1fr); 
    }
    .footer-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }
    .cta-card-gradient { 
        padding: 64px 48px; 
    }
    .cta-card-gradient h2 { 
        font-size: 40px; 
    }
}


/*SECCIÓN REOCONOCIMINEOT*/

/* ==========================================================================
   6. 📊 SECCIÓN 2: PRUEBA SOCIAL ANIMADA (NEUROMARKETING)
   ========================================================================== */
.stats-section {
    padding: 60px 0;
    background-color: var(--light-bg);
    border-top: 1px solid var(--gray-light);
    border-bottom: 1px solid var(--gray-light);
}

.stats-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.stat-card {
    background-color: var(--white);
    padding: 30px 24px;
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(28, 19, 197, 0.03);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(28, 19, 197, 0.1);
}

.stat-icon-wrapper {
    font-size: 20px;
    color: var(--primary-light); /* Usa el azul claro #1c13c5 */
    margin-bottom: 10px;
    opacity: 0.8;
}

.stat-num {
    font-size: 42px;
    font-weight: 800;
    color: #3A0899;/* Azul oscuro corporativo */
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.stat-label {
    font-size: 13px;
    color: #3A0899;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tarjeta Destacada Geográfica (Efecto Neuromarketing de Cercanía) */
.stat-card.geo-highlight {
    background: linear-gradient(135deg, #3A0899 0%, #5C1FD1 100%);
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
}

.geo-pulse {
    font-size: 28px;
    color: var(--blue-neon);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    animation: geoPulseAnim 2s infinite ease-in-out;
}

.stat-label-large {
    font-size: 15px;
    font-weight: 600;
    color: #EFEBFF;
    line-height: 1.3;
}

.stat-label-large span {
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
}

/* Animación sutil de pulso para el marcador de mapa */
@keyframes geoPulseAnim {
    0% { transform: scale(1); text-shadow: 0 0 0 rgba(56, 189, 248, 0); }
    50% { transform: scale(1.1); text-shadow: 0 0 12px rgba(56, 189, 248, 0.6); }
    100% { transform: scale(1); text-shadow: 0 0 0 rgba(56, 189, 248, 0); }
}

/* Breakpoint Responsivo Adaptado */
@media (min-width: 768px) {
    .stats-container {
        grid-template-columns: repeat(5, 1fr); /* Alineación perfecta en desktop */
    }
}




/* STEP DE PASOS*/


/* Sección de la lista de pasos */

.containerx {
    display: flex;
    flex-direction: column-reverse; /* Pone el celular arriba en móviles para mejor UX. Si lo quieres abajo, usa 'column' */
    width: 100%;
    max-width: 1200px;
    gap: 40px;
    margin: 0 auto;
    margin-bottom: 50px;
}

/* 2. Se activa el comportamiento en dos columnas SOLO cuando la pantalla es Desktop (Mínimo 992px) */
@media (min-width: 992px) {
    .containerx {
        display: grid;
        grid-template-columns: 1fr 420px; 
        grid-template-rows: auto;
        gap: 50px;
        align-items: center;
    }
}
        .steps-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .step-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            cursor: pointer;
            padding: 12px;
            border-radius: 8px;
            transition: all 0.3s ease;
            user-select: none;
        }

        .step-item:hover .step-number:not(.active) {
            background-color: #dee2e6;
        }

        .step-number {
            width: 44px;
            height: 44px;
            background: #e2e8f0;
            color: var(--text-muted);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.1rem;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .step-number.active {
            background: black;
            color: #ffffff;
            box-shadow: 0 4px 10px rgba(40, 19, 168, 0.);
        }

        .step-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .step-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-dark);
            transition: color 0.3s ease;
        }

        .step-item.active-text .step-title {
            color: var(--primary-blue);
        }

        .step-description {
            font-size: 0.95rem;
            color: var(--text-muted);
            line-height: 1.4;
        }

        /* Sección del visualizador y flechas */
        .preview-wrapper {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-shrink: 0;
        }

        .nav-btn {
            width: 50px;
            height: 50px;
            background-color: black;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 10px rgba(255, 122, 0, 0.3);
            transition: all 0.3s ease;
            z-index: 10;
        }

        .nav-btn:hover {
            transform: scale(1.08);
            background-color: #e66e00;
        }

        .nav-btn:active {
            transform: scale(0.95);
        }

        /* Contenedor del Mockup Móvil idéntico al de image_2a0277.png */
        .phone-mockup {
            width: 280px;
            height: 560px;
            background: white;
            border-radius: 36px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.12);
            border: 10px solid #f1f3f5;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
           
            transition: all 0.3s ease;
        }

        .phone-mockup img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
            transition: opacity 0.3s ease;
        }

        /* Adaptabilidad / Responsive */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
                gap: 40px;
            }
            .preview-wrapper {
                order: -1; /* Pone el celular arriba en tablets/móviles */
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 576px) {
            .step-item {
                gap: 12px;
                padding: 6px;
            }
            .step-number {
                width: 36px;
                height: 36px;
                font-size: 1rem;
            }
            .step-title {
                font-size: 1.05rem;
            }
            .step-description {
                font-size: 0.88rem;
            }
            .phone-mockup {
                width: 240px;
                height: 480px;
            }
            .nav-btn {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            }

             .container {
                flex-direction: column;
                gap: 10px;
            }

        }


/*BOTÓN DE PLAY EN VIDEO*/

        .reel-mockup{
    position:relative;
}

/* Botón Play */
.video-play-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:90px;
    height:90px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px);
    color:#fff;
    font-size:34px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
    z-index:100;
}

.video-play-btn:hover{
    transform:translate(-50%,-50%) scale(1.12);
    background:rgba(40,19,168,.9);
}

.video-play-btn.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}




/* ==========================================================================
   Sección Social CTA - Estilo App Premium
   ========================================================================== */
/* ==========================================================================
   Efecto Parallax y Preparación de Capas
   ========================================================================== */
/* ==========================================================================
   Sección con Fondo Parallax Fijo
   ========================================================================== */
/* ==========================================================================
   Sección CTA con Fondo de Imagen Parallax Evidente
   ========================================================================== */
.social-cta-section {
    position: relative;
    padding: 80px 20px 0 20px;
    background-color: #140863; /* Color base oscuro */
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 1. Capa de Imagen Texturizada que viaja por detrás */
.social-bg-image-parallax {
    position: absolute;
    top: -30%;
    left: -10%;
    width: 120%;
    height: 160%;
    
    /* Reemplaza esta URL por la textura o imagen gráfica que prefieras */
    /*background-image: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=1600&auto=format&fit=crop');*/
    background-image: url('img/fondo2.jpg');
    background-size: cover;
    background-position: center;
    
    /* Filtro para integrar la imagen con la paleta morada/azul de tu marca */
    background-color: rgba(26, 12, 122, 0.85);
    background-blend-mode: multiply; 
    
    opacity: 0.6; /* Ajusta la visibilidad de la textura */
    z-index: 1;
    will-change: transform;
}

/* 2. Capa de Destello Amarillo (Se mueve en sentido opuesto) */
.social-bg-glow-parallax {
    position: absolute;
    top: -10%;
    right: 5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(247, 196, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 2;
    will-change: transform;
}

.social-cta-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: flex-end;
    position: relative;
    z-index: 3; /* El contenido flota por encima del fondo */
}

/* 3. Personaje 100% FIJO */
.social-cta-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.social-cta-main-image {
    max-width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 4;
}

/* --- Contenido --- */
.social-badge {
    display: inline-block;
    background: #f7c400; /* Match con tu amarillo/mostaza corporativo */
    color: #0f0f11;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(247, 196, 0, 0.2);
}

.social-cta-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.social-cta-description {
    color: rgb(239, 235, 255);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 500px;
}

/*INICIO DE BOTÒN DE REDES SOCIALES*/

/*====================================================
 BOTÓN PREMIUM - ESTILO APP MODERNA
====================================================*/

.social-btn-premium{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;

    width:auto;
    min-width:240px;

    padding:8px 8px 8px 22px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #18b856 0%,
        #0fa34a 100%
    );

    color:#fff;
    text-decoration:none;

    font-size:15px;
    font-weight:700;

    transition:
    .30s ease;

    overflow:hidden;

    box-shadow:
    0 8px 24px rgba(16,156,68,.18);
}


/* Texto */

.social-btn-text{
    flex:1;
    text-align:center;
    margin-left:10px; /* Compensa el ancho del icono */
}


/* Icono */

.social-btn-icon{

    width:42px;
    height:42px;

    margin-left:16px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    background:white;

    backdrop-filter:blur(12px);

    transition:.30s ease;
}

.social-btn-icon i{

    color:#fff;
    font-size:16px;
}


/* Reflejo moderno */

.social-btn-premium::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    120deg,
    transparent 25%,
    rgba(255,255,255,.18) 45%,
    transparent 65%);

    transform:translateX(-130%);

    transition:1s;
}


/* Hover */

.social-btn-premium:hover{

    transform:
    translateY(-2px)
    scale(1.02);

    box-shadow:
    0 18px 35px rgba(16,156,68,.28);
}


.social-btn-premium:hover::before{

    transform:translateX(130%);
}


.social-btn-premium:hover .social-btn-icon{

    transform:translateX(4px);

    background:rgba(255,255,255,.26);
}


/* Click */

.social-btn-premium:active{

    transform:scale(.97);
}

/*FIN DE BOTÒN DE REDES SOCIALES*/


/* Resplandor trasero estético */
.social-image-bg-glow {
    position: absolute;
    width: 110%;
    height: 110%;
    background: radial-gradient(circle, rgba(247, 196, 0, 0.12) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
    pointer-events: none;
}


/* --- Contenedor de Imagen de Impacto --- */
.social-cta-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 1. EMPUJA TODO EL CONTENIDO AL FONDO */
    align-self: flex-end;  /* 2. ASEGURA QUE EL CONTENEDOR EN SÍ SE PEGUE ABAJO DEL GRID */
    height: 100%;          /* Hace que el contenedor ocupe todo el alto disponible */
    overflow: hidden;      /* Evita que cualquier desborde rompa la sección */
}

/* Imagen Frontal de Alta Calidad */
.social-cta-main-image {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;        /* Elimina el espacio en blanco inferior por defecto de las imágenes */
    margin-top: auto;      /* Empuja la imagen hacia abajo con fuerza */
    object-fit: cover;
    object-position: bottom; /* Garantiza que el enfoque del recorte priorice la base */
  
    /* Sutil efecto parallax al cargar o hacer hover */
    transition: transform 0.5s ease;
}


/* Le damos el padding directamente al bloque de texto para que respire por abajo */
.social-cta-content {
    padding-bottom: 80px; 
}


/* Ajuste en el Hover para que no se separe del borde al escalar */
/*.social-cta-image-wrapper:hover .social-cta-main-image {*/
    /* Agregamos origin bottom para que crezca desde abajo hacia arriba sin despegarse */
   /* transform: scale(1.03); 
    transform-origin: bottom; 
}*/


/* ==========================================================================
   Modo Responsive Adaptable
   ========================================================================== */
@media (max-width: 991px) {
    .social-cta-section {
        padding: 60px 16px 0 16px; /* Mantiene 0 abajo en tablets */
    }

    .social-cta-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px; /* Reducimos el espacio para juntar más los bloques */
    }

    .social-cta-content {
        order: 1;
        padding-bottom: 20px; /* Reducimos el padding en móvil ya que la foto va abajo */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .social-cta-image-wrapper {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .social-cta-main-image {
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .social-cta-section {
        padding: 50px 16px 0 16px; /* Mantiene 0 abajo en móviles */
    }

    .social-cta-title {
        font-size: 30px;
    }

    .social-cta-main-image {
        max-width: 270px; /* Ajuste premium para pantallas angostas */
    }



}


/* --- Animaciones --- */
@keyframes shineCTA {
    0% { left: -100%; }
    100% { left: 150%; }
}

/* ==========================================================================
   Modo Responsive (Móviles y Tablets)
   ========================================================================== */
@media (max-width: 991px) {
    .social-cta-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    .social-cta-content {
        order: 1; /* El texto va primero en pantallas móviles */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .social-cta-description {
        margin-left: auto;
        margin-right: auto;
    }

    .social-cta-image-wrapper {
        order: 2;
    }
    
    .social-cta-main-image {
        max-width: 300px; /* Reducción proporcional para mobile cards */
    }
}

@media (max-width: 576px) {
    .social-cta-section {
        padding: 50px 0px 0px 16px;
    }

    .social-cta-title {
        font-size: 30px;
    }

    .social-cta-description {
        font-size: 15px;
    }

    .social-btn-premium {
        width: 100%; /* El botón se vuelve full-width táctil tipo App */
        max-width: 320px;
        padding: 4px 4px 4px 20px;
        font-size: 16px;
    }
    
    .social-btn-icon {
        width: 38px;
        height: 38px;
    }

    
}

/*SECCIONES NUEVAS*/

/* ==========================================================================
   CONFIGURACIONES GLOBALES DE LAS NUEVAS SECCIONES
   ========================================================================== */
.success-stories-section, .reviews-section, .faq-legal-section {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #0f0f11;
    overflow: hidden;
}

/* --- REUTILIZABLES BADGES --- */
.stories-badge, .reviews-badge, .faq-badge {
    display: inline-block;
    background: #f7c400;
    color: #0f0f11;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

/* ==========================================================================
   MÓDULO 5: CASOS DE ÉXITO (CSS STORYTELLING)
   ========================================================================== */
.success-stories-section {
    position: relative;
    padding: 80px 20px;
    background: linear-gradient(135deg, #fbfbff 0%, #f2f0ff 40%, #e6e1ff 75%, #d8d0ff 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}
.stories-container { max-width: 1100px; margin: 0 auto; }
.stories-header { text-align: center; margin-bottom: 40px; }
.stories-header h2 { color: #fff; font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.stories-header p { color: #a1a1aa; font-size: 16px; max-width: 600px; margin: 0 auto; }

/* Tarjeta Contenedora Principal estilo App */
.story-app-card {
    background: #3A0D8F;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(15, 10, 48, 0.4);
}

.story-selectors {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 30px;
}
.story-selectors::-webkit-scrollbar { display: none; }

.story-selector-btn {
    background: rgba(255,255,255,0.05);
    border: none;
    color: #a1a1aa;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.story-selector-btn.active {
   background: #FFD54A;
border: 1px solid rgba(255,255,255,.18);
color:#4A2E00;
backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px rgba(40,19,168,1);
}

/* Layout del Contenido del Caso */
.story-grid-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}
.story-meta-info h3 { color: #fff; font-size: 28px; font-weight: 800; margin-bottom: 24px; }

/* Línea de tiempo / Flujo */
.story-flow-timeline { display: flex; flex-direction: column; gap: 20px; }
.flow-step { display: flex; gap: 16px; position: relative; }
.flow-step-icon {
    width: 36px;
    height: 36px;
    background: rgba(40,19,168,0.15);
    color: #f7c400;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.flow-step-text h4 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.flow-step-text p { color: #CDC5D4; font-size: 14px; line-height: 1.4; }

/* Visuales e Interactivo Antes y Después */
.story-visuals-side { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
}
.ba-split-container {
    display: block; /* Cambiado de grid a block para que ocupe una sola fila completa */
    width: 100%;
}

.ba-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    height: auto; 
    
    /* Adaptado a la proporción de tu plantilla de Canva (4:3) 
       para que se vea la portada completa de arriba a abajo sin cortes */
  
    
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 35px rgba(10, 5, 35, 0.25); /* Sombra premium para que resalte */
}

.ba-box img { 
    width: 100%; 
    height: auto; 
    object-fit: cover; /* Llena el contenedor manteniendo la geometría perfecta */
    display: block;
}

/* Mantenemos el tag flotando por si quieres usar una etiqueta premium sobre la portada */
.ba-tag {
    position: absolute;
    top: 14px; 
    left: 14px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 2;
}
.ba-box.after .ba-tag { background: #10b981; color: #fff; }
.ba-box.after .ba-tag { background: #10b981; color: #fff; }
.story-quote-bubble {
    background: rgba(255,255,255,0.03);
    padding: 20px;
    border-radius: 16px;
    border-left: 4px solid #f7c400;
}
.story-quote-bubble p { color: #e4e4e7; font-style: italic; font-size: 14px; line-height: 1.5; margin-bottom: 8px;}
.story-quote-bubble span { color: #a1a1aa; font-size: 12px; font-weight: 600; display: block;}

/* ==========================================================================
   MÓDULO 6: OPINIONES (CSS SLIDER PREMIUM)
   ========================================================================== */
.reviews-section {
    position: relative;
    padding: 80px 20px;
    background: #f8fafc;
}
.reviews-container { max-width: 1100px; margin: 0 auto; }
.reviews-header { text-align: center; margin-bottom: 40px; }
.reviews-header h2 { color: #fff; font-size: 32px; font-weight: 800; }

.reviews-slider-wrapper { position: relative; width: 100%; display: flex; align-items: center; }
.reviews-slider-container {
    width: 100%;
    overflow: hidden;
    /* Añadimos padding arriba, abajo y en los laterales para albergar la sombra */
    padding: 20px 0px 45px 0px; 
    
    box-sizing: border-box;
}


.reviews-track { display: flex; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); gap: 24px; }

/* Tarjeta de Opinión Única */
.review-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 22px;
    padding: 28px;
    min-width: calc(33.333% - 16px);
    box-sizing: border-box;
   
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.05), 
        0 15px 30px rgba(10, 5, 35, 0.05);
   
    transition: transform 0.3s ease;
}
.review-stars { color: #f7c400; font-size: 13px; margin-bottom: 14px; }
.review-text { color: #0f111a; font-size: 14px; line-height: 1.6; font-style: italic; margin-bottom: 20px; }
.review-user { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: center; }
.user-info h4 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.user-info span { color: #71717a; font-size: 12px; }

/* Flechas Flotantes Opiniones */
.review-nav-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    background: rgb(66, 17, 158);
    border: none; color: #fff;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 10; backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}
.review-nav-btn:hover { background: #2813a8; }
.review-prev { left: -22px; }
.review-next { right: -22px; }

/* ==========================================================================
   MÓDULO 9: PARTNERS (CSS MARQUEE LOOP)
   ========================================================================== */
.partners-section {
    padding: 30px 0;
    background: #0d0642;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.partners-slider-container { width: 100%; overflow: hidden; }
.partners-track { display: flex; gap: 60px; width: max-content; animation: loopPartners 20s linear infinite; align-items: center; }
.partner-item {
    font-size: 18px; font-weight: 700; color: #52525b;
    display: flex; align-items: center; gap: 12px;
    filter: grayscale(100%); transition: all 0.3s ease;
}
.partner-item i { font-size: 22px; }
.partner-item:hover { filter: grayscale(0%); color: #fff; }

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

/* ==========================================================================
   MÓDULO 13: FAQ & CONTRATO LEGAL 3D
   ========================================================================== */
.faq-legal-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #160a6b 0%, #210f8c 45%, #4926b0 80%, #6848e3 100%);
}
.faq-legal-container {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px;
    align-items: flex-start;
}
.faq-block h2 { color: #fff; font-size: 36px; font-weight: 800; margin-bottom: 8px; }
.faq-subtitle { color: #a1a1aa; font-size: 16px; margin-bottom: 30px; }

/* Acordeón */
.faq-accordion { display: flex; flex-direction: column; gap: 14px; }
.accordion-item {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: background 0.3s ease;
}
.accordion-header {
    width: 100%; background: none; border: none;
    padding: 18px 22px; color: #fff; font-size: 16px; font-weight: 600;
    text-align: left; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    transition: background 0.2s ease;
}
.accordion-header i { font-size: 14px; color: #f7c400; transition: transform 0.3s ease; }
.accordion-header:hover { background: rgba(255,255,255,0.02); }

.accordion-content {

    max-height: 0; overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(0,0,0,0.1);
}
.accordion-content p { padding: 20px 22px 20px 22px; color: #CBCBD4; font-size: 14px; line-height: 1.6; }

/* Active States Accordion */
.accordion-item.active .accordion-header i { transform: rotate(180deg); }
.accordion-item.active .accordion-content { max-height: 200px; }

/* Tarjeta del Contrato Legal */
.contract-card-premium {
    background: rgba(15, 10, 48, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 26px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 55px rgba(10, 5, 35, 0.4);
}
.contract-card-header { margin-bottom: 20px; }
.badge-secure {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(16,185,129,0.15); color: #10b981;
    font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 20px; margin-bottom: 12px;
}
.contract-card-header h3 { color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.contract-card-header p { color: #CBCBD4; font-size: 14px; }

.iframe-wrapper-3d {
    position: relative; border-radius: 16px; overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
    background: #fff; height: 415px;
}
.fp-iframe { width: 100%; height: 100%; border: none; display: block; }

/* ==========================================================================
   OPTIMIZACIONES RESPONSIVE COMPLETAS
   ========================================================================== */
@media (max-width: 991px) {
    .story-grid-layout, .faq-legal-container { grid-template-columns: 1fr; gap: 40px; }
    .review-card { min-width: calc(50% - 12px); }
    .review-prev { left: -10px; } .review-next { right: -10px; }
}

@media (max-width: 767px) {
    .stories-header h2, .faq-block h2 { font-size: 28px; }
    .review-card { min-width: 100%; }
    .story-app-card { padding: 16px; border-radius: 16px; }
    .ba-split-container { grid-template-columns: 1fr; }
    .ba-box { height: auto; }
    .review-nav-btn { display: none; } /* Navegación táctil nativa en mobile */
    .reviews-slider-container { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .review-card { scroll-snap-align: start; }
}






/* ==========================================================================
   Navegación Lateral para Casos de Éxito
   ========================================================================== */
.story-slider-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.story-main-content {
    width: 100%;
    transition: opacity 0.25s ease-in-out;
}

/* Botones Circulares Flotantes */
.story-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(18, 10, 45, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-nav-btn:hover {
    background: #4608ad;
    border-color: #7c5cfc;
    color: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 25px rgba(70, 8, 173, 0.5);
}

.story-nav-btn.prev-btn {
    left: -23px; /* Sobresale sutilmente del card en pantallas grandes */
}

.story-nav-btn.next-btn {
    right: -23px;
}

/* ==========================================================================
   Ajuste Responsive (Móviles y Tablets)
   ========================================================================== */
@media (max-width: 768px) {
    .story-nav-btn {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
    
    /* En móviles los botones se ajustan hacia dentro para no salirse de pantalla */
    .story-nav-btn.prev-btn {
        left: 8px;
    }

    .story-nav-btn.next-btn {
        right: 8px;
    }

    /* Le da un margen interno al contenido para que los botones no tapen el texto */
    .story-main-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .iframe-wrapper-3d {
    height: 100%;
    max-width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
    }
}



/* Contenedor principal de la sección (debe permitir que los elementos salgan de su borde) */
.casos-exito-section, 
.stories-container {
    position: relative;
    overflow: visible !important; /* Permite que las flechas sean visibles fuera del marco */
}

/* Estilos aplicados solo para pantallas Desktop (992px en adelante) */
@media (min-width: 992px) {
    
    /* Ubicación de la flecha Izquierda fuera del contenedor */
    #prevStoryBtn {
        position: absolute;
        left: -60px; /* Desplaza la flecha a la izquierda fuera del recuadro azul */
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

    /* Ubicación de la flecha Derecha fuera del contenedor */
    #nextStoryBtn {
        position: absolute;
        right: -60px; /* Desplaza la flecha a la derecha fuera del recuadro azul */
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }
}
/* ===== Everestec optimization layer ===== */
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 99999; padding: 10px 14px; border-radius: 8px; background: #fff; color: #29006d; transform: translateY(-150%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #7b2cff; outline-offset: 3px; }
.hero-text-center { max-width: 850px; margin: 0 auto 28px; text-align: center; }
.hero-text-center h1 { font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.03; letter-spacing: -.04em; margin: 0; text-wrap: balance; }
.hero-text-center p { max-width: 720px; margin: 18px auto 0; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.65; color: rgba(255,255,255,.82); text-wrap: balance; }
.portfolio-img { background-image: var(--portfolio-bg); background-size: cover; background-position: center; }
[data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .65s cubic-bezier(.2,.65,.3,1), transform .65s cubic-bezier(.2,.65,.3,1); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-visible { opacity: 1; transform: translate3d(0,0,0); }
.nav-toggle { display: none; border: 0; background: transparent; color: inherit; font-size: 1.7rem; cursor: pointer; }
img { max-width: 100%; height: auto; }
section { content-visibility: auto; contain-intrinsic-size: 1px 700px; }
.hero-section, .logos-section { content-visibility: visible; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .header-container { position: relative; }
  .nav-menu { position: absolute; top: calc(100% + 10px); left: 16px; right: 16px; display: grid; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: 0 20px 45px rgba(26,0,73,.18); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .22s ease; }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .header-container > .btn-secondary { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}