/* static/css/style.css - DANJO Core (Landing + Internas) */

/* =========================================
   1. RESET GLOBAL Y ESTRUCTURA (Para páginas internas)
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    font-family: 'Inter', 'Montserrat', sans-serif;
    background-color: #09090b; 
    overflow-x: hidden; 
}

main { display: flex; flex-direction: column; }

/* =========================================
   2. EFECTOS Y ANIMACIONES (Gateway / Landing)
   ========================================= */
.glow-software { box-shadow: 0 0 20px rgba(6, 182, 212, 0); transition: all 0.5s ease-in-out; }
.group:hover .glow-software { box-shadow: 0 0 40px rgba(6, 182, 212, 0.6); }

.glow-civil { box-shadow: 0 0 20px rgba(234, 179, 8, 0); transition: all 0.5s ease-in-out; }
.group:hover .glow-civil { box-shadow: 0 0 40px rgba(234, 179, 8, 0.6); }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-text { animation: fadeInUp 0.8s ease-out 0.8s forwards; opacity: 0; }

/* FIX: Evitar que se corten las tildes en fuentes gruesas */
.titulo-principal {
    line-height: 1.1 !important; 
    padding-top: 5px; 
}

/* =========================================
   3. FIX RESPONSIVO: PANTALLAS BAJITAS (iPhone Horizontal)
   ========================================= */
/* Aplica solo si el celular está acostado y tiene poca altura */
@media screen and (max-height: 520px) {
    
    /* Bloqueamos el scroll SOLO si estamos en el Home (usando h-screen de Tailwind) */
    html, body {
        height: 100vh !important;
        overflow: hidden !important;
    }

    /* Forzamos división IZQUIERDA/DERECHA (flex-row) incluso en móvil corto */
    main.h-screen { 
        flex-direction: row !important; 
        height: 100vh !important;
    }

    /* Reducción drástica de textos para que quepan */
    .titulo-principal {
        font-size: 1.5rem !important; 
        margin-bottom: 2px !important;
        letter-spacing: 0.1em !important;
    }
    
    main.h-screen p {
        font-size: 10px !important; 
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
        max-width: 200px !important; 
    }
    
    /* Botones compactos */
    main.h-screen span {
        font-size: 10px !important;
        padding: 5px 15px !important; 
    }

    /* Ajustamos los contenedores internos para que no se estiren */
    main.h-screen > a > div.relative {
        padding: 2vh !important;
    }

    /* Ajustar Header miniatura */
    header { padding: 3vh 4vh !important; }
    header img { height: 12vh !important; width: auto !important; }

    /* Idioma en la esquina superior derecha */
    #lang-form {
        top: 8px !important;
        right: 10px !important;
        transform: scale(0.75) !important; 
        transform-origin: top right;
    }
    
    /* Ocultamos el footer flotante TOTALMENTE para maximizar espacio de lectura */
    footer { display: none !important; }
}

/* =========================================
   4. ESTILOS ANTIGUOS (Para páginas internas: Legal, Contacto)
   ========================================= */
   
header:not(.absolute) { 
    background-color: #121c2d;
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 50px; max-width: 1200px; margin: 0 auto; }
.logo h2 { color: #ffffff; letter-spacing: 2px; }
.logo-img { height: 60px; transition: height 0.3s ease; }
nav ul { list-style: none; display: flex; gap: 25px; align-items: center; }
nav ul li a { text-decoration: none; color: #a9b5c7; font-weight: 500; transition: 0.3s; }
nav ul li a:hover { color: #ffffff; }

.btn-vip { background-color: #0a887d; color: white !important; padding: 8px 18px; border-radius: 5px; font-weight: bold; text-decoration: none; }
.btn-vip:hover { background-color: #e68200; }

.header-actions { display: flex; align-items: center; gap: 15px; }

.lang-switch { display: flex; align-items: center; gap: 6px; color: #a9b5c7; text-decoration: none; padding: 6px 14px; border: 1px solid #2a3b55; border-radius: 20px; font-size: 0.85rem; font-weight: 600; transition: all 0.3s ease; }
.lang-switch:hover { color: #ffffff; background-color: #2a3b55; border-color: #a9b5c7; }

.main-footer { background-color: #121c2d; color: #a9b5c7; padding: 40px 20px 20px; text-align: center; border-top: 3px solid #0056b3; }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; }
.social-links a { color: #a9b5c7; font-size: 1.5rem; margin: 0 15px; transition: color 0.3s; }
.social-links a:hover { color: #ffffff; }
.legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; font-size: 0.9rem; }
.legal-links a { color: #a9b5c7; text-decoration: none; transition: color 0.3s; }
.legal-links a:hover { color: #ffffff; text-decoration: underline; }
.copyright { font-size: 0.85rem; border-top: 1px solid #2a3b55; padding-top: 20px; }

/* Responsivo para el header interno antiguo */
@media screen and (max-width: 850px) {
    nav { padding: 10px 15px !important; flex-wrap: nowrap !important; justify-content: space-between !important; }
    .logo img.logo-img { height: 25px !important; width: auto !important; }
    nav ul { display: none !important; }
    .header-actions { gap: 5px !important; }
    .btn-vip { padding: 5px 8px !important; font-size: 0.75rem !important; }
    .lang-switch { padding: 4px 8px !important; font-size: 0.75rem !important; }
}

/* =========================================
   6. LANDING PÚBLICA (Animaciones extra)
   ========================================= */
/* Animación suave para el brillo cian de fondo */
@keyframes cyanPulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}
.cyan-glow { animation: cyanPulse 6s ease-in-out infinite; }

/* GUIÑO A PROGRAMACIÓN: Comentarios sintácticos automáticos en CSS */
.code-comment::before { content: "/* "; color: #6b7280; font-family: monospace; }
.code-comment::after { content: " */"; color: #6b7280; font-family: monospace; }