/*    1. NORMALIZE & RESET (Base)  */
html {
    font-size: 16px;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    /* SOLUCIÓN AL FONDO BLANCO: */
    background-color: #0b1120; /* Pintamos la base del navegador del color de tu web */
    height: 100%; /* Asegura que ocupe todo el alto */
}

*, *:before, *:after {
    box-sizing: inherit;
    outline: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    background: #0b1120; /* Fondo oscuro base */
    color: #e2e8f0;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100%; /* Asegura que el cuerpo cubra la pantalla */

    .testimonial-card-tech {
       -webkit-user-select: none;
       user-select: none;
       pointer-events: none; /* Esto evita incluso que intenten hacer clic derecho sobre la tarjeta */
}
}

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

img {
    border-style: none;
    height: auto;
    max-width: 100%;
    display: block;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 2. ESTRUCTURA GLOBAL  */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* 3. HEADER & NAVEGACIÓN */
.top-header {
    background-color: #020617;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
}

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

.top-header-left {
    display: flex;
    gap: 25px;
}

.top-header-block a {
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-header-block a:hover { color: #fff; }
.top-header-block i { color: #00d26a; }

.main-header {
    position: relative; /* Deja que el Top Header respire */
    width: 100%;
    z-index: 1000;
    background: #1c3961;
    transition: all 0.3s ease;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.logo-wrap { padding: 0; flex-shrink: 0; }
.logo-wrap img { max-width: 250px; }

.nav-desktop { display: flex; align-items: center; }
.desktop-menu { display: flex; align-items: center; margin-left: 40px; }
.main-menu { display: flex; gap: 30px; }

.main-menu > li > a {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 5px;
    position: relative;
}

.main-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #00d26a;
    transition: width 0.3s ease;
}

.main-menu > li > a:hover::after { width: 100%; }
.main-menu > li > a:hover { color: #00d26a !important; }

/* Submenus */
.has-submenu { position: relative; }
.has-submenu .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 240px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 10px 0;
    border-radius: 4px;
    z-index: 100;
    border-top: 4px solid #00d26a;
    margin-top: 15px;
}
.has-submenu .submenu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #00d26a;
}
.has-submenu:hover .submenu { display: block; }
.submenu li { padding: 0; }
.submenu a {
    font-size: 0.95rem;
    color: #333 !important;
    padding: 12px 20px;
    display: block;
    border-bottom: 1px solid #f1f1f1;
    text-transform: none;
    font-weight: 500;
}
.submenu a:hover { background-color: #f0fdf4; color: #1c3961 !important; padding-left: 25px; }

/* ==========================================================================
   4. SELECTOR DE IDIOMAS (ESTILO TECH GLOBE & GRID)
   ========================================================================== */
.language-picker {
    position: relative;
    margin-left: 25px;
    z-index: 1001;
    /* Línea separadora vertical sutil a la izquierda */
    border-left: 1px solid rgba(255,255,255,0.1);
    padding-left: 25px;
    height: 40px;
    display: flex;
    align-items: center;
}

/* --- EL BOTÓN DEL MUNDO --- */
.globe-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1); /* Borde sutil */
    cursor: pointer;
    color: #94a3b8; /* Gris azulado técnico */
    font-size: 1.2rem;
    padding: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Círculo perfecto */
    width: 40px;
    height: 40px;
}

.globe-btn:hover, .globe-btn:focus, .language-picker:hover .globe-btn {
    color: #0b1120; /* Icono oscuro */
    background: #00d26a; /* Fondo verde encendido */
    border-color: #00d26a;
    box-shadow: 0 0 15px rgba(0, 210, 106, 0.4); /* Resplandor */
}

/* --- EL MEGA MENÚ DESPLEGABLE --- */
.language-list.mega-lang-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 55px; /* Distancia desde el botón */
    right: -10px; /* Alineado a la derecha */
    width: 450px; /* ANCHO GRANDE para las 2 columnas */
    background: #0f172a; /* Fondo oscuro sólido */
    border: 1px solid #00d26a; /* Borde verde técnico */
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.7);
    padding: 20px;
    z-index: 2000;
}
/* Hacer visible el menú de idiomas al pasar el mouse */
.language-picker:hover .language-list.mega-lang-menu {
    display: block;
    animation: fadeIn 0.3s ease; /* Opcional para que aparezca suave */
}
/* PUENTE INVISIBLE PARA EVITAR QUE EL MENÚ SE CIERRE */
.language-list.mega-lang-menu::after {
    content: '';
    position: absolute;
    top: -20px; /* Sube 20px para tapar el hueco entre el botón y el menú */
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent; /* Es totalmente invisible */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Flechita decorativa arriba del menú */
.language-list.mega-lang-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 24px;
    width: 12px;
    height: 12px;
    background: #0f172a;
    border-left: 1px solid #00d26a;
    border-top: 1px solid #00d26a;
    transform: rotate(45deg);
}

/* Título pequeño dentro del menú */
.lang-title {
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 15px 0;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 10px;
}

/* La rejilla (Grid) de 2 columnas */
.lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 15px; /* Espacio entre columnas */
}

.lang-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Las opciones individuales */
.language-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    color: #e2e8f0;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.language-option:hover {
    background: rgba(0, 210, 106, 0.1); /* Fondo verde suave */
    border-color: rgba(0, 210, 106, 0.2);
    color: #fff;
    transform: translateX(5px); /* Pequeño movimiento a la derecha */
}

/* Flag Icons SVG */
.flag-icon {
    display: inline-block;
    width: 24px;
    height: 16px;
    background-size: cover;
    background-position: center;
    margin-right: 8px;
    border-radius: 2px;
    vertical-align: middle;
}

.flag-icon.es { background-image: url('../images/flags/es.svg'); }
.flag-icon.en { background-image: url('../images/flags/us.svg'); }
.flag-icon.pt { background-image: url('../images/flags/br.svg'); }
.flag-icon.fr { background-image: url('../images/flags/fr.svg'); }
.flag-icon.de { background-image: url('../images/flags/de.svg'); }
.flag-icon.it { background-image: url('../images/flags/it.svg'); }
.flag-icon.ja { background-image: url('../images/flags/jp.svg'); }
.flag-icon.zh { background-image: url('../images/flags/cn.svg'); }
.flag-icon.ru { background-image: url('../images/flags/ru.svg'); }
.flag-icon.ar { background-image: url('../images/flags/sa.svg'); }

.flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    min-width: 28px;
    font-size: 1.1rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-right: 10px;
    transition: transform 0.2s ease;
}

.language-option:hover .flag,
.language-option:hover .flag-icon {
    transform: scale(1.1);
}

.desktop-only { display: block; }


/* ==========================================================================
   5. MENÚ MOBILE (VERSIÓN TECH FUSIONADA - CORREGIDA)
   ========================================================================== */

.hamburger-btn {
    display: none; 
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #fff;
    transition: color 0.3s;
}

.hamburger-btn:hover { color: #00d26a; }

.mobile-menu {
    position: fixed;
    top: 70px; 
    right: -100%; 
    left: auto; 
    
    /* CAMBIO DE TAMAÑO QUE PEDISTE ANTES */
    width: 320px; 
    
    height: calc(100vh - 70px);
    background: #0b1120;
    
    /* CAPA 2: Encima del fondo oscuro */
    z-index: 10002 !important; 
    
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.5); 
    overflow-y: auto;
    border-left: 1px solid rgba(0, 210, 106, 0.2); 
    padding-top: 0;
}

.main-header {
    position: relative; /* <--- CAMBIO CLAVE: Permite que respete el espacio de la barra superior */
    width: 100%;
    z-index: 1000;
    background: #1c3961;
    transition: all 0.3s ease;
}

/* --- MENÚ LATERAL (SIDEBAR) --- */
.mobile-menu {
    position: fixed;
    top: 70px; /* Debajo del header */
    right: -100%; /* OCULTO A LA DERECHA */
    left: auto; /* Anulamos la izquierda */
    width: 320px;
    height: calc(100vh - 70px);
    background: #0b1120;
    z-index: 9999;
    /* Animamos la propiedad 'right' */
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.5); /* Sombra hacia el otro lado */
    overflow-y: auto;
    border-left: 1px solid rgba(0, 210, 106, 0.2); /* Borde al lado interno */
    padding-top: 0;
}

.mobile-menu.active {
    right: 0; /* SE MUESTRA PEGADO A LA DERECHA */
    left: auto;
}


/* --- FONDO OSCURO (OVERLAY) --- */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.5); 
    backdrop-filter: blur(4px); 
    
    /* CAPA 1: Encima de la web, pero DEBAJO del menú (10002) */
    z-index: 10001 !important; 
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
backdrop-filter: blur(4px); /* El desenfoque también ayuda a ocultar el fondo */
}

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

/* Cuando se activa con JS */
.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* El botón de cerrar (X) ahora debe ser visible y funcional */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #020617;
    border-bottom: 1px solid rgba(0, 210, 106, 0.3);
}

/* Botón Patreon Móvil (Estilo botón sólido para evitar bloqueos) */
/* Botón Patreon Móvil */
.mobile-patreon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* AJUSTE DE MÁRGENES: Reducimos el de abajo a 5px */
    margin: 15px 20px 5px 20px; 
    background: #FF424D;
    color: #fff !important;
    padding: 12px;
    border-radius: 6px;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.3s;
}

/* Contenedor de Idiomas Móvil */
.language-picker-mobile { 
    padding: 0 20px 20px 20px; /* Quitamos padding superior */
    /* AJUSTE: Quitamos el margen de arriba para pegarlo al botón */
    margin-top: 5px; 
}


/* --- ESTILO DE ESTRUCTURA DE ÁRBOL (TREE VIEW) --- */

.mobile-main-menu {
    padding: 10px 0 20px 0 !important; /* Quitamos padding left del contenedor */
    position: relative;
}

/* 1. LÍNEA VERTICAL PRINCIPAL (El tronco) */
.mobile-main-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px; /* Posición fija a la izquierda */
    width: 1px;
    height: 98%;
    background: rgba(0, 210, 106, 0.3); /* Un poco más visible */
    z-index: 1;
}

.mobile-main-menu li {
    position: relative;
    list-style: none;
}

/* 2. LA RAMITA HORIZONTAL (├──) */
.mobile-main-menu > li::before {
    content: '├──';
    position: absolute;
    left: 20px; /* Nace exactamente desde la línea vertical */
    top: 12px;  /* AJUSTE CLAVE: Centrado vertical con el texto */
    color: #00d26a;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 1.1rem; /* Tamaño para que coincida con el grosor */
    z-index: 2;
    letter-spacing: -2px; /* Junta los guiones para que parezca una línea sólida */
}

/* El último elemento cierra la rama (└──) */
.mobile-main-menu > li:last-child::before {
    content: '└──';
}

/* 3. EL ENLACE (TEXTO E ICONO) - ALINEACIÓN FLEX */
.mobile-main-menu a {
    display: flex !important;       /* Activa Flexbox */
    align-items: center !important; /* Centra verticalmente el contenido */
    justify-content: space-between; /* Texto a la izq, Flecha a la der */
    
    /* Espacio para no pisar la ramita verde */
    padding: 12px 20px 12px 55px !important; 
    
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 1.1rem !important;
    color: #e2e8f0;
    line-height: 1.2; /* Reduce la altura de línea para mejor control */
    position: relative;
    z-index: 3;
}

/* Ajuste específico para el icono de la derecha (flechita) */
.mobile-main-menu a i.fa-chevron-down {
    font-size: 0.9rem;
    margin-left: 10px;
}

/* Estado Hover */
.mobile-main-menu a:hover {
    color: #00d26a;
    background: rgba(0, 210, 106, 0.05); /* Fondo sutil al pasar el dedo */
}

/* --- SUBMENÚS CON SANGRÍA Y LÍNEAS --- */

.mobile-submenu {
    display: none;
    margin-left: 35px !important;
    border-left: 1px solid rgba(0, 210, 106, 0.3);
    padding-left: 0 !important;
    background: transparent !important;
}

.mobile-submenu li::before {
    position: absolute;
    left: 0;
    top: 15px;
    color: rgba(0, 210, 106, 0.5);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.mobile-submenu li:last-child::before {
    font-family: 'Raleway', sans-serif !important; /* Fuente más legible para detalles */
    background: #0b1120;
    height: 20px;
}

.mobile-submenu a span[style*="font-weight:700"] {
    color: #fff !important; /* Color blanco brillante */
    font-size: 1rem !important; /* Tamaño del título interno */
}

/* --- SELECTOR DE IDIOMAS MÓVIL --- */
.language-picker-mobile { 
    padding: 20px; 
    margin-top: 10px;
}

.language-picker-mobile .selected-language { 
    background: rgba(255, 255, 255, 0.05); 
    color: #fff; 
    width: 100%;
    border: 1px solid rgba(0, 210, 106, 0.3);
    padding: 12px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.language-picker-mobile .language-list { 
    position: static !important; 
    width: 100% !important; 
    background: #0f172a !important; 
    box-shadow: none !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important; 
    border-radius: 0 0 6px 6px !important; 
    margin-top: -1px; 
    display: none; 
}

.language-picker-mobile .language-option {
    padding: 12px 20px;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* ==========================================================================
   CORRECCIÓN: TAMAÑO DEL MENÚ AL SCROLLEAR (SOLO MÓVIL/TABLET)
   ========================================================================== */
@media (max-width: 992px) {

    /* 1. Controlar la altura de la barra azul al bajar */
    .main-header.sticky .container {
        /* En PC lo tenías en 8px, aquí lo dejamos más cómodo para el dedo */
        padding-top: 12px !important; 
        padding-bottom: 12px !important;
    }

    /* 2. Controlar el tamaño del Logo al bajar */
    /* Forzamos que el logo tenga el mismo tamaño siempre, scrollees o no */
    .logo-wrap img, 
    .main-header.sticky .logo-wrap img {
        max-width: 180px !important; /* Ajusta este número si quieres el logo más grande/chico */
        transition: none !important; /* Quitamos la animación de encogimiento */
    }
    
    /* 3. Asegurar que la barra azul se quede fija y visible */
    .main-header, .main-header.sticky {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
    }
	/* Responsive: Ocultar en móvil (ya que el móvil tiene su propio selector) */
    .desktop-only { display: none; }
	
    .hero-section {
        /* Reduce el espacio superior en móviles para que la foto suba */
        padding-top: 30px; 
    }
    .hero-image-col {
        /* Más espacio en móvil para la cabeza */
        padding-top: 0;
        margin-bottom: -30px; /* Reduce el espacio debajo en móvil */
    }
    .image-wrapper {
        width: 340px; /* Tamaño ajustado para móvil */
        height: 340px;
    }
    .imagen-perfil {
        height: 118%; /* Un poquito más alto en móvil para que destaque */
    }
	
    .hero-wrapper {
        flex-direction: column; 
        text-align: center;
        gap: 2rem;
    }

    .hero-image-col, .hero-text-col { flex: auto; width: 100%; padding: 0; }
    .hero-image-col { order: 1; }
    .hero-text-col { order: 2; }

    /* Ajuste de imagen en móvil */
    .image-wrapper { 
        width: 60%; /* Más pequeña en móvil */
        max-width: 300px; 
        margin: 0 auto; 
    }
    
    .titulo-principal { font-size: 2.5rem; }
    .contadores { justify-content: center; gap: 20px; flex-wrap: wrap; }
    .hero-cta { display: flex; justify-content: center; }
    .descripcion { margin: 0 auto 30px auto; }
	
    .desktop-menu, .desktop-only, .header-actions { display: none !important; }
    .hamburger-btn { display: block; }
    
    /* Forzamos que la barra del logo siempre te siga al bajar en móvil */
.main-header {
    position: fixed !important;
    top: 0;
    width: 100%;
    /* CAPA 3: La más alta de todas */
    z-index: 10005 !important; 
    background: #1c3961;
}	
	/* --- 1. ARREGLO DE LA IMAGEN (Centrado y Forma) --- */
    
    .hero-image-col {
        padding-top: 60px; /* Espacio superior */
        margin-bottom: 30px;
    }

    .image-wrapper {
        /* Definimos el tamaño del círculo en móvil */
        width: 340px;
        height: 340px;
        margin: 0 auto; /* Centrado del contenedor */
        border-radius: 50%; /* Forma circular */
    }

    /* Aseguramos que el fondo y el radar también sean circulares */
    .circle-bg, .image-wrapper::before {
        border-radius: 50%;
    }

    /* --- CORRECCIÓN CLAVE PARA CENTRAR LA FOTO --- */
    .imagen-perfil {
        /* Tamaño y posición vertical */
        height: 125%;
        bottom: 5px; /* Pegado a la base */

        /* USAREMOS !important PARA FORZAR EL CENTRADO */
        /* Esto asegura que la imagen se coloque exactamente al centro */
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* Aseguramos que el ancho no tenga límites para que el transform funcione */
        width: auto !important;
        max-width: none !important;
    }

    /* --- 2. ARREGLO DEL HEADER Y BOTÓN HISTORIAL (Centrado) --- */
    
    .top-header .container {
        flex-direction: column; /* Elementos uno debajo del otro */
        gap: 10px;
        padding: 10px 0;
    }

    .top-header-left {
        width: 100%;
        justify-content: center; /* Centra los correos */
        flex-wrap: wrap;
        gap: 15px;
    }

    .changelog-wrapper {
        width: 100%;
        display: flex;
        justify-content: center; /* Centra el botón de historial */
    }
	
    .footer-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Columnas en tablet */
    }

    .command-bar-content {
        flex-direction: column; /* Apila los elementos verticalmente */
        text-align: center;
        padding: 30px 25px;
    }
    .command-text {
        padding-right: 0;
        margin-bottom: 25px;
    }
    .command-text h3 {
        justify-content: center; /* Centra el título e icono */
        font-size: 1.4rem;
    }
    .command-actions {
        width: 100%;
        justify-content: center;
    }
    .btn-command-primary, .btn-command-secondary {
        flex: 1; /* Botones del mismo ancho */
        justify-content: center;
    }	
}

/* ==========================================================================
   6. HERO SECTION (ACTUALIZADO: CIRCULAR + 85% TAMAÑO)
   ========================================================================== */
.hero-section {
    width: 100%;
    background-color: #0b1120;
    
    /* Efecto de malla táctica */
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 40px 40px; 

    /* CAMBIO CLAVE AQUÍ: */
    min-height: 100vh; /* Fuerza a que ocupe SIEMPRE el 100% de la altura de la pantalla */
    
    padding: 0; /* Quitamos padding vertical excesivo para centrar mejor */
    display: flex;
    align-items: center; /* Centra el contenido verticalmente perfecto */
    position: relative;
    overflow: hidden;
    
    /* Ajuste para que el menú fijo no tape el contenido al centrarse */
    padding-top: 20px; 
	padding-bottom: 80px;
}

.hero-container-fluid {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-wrapper {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 4rem; 
    width: 100%;
}
.hero-action-area {
    display: flex;
    flex-direction: column;
    gap: 15px; 
    margin-top: 40px; /* <--- Sube de 30px a 40px o 50px */
    max-width: 480px; 
}

/* ==========================================================================
   CORRECCIÓN FINAL: EFECTO 3D "PIES DENTRO / CABEZA FUERA"
   ========================================================================== */

/* 1. La columna contenedora */
.hero-image-col {
    flex: 5.5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Agregamos espacio arriba para asegurar que la cabeza no se corte */
    padding-top: 20px; 
}

/* 2. El escenario (Define el tamaño del círculo) */
.image-wrapper {
    position: relative;
    /* Reduje un poco el tamaño (de 550 a 480) para que no se vea "muy grande" */
    width: 200px;
    height: 660px;
    margin: 0 auto;
}

/* 3. El Círculo Verde (FONDO) */
.circle-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Estilo del círculo */
    border: 4px solid rgba(0, 210, 106, 0.5); /* Borde un poco más grueso */
    background: radial-gradient(circle at center bottom, rgba(0, 210, 106, 0.15) 0%, transparent 75%);
    box-shadow: 0 0 50px rgba(0, 210, 106, 0.3);
    z-index: 1; /* CAPA 1: Detrás */
    
    /* Animación suave que NO mueve el círculo de sitio */
    animation: softGlow 4s infinite alternate;
}

/* 4. Tu Foto (FRENTE - Con efecto de ocultado inferior) */
.imagen-perfil {
    position: absolute;
    z-index: 2; /* CAPA 2: Delante */
    
    /* Centrado horizontal */
    left: 50%;
    transform: translateX(-50%);
    
    /* ALINEACIÓN: */
    /* bottom: 0 pega la imagen al suelo del contenedor */
    bottom: 0; 
    
    /* TAMAÑO: */
    /* Mantenemos tu altura para que la cabeza salga */
    height: 115%; 
    width: auto;
    
    /* --- EL TRUCO DE LA MÁSCARA (AQUÍ ESTÁ LA MAGIA) --- */
    /* Esto hace que el 10% inferior de la imagen sea transparente */
    /* Así las piernas no se ven "cortadas" bruscamente, sino que entran en la forma */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 5%, black 20%);
    mask-image: linear-gradient(to top, transparent 0%, transparent 5%, black 20%);
    
    /* Filtros */
    filter: drop-shadow(0 10px 25px rgba(0,0,0,0.6));
    
    /* Limpieza */
    border-radius: 0 !important; border: none !important; box-shadow: none !important;
}

/* Nueva animación suave solo de brillo */
@keyframes softGlow {
    from { box-shadow: 0 0 40px rgba(0, 210, 106, 0.2); opacity: 0.8; }
    to   { box-shadow: 0 0 70px rgba(0, 210, 106, 0.4); opacity: 1; }
}


.image-wrapper {
    position: relative;
    /* ===========================================================
       AQUÍ ESTÁ EL CAMBIO DE TAMAÑO (PUNTO 3)
       Cambia el 85% si la quieres más grande o pequeña.
       =========================================================== */
    width: 60%;  /* <-- AQUÍ REDUCES EL TAMAÑO */
    max-width: 550px; /* También limitamos el máximo para pantallas gigantes */
    margin: 0 auto; /* Centrado */
    z-index: 2;
    aspect-ratio: 1 / 1; /* Forza que el contenedor sea cuadrado */
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-perfil {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la foto llene el círculo sin deformarse */
    border-radius: 50%; /* <-- ESTO LA HACE CIRCULAR */
    border: 3px solid rgba(0, 210, 106, 0.3); /* Borde verde tech sutil */
    box-shadow: 0 0 40px rgba(0, 210, 106, 0.2); /* Brillo verde alrededor */
    position: relative;
    z-index: 2;
}

/* Brillo detrás de la foto (Ajustado para ser circular) */
.tech-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%; /* Sigue el tamaño del wrapper (85%) */
    height: 100%;
    border-radius: 50%; /* También circular */
    background: radial-gradient(circle, rgba(0, 210, 106, 0.15) 0%, transparent 70%);
    z-index: -1;
    animation: pulse 4s infinite; /* Pequeña animación de latido */
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
}

/* --- COLUMNA TEXTO (DERECHA) --- */
.hero-text-col {
    flex: 4.5;
    padding-right: 20px;
	padding-bottom: 60px;
}

.badge-role {
    display: inline-block;
    color: #00d26a;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px; /* <--- Reducido de 25px a 10px */
    background: rgba(0, 210, 106, 0.08);
    padding: 8px 16px;
    border-radius: 4px;

    /* --- ESTILO HACKER / TERMINAL --- */
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0px; 
    border-left: 3px solid #00d26a;
    padding-left: 12px;
    animation: blinkCursor 4s infinite;
}

.titulo-principal {
    font-size: 3.5rem;
    line-height: 1.1;
    color: #ffffff;
    font-weight: 800;
    margin-top: 0; /* <--- AÑADIDO: Elimina el espacio invisible que el navegador pone arriba del h1 */
    margin-bottom: 25px;
    text-transform: none;
}

.text-highlight { color: #00d26a; }

.descripcion {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 90%;
}

.descripcion strong { color: #fff; font-weight: 600; }

/* --- CONTADORES ESTILO TECH CARDS --- */
.contadores {
    display: flex;
    gap: 20px; /* Espacio entre cuadros */
    margin-bottom: 20px;
    border-top: none; /* Quitamos la línea superior simple */
    padding-top: 10px;
}

/* ==========================================================================
   CONTADORES CON BORDE NEÓN ANIMADO
   ========================================================================== */

.item-contador {
    background: #1e293b; /* Fondo sólido para que no se vea el centro del borde */
    border-radius: 12px;
    position: relative;
    padding: 15px 20px;
    flex: 1;
    min-width: 120px;
    text-align: center;
    transition: all 0.3s ease;
    overflow: hidden; /* Importante para que el brillo no se salga */
    z-index: 1;
}

/* El pseudo-elemento que crea el rayo de luz */
.item-contador::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent, 
        rgba(0, 210, 106, 0.8), /* Tu verde marca */
        transparent 30%
    );
    animation: rotateNeon 4s linear infinite;
    z-index: -2;
}

/* El fondo interno para tapar el centro del brillo y dejar solo el borde */
.item-contador::after {
    content: '';
    position: absolute;
    inset: 2px; /* Grosor del borde neón */
    background: #1e293b;
    border-radius: 10px;
    z-index: -1;
}

/* Animación de rotación */
@keyframes rotateNeon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Efecto Hover: El neón brilla más */
.item-contador:hover::before {
    animation-duration: 2s; /* Se acelera al pasar el mouse */
    background: conic-gradient(
        transparent, 
        #00d26a, 
        transparent 30%
    );
}

.numero-contador {
    /* AJUSTE MANUAL: Cambia este valor para que el número sea más discreto o imponente */
    font-size: 2.5rem; /* El valor anterior era 2.8rem */
    
    font-weight: 800;
    color: #00d26a;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Courier New', Courier, monospace;
}

.label-contador {
    /* AJUSTE MANUAL: Cambia el tamaño del texto "ALUMNOS", "SEGUIDORES", etc. */
    font-size: 0.75rem; /* El valor anterior era 0.75rem */
    
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ajuste responsive para que en celulares no se amontonen */
@media (max-width: 480px) {
    .contadores {
        flex-direction: column;
        gap: 15px;
    }
    .item-contador {
        width: 100%;
    }
}
.btn-primary-hero {
    background-color: #00d26a;
    color: #0b1120;
    padding: 16px 32px;
    border-radius: 6px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    transition: all 0.3s ease;
}

.btn-primary-hero:hover {
    background-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,210,106, 0.2);
}


/* ==========================================================================
   7. SECCIÓN TIENDA (ESTILO CLEAN TECH - BLANCO CON MALLA)
   ========================================================================== */

.store-section {
    background-color: #0b1120 !important;
    background-image: linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px) !important;
    border-top: 1px solid rgba(0, 210, 106, 0.2) !important;
}

/* AQUÍ ESTÁ LA MAGIA: Añadimos #tienda para forzar el color blanco */
#tienda .section-title-tech,
.store-section .section-title-tech { 
    color: #e2e8f0 !important; 
}
#tienda .section-subtitle,
.store-section .section-subtitle { 
    color: #cbd5e1 !important; 
}
/* 1. BASE COMÚN (Para que sean idénticos en tamaño y fuente) */
.section-title-tech {
    font-family: 'Raleway', sans-serif !important; /* Misma fuente */
    font-size: 2.5rem !important; /* Mismo tamaño grande */
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.2;
}

/* 3. COLOR PARA PATREON (Fondo Oscuro -> Texto Blanco) */
.patreon-section .section-title-tech {
    color: #e2e8f0 !important;
}

/* 3. COLOR PARA ENTREVISTAS (Fondo Oscuro -> Texto Blanco) */
.interviews-section .section-title-tech,
.store-section .section-title-tech {
    color: #1c3961 !important; 
}
/* ==========================================================================
   CORRECCIÓN DE SUBTÍTULOS (ADAPTABLE AL FONDO)
   ========================================================================== */

/* 1. Estilo Base (Por defecto para fondos oscuros como Patreon/Hero) */
.section-subtitle {
    text-align: center;
    color: #cbd5e1; /* Gris claro (Perfecto para fondo oscuro) */
    margin-bottom: 50px;
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* 2. OVERRIDE: Si el subtítulo está dentro de secciones BLANCAS */
.store-section .section-subtitle, 
.interviews-section .section-subtitle,
.osint-table-section .section-subtitle {
    color: #475569 !important; /* Gris Azulado Oscuro (Se lee perfecto en blanco) */
    font-weight: 500;
}


/* --- TARJETA DE PRODUCTO (VERSIÓN BLANCA CON EFECTO SCROLL) --- */
.tech-product-card {
    background: #ffffff;
    border: 1px solid #00d26a !important; /* Borde verde fino */
    box-shadow: 0 0 10px rgba(0, 210, 106, 0.1); /* Brillo suave */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    /* Sombra suave para separar del fondo */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); 

    /* --- NUEVO: ESTADO INICIAL (INVISIBLE Y ABAJO) --- */
    opacity: 0; 
    transform: translateY(50px); 
    
    /* Transición suave para la aparición (0.6s) y para el hover (0.3s) */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* --- NUEVO: ESTADO VISIBLE (Se activa con tu JS) --- */
.tech-product-card.visible {
    opacity: 1;
    transform: translateY(0); /* Sube a su posición original */
}

/* HOVER (EFECTO AL PASAR EL MOUSE) */
.tech-product-card:hover {
    /* !important asegura que el hover funcione aunque la animación esté activa */
    transform: translateY(-10px) !important; 
    border-color: #00d26a; 
    box-shadow: 0 0 20px rgba(0, 210, 106, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Imagen y Overlay */
.product-img-box {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-bottom: 1px solid #f1f5f9;
}

.product-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tech-product-card:hover .product-img-box img {
    transform: scale(1.1);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.8); /* Oscuro para que resalte el botón */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tech-product-card:hover .product-overlay { opacity: 1; }

.btn-product-view {
    color: #fff;
    border: 2px solid #00d26a;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    background: rgba(0,0,0,0.5);
}

.btn-product-view:hover {
    background: #00d26a;
    color: #0b1120;
}

/* Badges */
.badge-tech {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.badge-free { background: #00d26a; color: #0b1120; }
.badge-premium { background: #FF424D; color: #fff; }
.badge-vip { background: #9d00ff; color: #ffffff; }
.badge-vip_patreon { background: #FFD700; color: #0b1120; }

/* Contenido */
.product-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.product-title {
    color: #0f172a; /* Texto oscuro */
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.4;
    height: 3em; 
    overflow: hidden;
}

.product-desc {
    color: #64748b; /* Gris texto */
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.5;
    height: 4.5em; 
    overflow: hidden;
}

.product-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 600;
}

.product-meta i { color: #00d26a; margin-right: 5px; }

/* Footer de tarjeta */
.product-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f1f5f9;
    padding-top: 15px;
    gap: 16px;
    width: 100%;
    margin-top: auto;
}

.price-tag {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1c3961; /* Precio oscuro */
    font-family: 'Courier New', monospace;
}

.price-tag.free { color: #00d26a; }

.btn-product-action {
    color: #00d26a;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.2s;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-product-action:hover {
    color: #1c3961;
    transform: translateX(5px);
}

.payment-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 10px;
    width: 100%;
}

.payment-actions .payment-direct,
.payment-actions .payment-yape {
    grid-column: 1 / -1;
}

.payment-button,
.payment-actions .btn-product-view {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    min-height: 48px;
}

.payment-button i {
    font-size: 0.95em;
}

.payment-direct {
    background: #00d26a;
    color: #0b1120;
}

.payment-paypal {
    background: #00457c;
    color: #fff;
}

.payment-mercadopago {
    background: #009ee3;
    color: #fff;
}

.payment-yape {
    background: #6f42c1;
    color: #fff;
    border: none;
}

.payment-button:hover,
.payment-actions .btn-product-view:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

.payment-gumroad {
    background: #00d26a;
    color: #081118;
}

.payment-paypal {
    background: #00457c;
    color: #fff;
}

.payment-mercadopago {
    background: #009ee3;
    color: #fff;
}

.payment-yape {
    background: #6f42c1;
    color: #fff;
    border: none;
}

/* --- AJUSTES DE NAVEGACIÓN DEL CARRUSEL (Flechas Oscuras) --- */

.store-carousel .owl-nav { margin-top: 30px; text-align: center; }

.store-carousel .owl-prev, .store-carousel .owl-next {
    background: #e2e8f0 !important; /* Fondo gris claro */
    color: #1c3961 !important; /* Flecha oscura */
    width: 45px;
    height: 45px;
    border-radius: 50% !important;
    font-size: 1.2rem !important;
    line-height: 45px !important;
    margin: 0 10px;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.store-carousel .owl-prev:hover, .store-carousel .owl-next:hover {
    background: #00d26a !important; /* Verde al hover */
    color: #fff !important;
    transform: scale(1.1);
}

/* Puntitos de navegación */
.store-carousel .owl-dots .owl-dot span {
    background: #cbd5e1 !important;
}
.store-carousel .owl-dots .owl-dot.active span {
    background: #00d26a !important;
    width: 20px; /* Alarga el punto activo */
    transition: width 0.3s;
}
/* 4. AJUSTE PARA MÓVILES (Para que ambos bajen de tamaño igual) */
@media (max-width: 768px) {
    .section-title-tech {
        font-size: 1.8rem !important; /* Ambos títulos se achican igual */
    }
}


/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.page-footer {
    background-color: #0f172a;
    color: #94a3b8;
    padding-top: 60px;
    font-size: 1rem;
}

.footer-first-section {
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.box-wrap header h1 {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #009450;
    padding-bottom: 10px;
    display: inline-block;
}

.box-wrap h4 a {
    color: #e2e8f0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.social-container {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icon {
    font-size: 1.8rem;
    color: #94a3b8;
    transition: color 0.3s;
}

.social-icon:hover {
    color: #009450;
    transform: translateY(-3px);
}

.box-wrap ul li { margin-bottom: 10px; }
.box-wrap ul li a:hover { color: #fff; padding-left: 5px; }

.footer-last-section {
    background: #020617;
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #1e293b;
    font-size: 0.9rem;
}


/* ==========================================================================
   9. EXTRAS (Entrevistas, WhatsApp, Changelog)
   ========================================================================== */

/* --- ENTREVISTAS --- */
.learn-courses { padding-bottom: 60px; }

.highlighted-title {
    background: #1e293b;
    color: #fff;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 1.1rem;
    line-height: 1.4;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.highlighted-title:hover {
    background: #009450;
    color: #0b1120;
    transform: translateY(-2px);
}

/* --- CHANGELOG (HISTORIAL DE CAMBIOS) --- */

/* Botón del menú */
.changelog-trigger {
    background: rgba(255,255,255,0.05);
    color: #94a3b8; /* Color texto suave */
    border: 1px solid rgba(255,255,255,0.1);
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.changelog-trigger:hover { 
    background: #00d26a; 
    border-color: #00d26a;
    color: #0b1120; /* Texto oscuro al pasar mouse */
}

/* El Modal Flotante */
.changelog-modal {
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 90%; 
    max-width: 550px; 
    max-height: 80vh; 
    background: #fff; /* Fondo blanco interno */
    border-radius: 12px; 
    box-shadow: 0 25px 80px rgba(0,0,0,0.7); /* Sombra profunda */
    z-index: 3000; 
    display: none; 
    flex-direction: column;
    overflow: hidden;
}

.changelog-modal.active { 
    display: flex; 
    animation: fadeInModal 0.3s ease;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Cabecera del Modal */
.changelog-header { 
    background: #0b1120; 
    color: #fff; 
    padding: 15px 20px; 
    border-bottom: 3px solid #00d26a; /* Línea verde decorativa */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.changelog-header h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-modal { 
    background: none; 
    border: none; 
    color: #94a3b8; 
    font-size: 1.8rem; 
    cursor: pointer; 
    line-height: 1; 
    transition: color 0.2s;
}

.close-modal:hover { color: #fff; }

/* Contenido del Modal */
.changelog-content { 
    padding: 20px; 
    overflow-y: auto; 
}

.change-item { 
    background: #f8fafc; 
    padding: 15px; 
    margin-bottom: 15px; 
    border: 1px solid #e2e8f0;
    border-left: 4px solid #00d26a; 
    border-radius: 4px; 
}

.change-date {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 5px;
    display: block;
}

.change-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.change-title {
    font-size: 0.95rem;
    color: #334155;
    font-weight: 500;
    line-height: 1.4;
}

/* Badges (Etiquetas de Colores) */
.change-category {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Colores de Categorías */
.badge-osint { color: #00d26a; background: rgba(0, 210, 106, 0.1); }
.badge-socmint { color: #2563eb; background: rgba(37, 99, 235, 0.1); }
.badge-geoint { color: #d97706; background: rgba(217, 119, 6, 0.1); }
.badge-techint { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
.badge-ecoint { color: #7c3aed; background: rgba(124, 58, 237, 0.1); }


/* Móvil (768px) */
@media (max-width: 768px) {
    .titulo-principal { font-size: 2.5rem; }
    .numero-contador { font-size: 2.2rem; }
    
    .main-header .container { padding: 10px 15px; }
    .logo-wrap img { max-width: 200px; }
    
    .tabla-columna { max-width: 100%; }
    .footer-first-section { grid-template-columns: 1fr; gap: 30px; }
    
    .highlighted-title { font-size: 1rem; width: 100%; text-align: center; }
}

/* Móviles Pequeños (Menos de 480px) */
@media screen and (max-width: 480px) {
    .language-picker { width: 160px; }
    .selected-language span, .language-option span { font-size: 13px; }
    
    .numero-contador { font-size: 2rem; }
    .contadores { gap: 15px; }
}

/* Animación del cursor de terminal */
@keyframes blinkCursor {
    0%, 90% { border-left-color: #00d26a; }
    95%, 100% { border-left-color: transparent; }
}

/* --- Ajuste para móviles muy pequeños (Ej. iPhone SE) --- */
@media (max-width: 480px) {
    .image-wrapper {
        width: 280px; /* Círculo más pequeño */
        height: 280px;
    }
    
    .titulo-principal {
        font-size: 2.2rem;
    }
}


/* ==========================================================================
   12. MEJORAS TECH: STICKY MENU, MEGA MENU & PATREON
   ========================================================================== */

/* 1. STICKY HEADER (Efecto de reducción al bajar) */
.main-header {
    width: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible !important; 
    /* CAPA ALTA: Pero menor que el mobile-menu */
    z-index: 9999; 
}

.main-header.sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    box-shadow: 0 5px 20px rgba(0, 210, 106, 0.2);
    z-index: 10005;
}

/* Reducción de altura interna del contenedor al hacer scroll */
.main-header.sticky .container {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Reducción táctica del Logo */
.main-header.sticky .logo-wrap img {
    max-width: 200px; /* Logo más compacto */
    transition: max-width 0.4s ease;
}

/* Ajuste de los enlaces del menú en estado sticky */
.main-header.sticky .main-menu > li > a {
    font-size: 1rem; /* Ligeramente más pequeño para ahorrar espacio */
    color: #ffffff !important;
}

.main-header.sticky .main-menu > li > a:hover {
    color: #00d26a !important; /* Mantiene el verde ciber en el hover */
}

/* 2. SOLUCIÓN AL ERROR DEL MENÚ QUE DESAPARECE */
.has-submenu {
    padding-bottom: 20px; /* Puente invisible para que el mouse no pierda el foco */
    margin-bottom: -20px; 
}

.has-submenu .submenu {
    margin-top: 15px; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    display: block !important; 
}

.has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 3. ESTILOS MEGA MENÚ TECH */
.submenu.mega-menu {
    width: 500px; 
    display: flex !important;
    padding: 0;
    background: #0f172a;
    border: 1px solid rgba(0, 210, 106, 0.3);
    overflow: hidden;
}

.mega-column {
    padding: 20px;
    flex: 1;
    border-right: 1px solid rgba(255,255,255,0.05);
}

.mega-column:last-child { border-right: none; }

.mega-title {
    color: #00d26a;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-family: 'Courier New', monospace;
}

.mega-menu ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 6px;
    border-bottom: none;
    transition: background 0.3s;
}

.mega-menu ul li a:hover {
    background: rgba(0, 210, 106, 0.1);
}

.mega-menu i {
    font-size: 1.2rem;
    color: #94a3b8;
}

.mega-menu a:hover i { color: #00d26a; }

.link-title {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
}

.link-desc {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
}

.highlight-col {
    background: rgba(0, 210, 106, 0.03);
    text-align: center;
    padding: 20px;
}

.featured-card i {
    font-size: 2.5rem;
    color: #00d26a;
    margin-bottom: 10px;
    display: block;
}

.featured-card span {
    display: block;
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
}

.btn-tiny {
    background: #00d26a;
    color: #0b1120;
    padding: 5px 15px;
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 4px;
    text-transform: uppercase;
}

/* 4. BOTÓN PATREON TECH */
.btn-patreon-tech {
    background: transparent;
    border: 1px solid #FF424D;
    color: #FF424D;
    padding: 6px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    font-family: 'Courier New', monospace;
    letter-spacing: -0.5px;
}

.btn-patreon-tech:hover {
    background: #FF424D;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 66, 77, 0.4);
}


/* ==========================================================================
   15. SUBMENÚ OSINT CON IMAGEN ---
   ========================================================================== */

/* --- SUBMENÚ OSINT CON IMAGEN (ESTILO MATE - SIN NEÓN) --- */
.osint-mega-menu {
    width: 320px !important;
    padding: 10px !important;
    background: #0f172a !important; /* Azul Tech sólido */
    border: 1px solid #00d26a !important;
    border-radius: 8px;
    overflow: hidden;
    /* Sombra de profundidad normal, no brillante */
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
}

/* Evita fondos blancos heredados */
.osint-card-link, 
.osint-card-link:hover, 
.osint-card-link:focus {
    display: block !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.osint-img-container {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
}

.osint-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    opacity: 0.7; /* Ligeramente más oscuro de base */
}

/* Capa informativa sobre la imagen */
.osint-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6); /* Tintado azul oscuro en lugar de verde */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.osint-overlay i {
    font-size: 1.8rem;
    color: #00d26a;
    margin-bottom: 5px;
}

.osint-overlay span {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.osint-card-text {
    padding: 12px 5px 5px 5px;
    background: #0f172a !important;
}

.osint-card-title {
    display: block;
    color: #00d26a;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.osint-card-desc {
    display: block;
    color: #94a3b8;
    font-size: 0.8rem;
    line-height: 1.3;
}

/* --- HOVER EFFECTS (SIN BRILLOS) --- */
.osint-card-link:hover .osint-img-container img {
    transform: scale(1.05); /* Zoom más sutil */
    opacity: 0.9;
}

.osint-card-link:hover .osint-overlay {
    opacity: 1;
}

/* El título cambia a blanco sólido, sin sombras de luz */
.osint-card-link:hover .osint-card-title {
    color: #ffffff !important;
    text-shadow: none !important; /* Eliminamos el neón */
}

.osint-card-link:hover .osint-card-desc {
    color: #cbd5e1 !important;
}


/* --- ESTILOS PARA SUBMENÚS MÓVILES (ACORDEÓN) --- */

/* Ocultar submenús por defecto */
.mobile-submenu {
    display: none;
    background: rgba(15, 23, 42, 0.5);
    padding-left: 15px;
    list-style: none;
    border-left: 2px solid #00d26a;
    margin: 5px 20px;
    border-radius: 0 0 0 8px;
}

/* Estilo de los disparadores (flechas) */
.mobile-submenu-trigger {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
/* CAMBIA EL TAMAÑO AQUÍ: */
    font-size: 1.1rem !important; /* Más grande */
    
    font-weight: 700; /* Grosor (700 = Negrita) */
    letter-spacing: 1px; /* Espacio entre letras */
    color: #e2e8f0; /* Color del texto normal */
}

.mobile-submenu-trigger i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

/* Rotación de flecha cuando está activo */
.has-mobile-submenu.active .mobile-submenu-trigger i {
    transform: rotate(180deg);
    color: #00d26a;
}

/* Estilo de textos internos (Cursos) */
.mobile-submenu .m-title {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}

.mobile-submenu .m-desc {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
}

/* Tarjeta OSINT en Móvil */
.mobile-osint-card {
    padding: 10px !important;
    margin-right: 20px;
}

.mobile-osint-card .osint-card-title {
    color: #00d26a;
    font-size: 0.9rem;
    font-weight: 700;
}

/* ==========================================================================
   16. SECCIÓN ACCESO EXCLUSIVO (ESTILO TECH 3 COLUMNAS)
   ========================================================================== */
.patreon-section {
    padding: 80px 0;
    background-color: #0b1120;
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    position: relative;
    border-top: 1px solid rgba(0, 210, 106, 0.2);
}

.patreon-header {
    text-align: center;
    margin-bottom: 50px;
}

/* --- GRID DE TRES COLUMNAS --- */
.patreon-tech-grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
    gap: 30px;
    align-items: center;
}

/* --- ESTILO BASE PARA TARJETAS (PATREON & WA) --- */
.patreon-card-tech {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform 0.3s ease;
    text-align: center;
}

.patreon-card-tech:hover {
    transform: translateY(-5px);
}

/* Borde superior decorativo */
.patreon-card-tech::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: #FF424D; /* Color Patreon por defecto */
}

/* Identidad específica para WhatsApp */
.patreon-card-tech.wa-card::before {
    background: #25D366; /* Color Verde WhatsApp */
}

.card-header-p { margin-bottom: 20px; }
.patreon-logo-icon { font-size: 3rem; color: #fff; }
.wa-logo-icon { font-size: 3rem; color: #25D366; }

.p-card-title {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.p-card-desc {
    color: #94a3b8;
    margin-bottom: 25px;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Listas internas de las tarjetas */
.tech-list-small {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
    text-align: left;
}

.tech-list-small li {
    color: #cbd5e1;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.tech-list-small li i {
    color: #00d26a;
    width: 15px;
    font-size: 0.8rem;
}

/* --- BOTONES --- */
.btn-patreon-full, .btn-wa-full {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 50px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
}

.btn-patreon-full { background: #fff; color: #0b1120; }
.btn-patreon-full:hover { background: #FF424D; color: #fff; }

.btn-wa-full { background: #25D366; color: #fff; }
.btn-wa-full:hover { background: #1eb956; box-shadow: 0 0 15px rgba(37, 211, 102, 0.4); }

/* --- COLUMNA CENTRAL (BENEFICIOS) --- */
.patreon-info-center {
    text-align: center;
    padding: 0 10px;
}

.premium-badge {
    display: inline-block;
    color: #00d26a;
    border: 1px solid #00d26a;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: rgba(0, 210, 106, 0.1);
}

.premium-title-small {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.premium-list-v2 {
    list-style: none;
    padding: 0;
}

.premium-list-v2 li {
    color: #e2e8f0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1rem;
}

.premium-list-v2 li i {
    color: #00d26a;
    font-size: 1.1rem;
    filter: drop-shadow(0 0 5px rgba(0, 210, 106, 0.5));
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
    .patreon-tech-grid-3col {
        grid-template-columns: 1fr; /* Se apilan en tablet/móvil */
        gap: 40px;
    }
    .patreon-info-center { order: -1; } /* Los beneficios suben al principio en móvil */
}

/* ==========================================================================
   17. SECCIÓN ENTREVISTAS (ESTILO PÓSTER TECH + BORDE NEÓN)
   ========================================================================== */

.interviews-section {
    padding: 80px 0;
    background-color: #ffffff;
    
    /* Malla Táctica (Consistencia visual) */
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    border-top: 1px solid #e2e8f0;
}

/* --- TARJETA PRINCIPAL (ESTILO PÓSTER) --- */
.poster-card {
    background: #ffffff;
    
    /* BORDE VERDE FINO + BRILLO SUAVE (Igual que la tienda) */
    border: 1px solid #00d26a; 
    box-shadow: 0 0 10px rgba(0, 210, 106, 0.15); 
    
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.poster-card:hover {
    transform: translateY(-8px);
    /* Brillo más intenso al pasar el mouse */
    box-shadow: 0 0 25px rgba(0, 210, 106, 0.3);
    z-index: 2;
}

/* --- IMAGEN (Formato Horizontal / Paisaje) --- */
.poster-img-wrap {
    width: 100%;
    /* CAMBIO CLAVE: Eliminamos aspect-ratio y altura fija.
       Dejamos que el contenedor se adapte a la imagen. */
    height: auto; 
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #00d26a; /* Línea separadora verde fina */
}

/* --- LA IMAGEN --- */
.poster-img-wrap img {
    width: 100%;
    /* CAMBIO CLAVE: 'height: auto' hace que la imagen mantenga su 
       proporción original y se muestre COMPLETA sin recortes. */
    height: auto; 
    display: block; /* Elimina espacios en blanco debajo de la imagen */
    transition: transform 0.5s ease;
}

/* Efecto zoom al pasar el mouse */
.poster-card:hover .poster-img-wrap img {
    transform: scale(1.05);
}

/* --- CUERPO DE LA TARJETA --- */
.poster-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* --- AJUSTE DEL TÍTULO --- */
/* Como la altura de la imagen ahora varía, ajustamos el margen del título 
   para que siempre quede bien ubicado debajo de la foto. */
.poster-title-box {
    margin-top: -15px; /* Sube un poquito sobre el borde de la foto */
    margin-bottom: 15px;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

.poster-title-box a {
    display: block;
    
    /* CAMBIO AQUÍ: Usamos un gradiente en lugar de color plano */
    /* Va del verde neón a un verde más oscuro/institucional para suavizarlo */
    background: linear-gradient(135deg, #00d26a 0%, #009450 100%);
    
    color: #fff;
    padding: 12px 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 210, 106, 0.3); /* Sombra verde difusa */
    transition: all 0.3s ease;
}

.poster-title-box a:hover {
    /* Al pasar el mouse, invertimos o oscurecemos un poco */
    background: linear-gradient(135deg, #009450 0%, #006e3b 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 210, 106, 0.4);
}

/* --- DESCRIPCIÓN --- */
.poster-desc {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* --- META DATA (FECHA/LUGAR) - ESTILO SUBTÍTULO --- */
.poster-meta {
    border-top: 1px dashed #e2e8f0; /* Línea más suave */
    padding-top: 15px;
    
    /* AQUI ESTÁ EL CAMBIO DE FUENTE */
    font-family: inherit; /* Usa la misma fuente del cuerpo (como el subtítulo) */
    font-size: 0.9rem;    /* Un poco más legible */
    font-weight: 500;     /* Peso medio (igual que el subtítulo) */
    color: #475569;       /* El mismo gris azulado del subtítulo */
}

.meta-item {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-item i {
    color: #00d26a; /* Iconos mantienen el verde marca */
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
}

/* --- FECHA FLOTANTE (ESTILO ORIGINAL) --- */
.event-date {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(11, 17, 32, 0.9); /* Fondo oscuro semitransparente */
    color: #00d26a; /* Texto verde neon */
    border: 1px solid #00d26a;
    padding: 5px 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    min-width: 60px;
    backdrop-filter: blur(4px);
}

.event-date .day { display: block; font-size: 1.2rem; line-height: 1; }
.event-date .month { display: block; font-size: 0.7rem; text-transform: uppercase; }

/* ============== ÍCONO DE VERIFICADO (BADGE) ======*/

.verified-icon {
    /* CAMBIO CLAVE: Usamos el Verde Neón principal */
    color: #00d26a; 
    font-size: 0.95rem; /* Un pelín más grande para que se note bien */
    margin-left: -3px; /* Separación del número */
    
    /* CAMBIO CLAVE: El brillo (glow) ahora es verde 
    filter: drop-shadow(0 0 3px rgba(0, 210, 106, 0.7));*/
    
    vertical-align: middle;
    transition: all 0.3s ease;
}

/* Pequeña animación al pasar el mouse sobre el enlace completo */
.contact-list a:hover .verified-icon {
    transform: scale(1.2) rotate(3deg); /* Crece y gira un poquito */
    /* Intensificamos el brillo verde al hover */
    filter: drop-shadow(0 0 10px rgba(0, 210, 106, 0.9));
}

/* ==========================================================================
   18. TECH FOOTER (PIE DE PÁGINA)
   ========================================================================== */

.tech-footer {
    background-color: #0b1120; /* Mismo azul oscuro del menú */
    color: #cbd5e1;
    position: relative;
    border-top: 3px solid #00d26a; /* Línea neón superior */
    margin-top: 0;
    border-top: 4px solid #00d26a; /* Línea de separación clara */

    /* Malla Táctica de Fondo */
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.footer-main {
    padding: 70px 0 50px 0;
}

/* Grid de 3 Columnas */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Títulos */
.footer-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dot-green { color: #00d26a; }

/* --- COLUMNA 1: CONTACTO --- */
.contact-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.contact-list li {
    margin-bottom: 15px;
}

.contact-list a, .contact-list span {
    color: #94a3b8;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.contact-list a:hover { color: #fff; }

.icon-neon {
    color: #00d26a;
    width: 20px;
    text-align: center;
}

/* Redes Sociales (Botones Circulares) */
.footer-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.social-btn:hover {
    background: #00d26a;
    color: #0b1120;
    box-shadow: 0 0 15px rgba(0, 210, 106, 0.6); /* Brillo Neón */
    transform: translateY(-3px);
    border-color: #00d26a;
}

/* --- COLUMNA 2: ENLACES --- */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
}

.footer-links a i {
    font-size: 0.7rem;
    margin-right: 10px;
    color: #00d26a;
    opacity: 0; /* Oculto por defecto */
    transform: translateX(-5px);
    transition: all 0.3s;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 5px;
}

.footer-links a:hover i {
    opacity: 1; /* Aparece la flecha al hover */
    transform: translateX(0);
}

/* --- COLUMNA 3: CURSOS --- */
.footer-course-item {
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden;
    transition: background 0.3s;
}

.footer-course-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.course-link-wrapper {
    display: flex;
    text-decoration: none;
    padding: 10px;
    gap: 15px;
    align-items: center; /* Centra verticalmente texto e imagen */
}

/* --- AQUÍ CONTROLAS EL TAMAÑO DE LA IMAGEN --- */
.f-course-img {
    /* Cambia estos valores para ajustar el tamaño manualmente: */
    width: 100px;  /* Aumenta este número si quieres más grande */
    height: 65px;  /* Mantén una proporción rectangular */

    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0; /* Evita que la imagen se aplaste */
}

.f-course-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.f-course-info h4 {
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 5px;
    line-height: 1.3;
    font-weight: 600;
}

/* --- ESTILO DE PRECIO (FUENTE CORREGIDA) --- */
.f-price {
    font-size: 0.85rem;
    font-weight: 700;
    /* Eliminamos 'Courier New' para que use la misma fuente de la web */
    font-family: inherit; 
    letter-spacing: 0.5px;
}

/* 1. GRATIS (Verde Neón Marca) */
.f-price.free {
    color: #00d26a !important; 
    font-weight: 800;
    letter-spacing: 0.5px;
    /* Efecto de luz de neón verde */
    text-shadow: 0 0 8px rgba(0, 210, 106, 0.4); 
}

/* 2. DE PAGO (Azul Tech / Cyan) */
.f-price.paid {
    /* Usamos un Cyan brillante (#00c3ea) que contrasta genial con el fondo oscuro 
       y hace juego con tus hovers del menú */
    color: #00c3ea !important; 
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* 3. PRECIO TACHADO (Gris apagado) */
.f-price del {
    color: #64748b; /* Gris discreto para que no distraiga */
    font-size: 0.75rem;
    font-weight: normal;
    text-decoration: line-through;
    margin-left: 6px;
    opacity: 0.7;
}

/* --- BARRA INFERIOR --- */
.footer-bottom {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

/* ==========================================================================
   19. WHATSAPP FLOTANTE (ESTILO RADAR MINIMALISTA)
   ========================================================================== */
#float-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px; /* Anclado a la derecha, su lugar natural */
    z-index: 9999;
}

/* Ocultamos la burbuja negra de texto por completo */
.whatsapp-bubble { 
    display: none !important; 
}

.whatsapp-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.icon-container {
    position: relative;
    width: 70px; 
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whatsapp-icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 4px 10px rgba(0, 210, 106, 0.4));
}

.whatsapp-link:hover .whatsapp-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 210, 106, 0.8));
}

.pulse-ring {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid #00d26a;
    z-index: 1;
    animation: pulse-green 2s infinite;
}

@media (max-width: 768px) {
    #float-whatsapp { bottom: 20px; right: 20px; }
	.whatsapp-bubble { display: none; }
    .icon-container { width: 55px; height: 55px; }
}

@keyframes pulse-green {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes fadeInBubble {
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr; /* 1 Columna en móvil */
        gap: 40px;
    }
    
    .tech-footer {
        text-align: center; /* Centrado en móvil */
    }

    .contact-list a, .footer-links a {
        justify-content: center; /* Centrar enlaces */
    }

    .footer-socials {
        justify-content: center;
    }
    
    .course-link-wrapper {
        text-align: left; /* Cursos se mantienen a la izquierda */
    }
}


/* --- ANIMACIONES --- */
@keyframes pulse-green {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0; /* Desaparece al crecer */
    }
}

@keyframes fadeInBubble {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   MAPA DE IMPACTO & ESTADÍSTICAS (SISTEMA VECTORIAL - UDEMY DATA)
   ========================================================================== */

.global-impact-section {
    padding: 80px 0;
    background-color: #0b1120;
    position: relative;
    background-image: linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.impact-header {
    text-align: center;
    margin-bottom: 50px;
}

/* --- CONTENEDOR DEL MAPA (MÁSCARA SVG) --- */
.map-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto 60px auto;
    height: 450px;
    background: radial-gradient(circle at center, #162033 0%, #0b1120 80%);
    border-radius: 20px;
    border: 1px solid rgba(0, 210, 106, 0.15);
    overflow: hidden;
}

/* El mapa inyectado como máscara (Sustituye a la imagen PNG) */
.world-map-mask-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00d26a;
    -webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/World_map_blank_without_borders.svg');
    mask-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/World_map_blank_without_borders.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0.25;
    z-index: 1;
}
/* --- BALIZAS (CÍRCULOS DE DATOS) --- */
.beacon {
    position: absolute;
    background-color: rgba(0, 210, 106, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 210, 106, 0.4);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
}

.beacon:hover {
    background-color: #00d26a;
    z-index: 10;
    transform: translate(-50%, -50%) scale(1.2);
    filter: drop-shadow(0 0 10px #00d26a);
}

/* TAMAÑOS SEGÚN DATOS DE UDEMY */
.beacon-xl { width: 35px; height: 35px; } /* México */
.beacon-lg { width: 25px; height: 25px; } /* España */
.beacon-md { width: 18px; height: 18px; } /* Colombia, Perú, Arg */
.beacon-sm { width: 8px; height: 8px; }   /* EE.UU y destacados */

/* Onda expansiva animada */
.beacon .pulse {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid #00d26a; /* Pulso más visible */
    animation: radar-wave 2s infinite ease-out;
}

@keyframes radar-wave {
    0% { width: 100%; height: 100%; opacity: 1; }
    100% { width: 250%; height: 250%; opacity: 0; }
}

/* --- PANELES DE ESTADÍSTICAS --- */
.udemy-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.tech-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    position: relative;
    overflow: hidden;
}

.tech-stat-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #00d26a, transparent);
}

.card-header-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.card-header-stat h3 {
    color: #fff; margin: 0; font-size: 1.2rem; font-weight: 700;
}

.stat-list { list-style: none; padding: 0; margin: 0; }

.stat-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #cbd5e1;
}

.country-name { width: 30%; font-weight: 500; }

.stat-bar {
    flex-grow: 1; height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px; margin: 0 15px;
    position: relative; overflow: hidden;
}

.stat-bar span {
    display: block; height: 100%;
    background: #00d26a;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 210, 106, 0.5);
}

.stat-number {
    width: 15%; text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: bold; color: #fff;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .map-container { height: 300px; }
    .udemy-stats-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ==========================================================================
  PARA LA FUENTE DEL MAPA PRINCIPAL
   ========================================================================== */
.impact-source-metadata {
    margin-top: 40px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    color: #64748b; /* Gris tenue para que no distraiga pero esté ahí */
    letter-spacing: 1px;
    padding: 10px;
    border-top: 1px dashed rgba(0, 210, 106, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.impact-source-metadata .source-highlight {
    color: #00d26a; /* El verde neón para resaltar la credibilidad */
    font-weight: bold;
}

.impact-source-metadata i {
    font-size: 0.9rem;
    color: #00d26a;
}


/* ==========================================================================
  21. BOTÓN VOLVER ARRIBA (LADO OPUESTO AL WHATSAPP)
   ========================================================================== */

.back-to-top {
    position: fixed;
    bottom: 40px;
    left: 40px;         /* CAMBIO: Ahora se ancla a la IZQUIERDA */
    right: auto;        /* Reseteamos la posición derecha */
    width: 50px;
    height: 50px;
    background-color: #0b1120;
    color: #00d26a;
    border: 1px solid #00d26a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 210, 106, 0.2);
    z-index: 9990;
    
    /* Estado inicial */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: #00d26a;
    color: #0b1120;
    box-shadow: 0 0 20px rgba(0, 210, 106, 0.6);
    transform: translateY(-5px);
}

/* --- AJUSTE MÓVIL --- */
@media (max-width: 768px) {
    .back-to-top {
        left: 20px;     /* Margen más pequeño en móviles */
        bottom: 20px;   /* En móvil pueden coexistir en los extremos opuestos abajo */
        width: 45px;
        height: 45px;
    }
}


/* ==========================================================================
   22. ESTILOS ESPECÍFICOS PARA PÁGINA DE CURSOS (FORMACION.HTML)
   ========================================================================== */

/* --- Page Header (Hero pequeño interno) --- */
.page-header-tech {
    background-color: #0b1120;
    padding: 120px 0 60px 0; /* Espacio para el navbar fijo */
    text-align: center;
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    border-bottom: 1px solid rgba(0, 210, 106, 0.1);
}

.page-title {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 800;
}

.page-subtitle {
    color: #94a3b8;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* --- Grid de Cursos (Estilo "Clean Lab" - Blanco) --- */
.courses-grid-section {
    padding: 80px 0;
    background-color: #ffffff; /* Fondo Blanco */
    
    /* Malla Táctica (Igual que en la Tienda) */
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
    background-size: 40px 40px; 
    
    position: relative;
    border-top: 1px solid #e2e8f0;
    min-height: 100vh;
}

/* Ajuste de colores para los títulos en fondo blanco */
.courses-grid-section .section-title-tech {
    color: #1c3961 !important; /* Azul Oscuro */
}

.courses-grid-section .section-subtitle {
    color: #475569 !important; /* Gris Oscuro */
}

.section-left { 
    text-align: left; 
    border-left: 5px solid #0044cc; 
    padding-left: 15px; 
}

.tech-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive automático */
    gap: 30px;
    margin-bottom: 60px;
}

.separator-tech {
    height: 1px;
    background: #00d26a;
    margin: 40px 0;
    width: 100%;
}

/* --- Ajustes específicos para tarjetas LISA (Certificaciones) --- */
.lisa-card {
    border-color: #0044cc !important; /* Azul para diferenciar */
}
.lisa-card .badge-tech { background: #0044cc; color: #fff; }
.lisa-card:hover { border-color: #0044cc; box-shadow: 0 0 20px rgba(0, 68, 204, 0.2); }

/* ==========================================================================
   SECCIÓN TESTIMONIOS TECH (ESTILO "CLEAN LAB" - FONDO BLANCO)
   ========================================================================== */
.testimonials-section-tech {
    padding: 80px 0;
    background-color: #ffffff !important; /* Fondo Blanco General */
    position: relative;
    border-top: 1px solid #e2e8f0; /* Borde gris suave superior */
    border-bottom: none; /* Asegura una unión limpia con el footer */
    padding-bottom: 100px;
    
    /* Malla Táctica Oscura (Igual que courses-grid-section) */
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Forzar Títulos Generales a Azul Oscuro */
.testimonials-section-tech .section-title-tech,
.testimonials-section-tech .platform-title-block h3 {
    color: #1c3961 !important; 
}

.testimonials-section-tech .platform-title-block p {
    color: #475569 !important; 
}

/* --- REJILLA DE TARJETAS --- */
.testimonials-grid-tech {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* --- TARJETA DE TESTIMONIO (AHORA BLANCA CON BORDE VERDE TECH) --- */
.testimonial-card-tech {
    background: #ffffff !important; /* Fondo blanco */
    border: 1px solid #00d26a !important; /* Borde verde fino */
    padding: 25px;
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Sombra suave para separar del fondo */
}

/* Efecto Hover idéntico a las tarjetas de cursos */
.testimonial-card-tech:hover {
    transform: translateY(-10px);
    border-color: #00d26a !important;
    box-shadow: 0 0 20px rgba(0, 210, 106, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Ajuste visual para Tarjetas LISA Institute (Borde Azul) */
.testimonial-card-tech.lisa-testimonial {
    border-color: #0044cc !important;
}
.testimonial-card-tech.lisa-testimonial:hover {
    border-color: #0044cc !important;
    box-shadow: 0 0 20px rgba(0, 68, 204, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* --- TEXTOS E INFORMACIÓN DEL USUARIO --- */
.user-info-tech {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.user-info-tech img {
    width: 50px; 
    height: 50px;
    border-radius: 50%;
    border: 2px solid #00d26a; 
    object-fit: cover;
}

/* Modificador para que la foto de LISA tenga borde azul */
.lisa-testimonial .user-info-tech img {
    border-color: #0044cc;
}

/* Forzar Nombre a color Oscuro para que resalte sobre blanco */
.user-info-tech h4 {
    color: #0f172a !important; 
    margin: 0; 
    font-size: 1rem; 
    font-weight: 800;
}

.rating-stars { 
    color: #ffc107; /* Estrellas doradas como en los cursos */
    font-size: 0.9rem; 
}

/* Forzar la Reseña a Gris Oscuro Textual */
.testimonial-card-tech p {
    color: #475569 !important; /* Gris azulado oscuro, fácil de leer */
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
}

/* --- ADAPTACIÓN DE LOS PANELES DE CONFIANZA (TRUST BADGES) AL FONDO BLANCO --- */
.trust-badge {
    background: #ffffff !important;
    border: 1px solid #00d26a !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.trust-badge span:first-of-type {
    color: #1c3961 !important; /* Números en azul oscuro */
}

.trust-badge span:last-of-type {
    color: #64748b !important; /* Letras pequeñas en gris oscuro */
}


/* ==========================================================================
   23. EXTRAS PARA TARJETAS DE CURSOS (IDIOMA Y ESTRELLAS)
   ========================================================================== */

/* Etiqueta de Idioma (Estilo Botón Pequeño) */
.lang-badge {
    background-color: rgba(0, 68, 204, 0.1); /* Fondo azul muy suave */
    color: #0044cc; /* Texto Azul Institucional */
    border: 1px solid #0044cc;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 5px;
}

/* Estrellas a la derecha */
.stars-right {
    color: #ffc107; /* Color Dorado/Amarillo para resaltar */
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Contenedor Izquierdo del Footer (Precio + Botón) */
.footer-left-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ajuste para que entren los 3 elementos en el footer */
.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

/* Diferenciador sutil para las tarjetas de LISA Institute */
.lisa-testimonial {
    border-top: 2px solid #0044cc !important; 
}
.lisa-testimonial:hover {
    border-color: #00c3ea !important;
    box-shadow: 0 10px 30px rgba(0, 195, 234, 0.1);
}

/* ==========================================================================
   24. SCROLL INTERNO Y ESTILOS PARA TESTIMONIOS MASIVOS
   ========================================================================== */

/* Contenedor del Scroll */
.testimonials-scroll-wrapper {
    max-height: 700px; /* Limita la altura para no hacer la web infinita */
    overflow-y: auto;
    padding-right: 15px;
    margin-top: 30px;
    margin-bottom: 60px;
    
    /* Degradado interno superior e inferior para disimular el corte */
    mask-image: linear-gradient(to bottom, transparent, black 2%, black 98%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 2%, black 98%, transparent);
}

/* Diseño de la barra de Scroll (Scrollbar) Tech General (Verde - Udemy) */
.testimonials-scroll-wrapper::-webkit-scrollbar {
    width: 8px; /* Un pelín más ancha para que sea más cómoda */
}
.testimonials-scroll-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); /* Fondo sutil para el riel */
    border-radius: 10px;
}
.testimonials-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #00d26a; /* Tu verde Neón */
    border-radius: 10px;
}
.testimonials-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #009450;
}

/* Barra de Scroll específica para bloque LISA (Azul Institucional) */
.testimonials-scroll-wrapper.scroll-lisa::-webkit-scrollbar-thumb {
    background-color: #0044cc !important; 
}
.testimonials-scroll-wrapper.scroll-lisa::-webkit-scrollbar-thumb:hover {
    background-color: #003399 !important; 
}

/* Diferenciador visual de Tarjetas LISA Institute */
.lisa-testimonial {
    border-top: 2px solid #0044cc !important; 
}
.lisa-testimonial:hover {
    border-color: #00c3ea !important;
    box-shadow: 0 10px 30px rgba(0, 195, 234, 0.1);
}

/* Titulos de sección dentro de Testimonios */
.platform-title-block {
    margin-bottom: 20px; 
    border-left: 4px solid #00d26a; 
    padding-left: 15px;
}
.platform-title-block.lisa-block {
    border-left-color: #0044cc;
}


/* ==========================================================================
   25. SECCIONES DE AUTORIDAD Y METODOLOGÍA (FORMACION.HTML)
   ========================================================================== */

/* --- 1. Franja de Autoridad (Trust Strip) --- */
.trust-strip-section {
    background: #020617;
    border-bottom: 1px solid rgba(0, 210, 106, 0.2);
    padding: 30px 0;
    text-align: center;
}
.trust-strip-title {
    color: #64748b;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-weight: 700;
}
.trust-logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
    font-size: 1.1rem;
    font-weight: 800;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.trust-item:hover { opacity: 1; color: #fff; }
.trust-item i { color: #00d26a; font-size: 1.5rem; }

/* --- 2. Metodología y Laboratorio Táctico --- */
.methodology-section {
    background-color: #0b1120;
    padding: 80px 0;
    border-top: 1px solid rgba(0, 210, 106, 0.2);
    position: relative;
    /* Malla sutil */
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}
.methodology-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.method-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 210, 106, 0.1);
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}
.method-card:hover {
    background: rgba(0, 210, 106, 0.05);
    border-color: #00d26a;
    transform: translateY(-5px);
}
.method-icon-wrap {
    width: 80px;
    height: 80px;
    background: #020617;
    border: 2px solid #00d26a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px auto;
    box-shadow: 0 0 15px rgba(0, 210, 106, 0.3);
}
.method-icon-wrap i {
    font-size: 2rem;
    color: #00d26a;
}
.method-card h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 800;
}
.method-card p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==========================================================================
   FRANJA DE AUTORIDAD Y MAPA DE CALOR TECH
   ========================================================================== */
.trust-strip-section {
    position: relative;
    background: #020617; /* Fondo oscuro base */
    padding: 70px 0; /* Más espacio para lucir el mapa */
    border-bottom: 1px solid rgba(0, 210, 106, 0.3);
    overflow: hidden;
}

/* Contenedor del Mapa (Tamaño fijo para que los nodos no se desalineen al achicar la pantalla) */
.map-bg-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px; 
    height: 500px;
    opacity: 0.6; /* Intensidad general del fondo */
    pointer-events: none;
    z-index: 1;
}

/* El mapa real inyectado como máscara CSS */
.world-map-mask {
    width: 100%;
    height: 100%;
    background-color: #00d26a; /* Tu Verde Neón */
    -webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/World_map_blank_without_borders.svg');
    mask-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ec/World_map_blank_without_borders.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0.15; /* Sutil para no estorbar la lectura */
}

/* --- Nodos Operativos (Puntos Parpadeantes) --- */
.ping-node {
    position: absolute;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}

.ping-point {
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    background: #00d26a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #00d26a, 0 0 20px #00d26a;
}

.ping-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border: 2px solid #00d26a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* Animación fluida de radar expansivo */
    animation: pulse-radar 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-radar {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    70% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* Asegurar que el texto esté por encima de todo */
.trust-strip-title {
    color: #00d26a; /* Resaltado para temática radar */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    font-weight: 800;
}

/* ==========================================================================
   26. SECCIÓN FAQ (ESTILO CLEAN LAB MEJORADO)
   ========================================================================== */

/* Hero Pequeño (Se re-usa .page-header-tech de formacion) */
.page-header-tech {
    background-color: #0b1120;
    padding: 120px 0 60px 0;
    text-align: center;
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    border-bottom: 1px solid rgba(0, 210, 106, 0.1);
}

.faq-section-tech {
    padding: 80px 0;
    background-color: #ffffff; /* Fondo Blanco */
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    position: relative;
    border-top: 1px solid #e2e8f0;
}

.faq-grid-container {
    display: grid;
    grid-template-columns: 3.5fr 6.5fr; /* 35% Izquierda - 65% Derecha */
    gap: 50px;
    align-items: flex-start;
}

/* --- PANEL TÁCTICO IZQUIERDO (NUEVO DISEÑO SIN MARCOS ROTOS) --- */
.faq-image-col {
    position: sticky; 
    top: 100px; /* Se queda pegado al hacer scroll */
}

.faq-tactical-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(28, 57, 97, 0.08); /* Sombra elegante */
    border-top: 4px solid #00d26a; /* Línea de acento neón arriba */
}

.faq-img-wrapper {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #e2e8f0;
}

.faq-main-img {
    width: 100%;
    height: 220px; /* Altura controlada para no ocupar toda la pantalla */
    object-fit: cover;
    display: block;
}

.faq-badge-flotante {
    position: absolute;
    bottom: 15px; right: 15px;
    background: #020617;
    color: #00d26a;
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    font-family: 'Courier New', monospace;
    border: 1px solid rgba(0, 210, 106, 0.3);
}

/* Caja de datos inferior para rellenar el hueco */
.faq-panel-data {
    padding: 25px;
    background: #f8fafc; /* Gris ultra claro */
}

.faq-panel-data h3 {
    color: #1c3961;
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.faq-panel-data h3 i { color: #00d26a; }

.faq-panel-data p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.faq-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.faq-features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-weight: 500;
}

.faq-features-list li i {
    color: #00d26a;
}

.faq-author-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px dashed #cbd5e1;
}

.faq-author-box img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #00d26a;
}

.faq-author-name {
    display: block;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.95rem;
}

.faq-author-role {
    display: block;
    color: #94a3b8;
    font-size: 0.8rem;
}


/* --- ACORDEÓN TÁCTICO DERECHO --- */
.tech-accordion { display: flex; flex-direction: column; gap: 15px; }

.tech-acc-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.tech-acc-item.active {
    border-color: #00d26a;
    box-shadow: 0 5px 15px rgba(0, 210, 106, 0.1);
}

.tech-acc-header {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 20px 25px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1c3961;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Raleway', sans-serif;
}

.tech-acc-header span i { color: #00d26a; margin-right: 10px; width: 25px; text-align: center; }

/* Iconos + y - */
.tech-acc-header .icon-plus { display: block; color: #94a3b8; transition: transform 0.3s;}
.tech-acc-header .icon-minus { display: none; color: #00d26a; }

.tech-acc-item.active .icon-plus { display: none; }
.tech-acc-item.active .icon-minus { display: block; }

.tech-acc-body {
    display: none; 
    padding: 0 25px 25px 60px;
    border-top: 1px dashed transparent;
}

.tech-acc-item.active .tech-acc-body { border-top-color: rgba(0, 210, 106, 0.2); padding-top: 20px;}

.tech-acc-body p {
    margin: 0; color: #475569; font-size: 0.95rem; line-height: 1.6;
}

/* ==========================================================================
   SECCIÓN CONTACTO DIRECTO (DISEÑO PROFESIONAL "COMMAND BAR" COMPACTO)
   ========================================================================== */

.contact-support-section.tech-command-bar {
    background-color: #0b1120; /* Fondo base oscuro */
    padding: 60px 0; /* Mucho menos padding vertical */
    position: relative;
    /* Malla Táctica Oscura */
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    border-top: 2px solid #00d26a; /* Línea neón superior */
}

.command-bar-content {
    background: #1e293b; /* Fondo de la barra */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px; /* Bordes más sutiles */
    padding: 30px 40px; /* Padding interno compacto */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Separa texto y botones */
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Efecto de luz lateral (Glow) más sutil */
.command-bar-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 210, 106, 0.08) 0%, transparent 100%);
    pointer-events: none;
}

/* --- LADO IZQUIERDO: TEXTO --- */
.command-text {
    flex: 1; /* Ocupa el espacio disponible */
    padding-right: 40px;
}

.command-text h3 {
    color: #ffffff;
    font-size: 1.5rem; /* Título más pequeño */
    font-weight: 800;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icono de radar integrado al título */
.radar-icon {
    color: #00d26a;
    font-size: 1.6rem;
    filter: drop-shadow(0 0 8px rgba(0, 210, 106, 0.6));
    animation: pulseIcon 2s infinite;
}

@keyframes pulseIcon {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.command-text p {
    color: #94a3b8;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/* --- LADO DERECHO: BOTONES --- */
.command-actions {
    display: flex;
    gap: 15px;
    flex-shrink: 0; /* Evita que los botones se aplasten */
}

/* Botón Principal (Telegram) - Más compacto */
.btn-command-primary {
    background-color: #00d26a;
    color: #0b1120 !important;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 15px -5px rgba(0, 210, 106, 0.5);
    white-space: nowrap; /* Evita que el texto se rompa */
}

.btn-command-primary:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -5px rgba(0, 210, 106, 0.7);
}

/* Botón Secundario (Correo) - Más compacto */
.btn-command-secondary {
    background-color: transparent;
    color: #e2e8f0 !important;
    border: 2px solid #475569;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-command-secondary:hover {
    border-color: #00d26a;
    color: #00d26a !important;
    background: rgba(0, 210, 106, 0.05);
    transform: translateY(-2px);
}


@media (max-width: 480px) {
     .command-actions {
        flex-direction: column; /* Botones uno encima del otro en pantallas muy pequeñas */
        gap: 10px;
    }
     .btn-command-primary, .btn-command-secondary {
        width: 100%;
    }
}

/* ==========================================================================
   27. PÁGINA ABOUT - FORZADO DE ESTILOS Y CARRUSEL
   ========================================================================== */

/* --- SECCIÓN 1: HERO ABOUT (FONDO OSCURO) --- */
.about-hero-tech {
    background-color: #0b1120 !important;
    padding: 100px 0 80px 0 !important;
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    color: #fff;
}

.about-grid-container {
    display: grid !important;
    grid-template-columns: 4fr 6fr !important;
    gap: 60px !important;
    align-items: center !important;
}


/* ==========================================================================
   EFECTO 3D EN RECTÁNGULO TÁCTICO (PÁGINA ABOUT)
   ========================================================================== */

.about-image-col {
    width: 100% !important;
    display: flex;
    justify-content: center;
    /* Espacio superior extra para que la cabeza tenga lugar para salir */
    padding-top: 50px !important; 
}

/* El Contenedor Rectangular */
.about-rect-3d-wrapper {
    position: relative;
    width: 360px; /* Ancho del rectángulo */
    height: 520px; /* Alto del rectángulo (ajustable) */
    margin: 0 auto;
    border-radius: 12px;
    border: 2px solid rgba(0, 210, 106, 0.3);
    background: rgba(11, 17, 32, 0.8); /* Fondo oscuro semitransparente */
    box-shadow: 0 10px 30px rgba(0, 210, 106, 0.1);
}

/* El brillo interno del rectángulo */
.rect-bg-glow {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 10px;
    background: radial-gradient(ellipse at bottom center, rgba(0, 210, 106, 0.2) 0%, transparent 70%);
    z-index: 1;
}

/* Tu Foto (Efecto 3D) */
.perfil-rect-3d {
    position: absolute;
    bottom: 0; /* Anclado al piso del rectángulo */
    left: 50%;
    transform: translateX(-50%);
    width: 130%; /* La foto es más ancha que el rectángulo para sobresalir a los lados */
    height: 120%; /* Es más alta que el rectángulo para que la cabeza salga por arriba */
    z-index: 2;
    object-fit: cover;
    
    /* El truco de la máscara: hace transparente la parte de abajo para que no se vean los pies cortados */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 3%, black 15%);
    mask-image: linear-gradient(to top, transparent 0%, transparent 3%, black 15%);
    
    /* Sombra para separar la imagen del fondo */
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8));
}

/* Esquinas de francotirador/tech */
.tech-corner { 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    border-color: #00d26a; 
    border-style: solid; 
    z-index: 3; /* Por encima de todo */
}
.top-left { 
    top: -10px; left: -10px; 
    border-width: 3px 0 0 3px; 
}
.bottom-right { 
    bottom: -10px; right: -10px; 
    border-width: 0 3px 3px 0; 
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .about-rect-3d-wrapper {
        width: 280px;
        height: 400px;
    }
}



.about-subtitle-tech {
    color: #00d26a !important; 
    font-family: 'Courier New', monospace !important; 
    font-size: 1.1rem !important;
    margin-top: -15px !important; 
    margin-bottom: 30px !important; 
    font-weight: 700 !important;
}

.badges-grid-tech {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    margin: 30px 0 !important;
}

.badge-tech-item {
    background: #1e293b !important;
    padding: 15px !important;
    border-radius: 8px !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    transition: transform 0.3s ease !important;
}

.badge-tech-item i {
    color: #00d26a !important;
    font-size: 1.5rem !important;
}

.badge-tech-item:hover { transform: translateY(-3px) !important; border-color: #00d26a !important; }

.about-description-tech p { 
    color: #94a3b8 !important; 
    font-size: 1.05rem !important; 
    line-height: 1.7 !important; 
    margin-bottom: 15px !important; 
}


/* --- SECCIÓN 2: TRAYECTORIA DOCENTE (FONDO BLANCO) --- */
.teaching-section-tech {
    background-color: #ffffff !important; 
    padding: 80px 0 !important;
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px) !important;
    background-size: 40px 40px !important; 
    border-bottom: 1px solid #e2e8f0 !important;
    color: #0b1120 !important;
}

.teaching-grid-v2 {
    display: grid !important; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; 
    gap: 30px !important; 
    margin-top: 40px !important;
}

.teaching-card-v2 {
    background: #ffffff !important; 
    border: 2px solid #00d26a !important; 
    border-radius: 12px !important; 
    padding: 30px !important;
    text-align: center !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; 
    transition: all 0.3s ease !important;
}

.teaching-card-v2:hover { 
    transform: translateY(-5px) !important; 
    box-shadow: 0 10px 20px rgba(0, 210, 106, 0.15) !important; 
}

.teaching-card-v2 .card-icon { 
    font-size: 2.5rem !important; 
    color: #00d26a !important; 
    margin-bottom: 20px !important; 
}

.teaching-card-v2 h3 { color: #1c3961 !important; font-size: 1.2rem !important; font-weight: 800 !important; margin-bottom: 15px !important; }
.teaching-card-v2 p { color: #475569 !important; font-size: 0.95rem !important; line-height: 1.6 !important; margin: 0 !important; }


/* --- SECCIÓN 3: GALERÍA DE OPERACIONES (CARRUSEL PANORÁMICO - FONDO OSCURO) --- */
.gallery-section-tech { 
    background-color: #0b1120 !important; 
    padding: 100px 0 !important; 
}

.gallery-item-tech {
    position: relative !important; 
    border-radius: 12px !important; 
    overflow: hidden !important; 
    cursor: pointer !important;
    border: 2px solid rgba(0, 210, 106, 0.2) !important; 
    aspect-ratio: 4/3 !important; 
    transition: all 0.3s ease !important;
    margin: 10px !important; /* Margen para que la sombra no se corte */
}

.gallery-item-tech:hover { 
    border-color: #00d26a !important; 
    transform: translateY(-5px) !important; 
    box-shadow: 0 15px 30px rgba(0, 210, 106, 0.2) !important; 
}

.gallery-item-tech img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    transition: transform 0.5s ease !important; 
}

.gallery-item-tech:hover img { 
    transform: scale(1.08) !important; 
}

.gallery-overlay {
    position: absolute !important; 
    bottom: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    padding: 30px 15px 15px 15px !important;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.95) 0%, rgba(2,6,23,0.7) 50%, transparent 100%) !important;
    opacity: 0 !important; 
    transition: opacity 0.3s ease !important; 
    display: flex !important; 
    align-items: flex-end !important;
}

.gallery-item-tech:hover .gallery-overlay { opacity: 1 !important; }

.gallery-overlay p { 
    color: #fff !important; 
    margin: 0 !important; 
    font-size: 0.9rem !important; 
    font-weight: 600 !important; 
    line-height: 1.4 !important; 
    text-align: center !important; 
    width: 100% !important; 
}

/* Botones de navegación del Carrusel */
.about-gallery-carousel .owl-nav button {
    background: rgba(0, 210, 106, 0.1) !important;
    color: #00d26a !important;
    border: 1px solid #00d26a !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
}
.about-gallery-carousel .owl-nav button:hover {
    background: #00d26a !important;
    color: #0b1120 !important;
}
.about-gallery-carousel .owl-dots .owl-dot.active span {
    background: #00d26a !important;
}

/* --- FLECHAS DE NAVEGACIÓN DEL LIGHTBOX - PÁGINA ABOUT --- */
.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    background: rgba(11, 17, 32, 0.6);
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid rgba(0, 210, 106, 0.3);
    z-index: 9999999;
    transition: all 0.3s ease;
    user-select: none; /* Evita que el usuario seleccione el ícono por error */
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-prev:hover, .lightbox-next:hover {
    background: #00d26a;
    color: #0b1120;
    border-color: #00d26a;
    box-shadow: 0 0 20px rgba(0, 210, 106, 0.5);
}

/* Ajuste de flechas para celulares */
@media (max-width: 768px) {
    .lightbox-prev, .lightbox-next {
        font-size: 1.5rem;
        padding: 10px 15px;
    }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
}

/* ==========================================================================
   LIGHTBOX TÁCTICO (PANTALLA COMPLETA) - CORRECCIÓN DE MENÚ TAPADO
   ========================================================================== */
.lightbox-tech {
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    background: rgba(2, 6, 23, 0.95) !important; 
    
    /* CAMBIO CLAVE: Un z-index masivo para aplastar al menú fijo */
    z-index: 999999 !important; 
    
    display: none; 
    align-items: center !important; 
    justify-content: center !important; 
    flex-direction: column !important; 
    backdrop-filter: blur(8px) !important; 
}

.lightbox-image-tech { 
    max-width: 90% !important; 
    max-height: 75vh !important; 
    border-radius: 8px !important; 
    border: 2px solid #00d26a !important; 
    box-shadow: 0 0 40px rgba(0, 210, 106, 0.4) !important; 
    object-fit: contain !important;
}

.lightbox-caption-tech {
    color: #00d26a !important;
    margin-top: 20px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    font-family: 'Courier New', monospace !important;
    text-align: center !important;
    max-width: 80% !important;
    letter-spacing: 0.5px !important;
}

.close-btn-tech { 
    position: absolute !important; 
    /* Lo bajamos un poquito más para que no quede tan pegado al borde del monitor */
    top: 30px !important; 
    right: 40px !important; 
    color: #fff !important; 
    font-size: 2.5rem !important; 
    cursor: pointer !important; 
    transition: all 0.3s ease !important; 
    
    /* Z-index superior al fondo del lightbox */
    z-index: 9999999 !important;
}

.close-btn-tech:hover { 
    color: #00d26a !important; 
    transform: scale(1.1) rotate(90deg) !important; 
}

/* ==========================================================================
   SECCIÓN EQUIPO ESTRATÉGICO (PÁGINA ABOUT)
   ========================================================================== */

.team-section-tech {
    background-color: #ffffff !important;
    padding: 90px 0 !important;
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    border-bottom: 1px solid #e2e8f0;
}

.team-grid-tech {
    display: grid;
    /* Crea 4 columnas en PC. Si no caben, bajan automáticamente */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.team-card-tech {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Pequeño acento superior en la tarjeta */
.team-card-tech::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: #e2e8f0;
    transition: all 0.3s ease;
}

.team-card-tech:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 210, 106, 0.1);
    border-color: rgba(0, 210, 106, 0.3);
}

.team-card-tech:hover::before {
    background: #00d26a; /* Se enciende en verde tech al pasar el mouse */
}

/* Diseño del Avatar (Foto circular) */
.team-avatar {
    width: 130px;
    height: 130px;
    margin: 0 auto 25px auto;
    border-radius: 50%;
    border: 3px solid #e2e8f0;
    padding: 5px;
    transition: all 0.3s ease;
    background: #fff;
}

.team-card-tech:hover .team-avatar {
    border-color: #00d26a;
    box-shadow: 0 0 20px rgba(0, 210, 106, 0.2);
}

.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Textos de la tarjeta */
.team-name {
    color: #1c3961;
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.team-role {
    color: #00d26a;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.team-desc {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Redes Sociales del Equipo (Exclusivo para tu tarjeta por ahora) */
.team-socials {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.team-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #f8fafc;
    color: #475569;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.team-socials a:hover {
    background: #00d26a;
    color: #0b1120;
    border-color: #00d26a;
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
    .team-grid-tech {
        grid-template-columns: 1fr; /* En celular, uno debajo del otro */
        gap: 20px;
    }
}

/* Responsive Forzado */
@media (max-width: 900px) {
    .about-grid-container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .about-img-wrapper img {
        margin: 0 auto !important;
    }
    .badges-grid-tech {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }
}

/* ==========================================================================
   28. PÁGINA TIENDA Y TESTIMONIOS (GRID TECH)
   ========================================================================== */

/* --- SECCIÓN 1: CATÁLOGO TIENDA --- */
.store-catalog-tech {
    background-color: #0b1120;
    padding: 100px 0 80px 0;
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    border-bottom: 2px solid #00d26a;
}

.shop-grid-tech {
    display: grid;
    /* Crear tantas columnas como quepan (mínimo 300px de ancho) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Modificadores de la tarjeta de producto existente */
.store-catalog-tech .tech-product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.store-catalog-tech .product-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.store-catalog-tech .product-footer {
    margin-top: auto; /* Empuja el footer siempre abajo */
}

/* --- SECCIÓN 3: TESTIMONIOS TECH --- */
.testimonials-section-tech {
    background-color: #0b1120;
    padding: 100px 0;
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.testimonials-grid-tech {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.testimonial-card-tech {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.testimonial-card-tech:hover {
    transform: translateY(-5px);
    border-color: #00d26a;
    box-shadow: 0 10px 30px rgba(0, 210, 106, 0.1);
}

.test-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.test-header img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid #00d26a;
    object-fit: cover;
}

.test-header h4 {
    color: #fff;
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

.test-stars {
    color: #00d26a;
    font-size: 0.9rem;
}

.testimonial-card-tech p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

/* Responsive Extra */
@media (max-width: 768px) {
    .store-catalog-tech { padding-top: 120px; }
    .shop-grid-tech, .testimonials-grid-tech { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PANEL DE AVISO LEGAL / DISCLAIMER (TIENDA - VERSIÓN GRID)
   ========================================================================== */

.legal-disclaimer-tech {
    background: rgba(11, 17, 32, 0.9);
    border: 1px solid rgba(231, 76, 60, 0.4);
    border-left: 5px solid #e74c3c;
    border-radius: 8px;
    margin: 0 auto 50px auto;
    max-width: 950px; /* Más ancho para que el texto respire */
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.05);
    overflow: hidden;
}

.disclaimer-header {
    background: rgba(231, 76, 60, 0.1);
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(231, 76, 60, 0.2);
}

.disclaimer-header h3 {
    color: #e74c3c;
    font-size: 1.1rem;
    font-family: 'Courier New', monospace;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.5px;
}

.pulse-warning {
    color: #e74c3c;
    font-size: 1.5rem;
    animation: pulseWarning 2s infinite;
}

@keyframes pulseWarning {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); text-shadow: 0 0 10px #e74c3c; }
    100% { opacity: 1; transform: scale(1); }
}

.disclaimer-body {
    padding: 25px;
}

.disclaimer-intro {
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: center;
}

/* --- ESTRUCTURA GRID PARA LA LISTA (Igual a la foto) --- */
.disclaimer-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.disclaimer-item {
    display: grid;
    /* 240px fijos para el título, el resto para la descripción */
    grid-template-columns: 250px 1fr; 
    align-items: center;
    background: rgba(255, 255, 255, 0.03); /* Fondo gris azulado oscuro */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 18px 25px;
    transition: all 0.3s ease;
}

.disclaimer-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.item-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1rem;
}

.item-heading i {
    font-size: 1.2rem;
}

.item-text {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Colores de Alertas */
.title-danger { color: #e74c3c; }
.title-success { color: #00d26a; }
.title-warning { color: #f39c12; }

.disclaimer-footer {
    color: #f39c12 !important;
    font-size: 0.85rem !important;
    font-style: italic;
    margin-bottom: 0 !important;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
}

/* Responsive para Móviles */
@media (max-width: 768px) {
    .disclaimer-item {
        grid-template-columns: 1fr; /* Apila el título arriba y el texto abajo */
        gap: 10px;
        align-items: flex-start;
        padding: 15px;
    }
}

/* ==========================================================================
   29. PÁGINA DIRECTORIO OSINT (CENTRO DE DATOS TÁCTICO)
   ========================================================================== */

.osint-hero-tech {
    background-color: #0b1120;
    padding: 80px 0 50px 0;
    background-image: 
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    border-bottom: 2px solid #1e293b;
    color: #fff;	
}

/* Contenedor del Buscador y el botón */
.search-terminal-wrapper {
    max-width: 900px;
    margin: 40px auto 0 auto;
}

.search-terminal-container {
    position: relative;
    display: flex;
    align-items: center;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 5px 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.search-terminal-container:focus-within {
    border-color: #00d26a;
    box-shadow: 0 0 20px rgba(0, 210, 106, 0.2);
}

.terminal-icon { color: #00d26a; font-size: 1.2rem; margin-right: 15px; }

.search-terminal-container input {
    width: 100%; background: transparent; border: none; color: #f8fafc;
    font-size: 1.1rem; padding: 15px 0; font-family: 'Courier New', monospace; outline: none;
}
.search-terminal-container input::placeholder { color: #64748b; font-family: 'Raleway', sans-serif; }

/* Botón Historial (Texto Enlace discreto) */
.changelog-btn-container { text-align: right; margin-top: 10px; }
.changelog-trigger-tech {
    background: transparent; color: #94a3b8; border: none; font-size: 0.9rem;
    font-family: 'Courier New', monospace; font-weight: 600; cursor: pointer;
    transition: all 0.3s ease;
}
.changelog-trigger-tech:hover { color: #00d26a; text-shadow: 0 0 10px rgba(0, 210, 106, 0.4); }

.no-results-tech { text-align: center; color: #e74c3c; font-family: 'Courier New', monospace; padding: 20px; display: none; font-size: 1.1rem; font-weight: bold; }

/* Modal y Etiquetas de Colores (Restaurado) */
.modal-overlay-tech { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 6, 23, 0.8); backdrop-filter: blur(5px); z-index: 9998; display: none; }
.changelog-modal-tech { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; max-height: 80vh; background: #0b1120; border: 1px solid rgba(0, 210, 106, 0.3); border-radius: 12px; z-index: 9999; display: none; box-shadow: 0 10px 40px rgba(0,0,0,0.5); overflow: hidden; flex-direction: column; }
.changelog-header-tech { background: #1e293b; padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0, 210, 106, 0.2); }
.changelog-header-tech h3 { color: #fff; margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.close-modal-tech { background: transparent; border: none; color: #94a3b8; font-size: 1.5rem; cursor: pointer; transition: color 0.3s; }
.close-modal-tech:hover { color: #e74c3c; }
.changelog-content-tech { padding: 25px; overflow-y: auto; flex-grow: 1; }
.log-item { border-left: 2px solid #334155; padding-left: 20px; position: relative; margin-bottom: 25px; }
.log-item::before { content: ''; position: absolute; left: -6px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #00d26a; }
.log-date { color: #94a3b8; font-family: 'Courier New', monospace; font-size: 0.85rem; display: block; margin-bottom: 5px; }
.log-text { color: #f8fafc; font-size: 0.95rem; line-height: 1.5; }

/* TODAS TUS ETIQUETAS RESTAURADAS */
.badge-cat { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; margin-left: 5px; font-family: 'Raleway', sans-serif; font-weight: 700; }
.badge-osint { background: #2980b9; color: white; }         
.badge-geoint { background: #27ae60; color: white; }         
.badge-imint { background: #8e44ad; color: white; }          
.badge-socmint { background: #e74c3c; color: white; }        
.badge-humint { background: #d35400; color: white; }         
.badge-cybint { background: #2c3e50; color: white; }         
.badge-finint { background: #f39c12; color: white; }         
.badge-techint { background: #7f8c8d; color: white; }        
.badge-dataviz { background: #16a085; color: white; }        
.badge-forense { background: #c0392b; color: white; }        
.badge-legislativo { background: #2ecc71; color: white; }    
.badge-linguistica { background: #9b59b6; color: white; }    
.badge-sigint { background: #34495e; color: white; }         
.badge-masint { background: #e67e22; color: white; }         
.badge-medint { background: #e74c3c; color: white; }         
.badge-ecoint { background: #f1c40f; color: #2c3e50; }       

/* --- MÓDULOS DE ENLACES --- */
.osint-modules-section { 
    background-color: #ffffff; /* O #f8fafc si lo prefieres blanco puro */
    /* ESTE ES EL CÓDIGO EXACTO DE LA MALLA CLARA: */
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
    background-size: 40px 40px; 
    
    padding: 60px 0 100px 0; 
    min-height: 50vh; 
}
.osint-module-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); overflow: hidden; }
.module-header { background: #ffffff; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.3s; border-left: 4px solid #00d26a; }
.module-header:hover { background: #f1f5f9; }
.module-title { color: #1c3961; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: 15px; }
.module-toggle i { color: #64748b; transition: transform 0.3s ease; }
.module-content { display: none; padding: 20px 30px 30px 30px; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; }

/* --- ENLACES INDIVIDUALES (Añadido efecto Tooltip nativo del CSS) --- */
.osint-link-item { position: relative; background: #ffffff; border: 1px solid #e2e8f0; padding: 15px; border-radius: 8px; display: flex; align-items: flex-start; gap: 15px; text-decoration: none; transition: all 0.2s ease; }
.osint-link-item:hover { border-color: #00d26a; transform: translateX(5px); box-shadow: 0 5px 15px rgba(0, 210, 106, 0.1); }
.link-icon { width: 40px; height: 40px; background: rgba(0, 210, 106, 0.1); color: #00d26a; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.link-info h4 { color: #0f172a; font-size: 1rem; font-weight: 700; margin: 0 0 5px 0; }
.link-info p { color: #64748b; font-size: 0.85rem; line-height: 1.4; margin: 0; }


/* Clase utilitaria para el buscador OSINT */
.hidden-resource { display: none !important; }

/* ==========================================================================
   PATRÓN DE ALTERNANCIA TÁCTICA (DARK / LIGHT) PARA INDEX
   ========================================================================== */

/* 2. ECOSISTEMA (Fondo Claro) */
.ecosystem-section {
    padding: 80px 0;
    background-color: #ffffff !important;
    background-image: linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px) !important;
    background-size: 40px 40px;
    border-bottom: 1px solid #e2e8f0 !important;
}
.ecosystem-section .section-title-tech { color: #1c3961 !important; }
.ecosystem-section .section-subtitle { color: #475569 !important; }

/* 3. TIENDA (Fondo Oscuro) */
.store-section {
    background-color: #0b1120 !important;
    background-image: linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px) !important;
    border-top: 1px solid rgba(0, 210, 106, 0.2) !important;
}
.store-section .section-title-tech { color: #e2e8f0 !important; }
.store-section .section-subtitle { color: #cbd5e1 !important; }
/* Las tarjetas de productos blancas resaltan excelente sobre este fondo oscuro */

/* ==========================================================================
   CORRECCIÓN DEL PATRÓN CEBRA (DARK / LIGHT)
   ========================================================================== */

/* 4. ENTREVISTAS (Debe ser Fondo Claro) */
section#entrevistas, .interviews-section {
    background-color: #ffffff !important;
    background-image: linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px) !important;
    border-top: 1px solid #e2e8f0 !important;
}
/* Forzamos letras oscuras para el fondo blanco */
section#entrevistas .section-title-tech, .interviews-section .section-title-tech { color: #1c3961 !important; }
section#entrevistas .section-subtitle, .interviews-section .section-subtitle { color: #475569 !important; }

/* 5. IMPACTO GLOBAL (Debe ser Fondo Oscuro) */
.global-impact-section {
    background-color: #0b1120 !important;
    background-image: linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px) !important;
    border-top: 1px solid rgba(0, 210, 106, 0.2) !important;
}
/* Forzamos letras claras y tarjetas oscuras */
.global-impact-section .section-title-tech { color: #e2e8f0 !important; }
.global-impact-section .section-subtitle { color: #cbd5e1 !important; }

.global-impact-section .tech-stat-card {
    background: #1e293b !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.global-impact-section .card-header-stat h3 { color: #ffffff !important; }
.global-impact-section .stat-list li { color: #cbd5e1 !important; }
.global-impact-section .stat-number { color: #ffffff !important; }
.global-impact-section .stat-number.text-green { color: #00d26a !important; }

/* Pequeño CSS para las Comunidades  */

.comm-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
    color: #fff !important;
}
.comm-wa { background: #25D366; }
.comm-wa:hover { box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4); transform: translateY(-3px); }

.comm-pt { background: #FF424D; }
.comm-pt:hover { box-shadow: 0 5px 15px rgba(255, 66, 77, 0.4); transform: translateY(-3px); }

.comm-tg { background: #0088cc; }
.comm-tg:hover { box-shadow: 0 5px 15px rgba(0, 136, 204, 0.4); transform: translateY(-3px); }

/* Forzar que las 3 tarjetas tengan el mismo tamaño */
.patreon-tech-grid-3col {
    align-items: stretch !important; /* Estira las columnas por igual */
}

.patreon-card-tech {
    display: flex;
    flex-direction: column;
    height: 100%; 
}

/* Empuja los botones y contadores siempre hacia abajo */
.card-footer-actions {
    margin-top: auto; 
    width: 100%;
}

.cards-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Reducimos los márgenes para que las tarjetas suban */
.ecosystem-mini-cards {
    margin-top: 10px; 
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px; 
}
.ecosystem-title {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 10px; /* Reducido */
    text-transform: uppercase;
}
.eco-card {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px; /* Reducimos el relleno interno de la tarjeta */
    background-color: #1e293b;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.eco-card h4 {
    margin: 0 0 5px 0;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
}
.eco-card span {
    color: #94a3b8;
    font-size: 0.75rem;
    line-height: 1.2;
    display: block;
}
.eco-icon {
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 8px;
}

/* Efectos Hover Tácticos */
.free-card:hover {
    border-color: #00d26a;
    background-color: rgba(0, 210, 106, 0.05);
}
.free-card:hover .eco-icon { color: #00d26a; }

.vip-card:hover {
    border-color: #fbbf24;
    background-color: rgba(251, 191, 36, 0.05);
}
.vip-card:hover .eco-icon { color: #fbbf24; }

/* ==========================================================================
   RESPONSIVE FIX: CENTRAR HERO IMAGE EN TABLET / MÓVIL
   Este bloque anula únicamente las propiedades necesarias en pantallas
   pequeñas para mantener la persona centrada sobre el círculo.
   ========================================================================== */
@media (max-width: 992px) {
    .hero-wrapper { flex-direction: column !important; align-items: center !important; gap: 1.5rem !important; }

    .hero-image-col, .hero-text-col { width: 100% !important; padding: 0 !important; }
    .hero-image-col { order: 1; display: flex !important; justify-content: center !important; align-items: center !important; }
    .hero-text-col { order: 2; }

    /* Forzamos un tamaño consistente y relativo del wrapper circular */
    .image-wrapper {
        width: min(380px, 86vw) !important;
        max-width: 420px !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin: 0 auto !important;
        position: relative !important;
        border-radius: 50% !important;
        overflow: visible !important;
        z-index: 2;
    }

    /* Aseguramos que el fondo circular siga centrado dentro del wrapper */
    .circle-bg {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
    }

    /* Imagen: centrada horizontalmente y ligeramente elevada para que la cabeza "salga" */
    .imagen-perfil {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: -6% !important;
        height: 120% !important;
        width: auto !important;
        max-width: none !important;
        object-fit: cover !important;
        border-radius: 50% !important;
        -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 6%, black 22%) !important;
        mask-image: linear-gradient(to top, transparent 0%, transparent 6%, black 22%) !important;
        filter: drop-shadow(0 10px 25px rgba(0,0,0,0.6)) !important;
        z-index: 3 !important;
    }

    /* Ajustes finos para pantallas muy pequeñas */
    @media (max-width: 480px) {
        .image-wrapper { width: min(320px, 86vw) !important; }
        .imagen-perfil { height: 125% !important; bottom: -8% !important; }
    }
    
    /* Evita que el header fijo solape el hero: dejar espacio superior */
    .hero-section {
        padding-top: calc(var(--header-height, 72px) + 1.9rem) !important;
    }
}