/* Importa Tailwind CSS si lo estás usando directamente con un CDN, o si lo has compilado */
/* Para esta demostración, asumo que Tailwind se cargará desde un CDN en el HTML.
   Si estás usando `npm install -D tailwindcss` y un proceso de compilación (ej. con PostCSS),
   esta línea de `@import url(...)` NO es necesaria aquí, y @tailwind base/components/utilities
   estarían en tu archivo CSS principal después de la compilación de Tailwind.
   Pero como estamos usando Flask y el archivo style.css, y el index.html carga Tailwind por CDN,
   este archivo solo contiene CSS personalizado que se añade a Tailwind. */

/* Estilos globales y reseteos */
body {
    font-family: 'Montserrat', sans-serif; /* Montserrat es la fuente principal por defecto */
    background-color: #0d1117; /* Fondo principal oscuro */
    color: #c9d1d9; /* Color de texto claro */
    overflow-x: hidden; /* Evitar scroll horizontal */
    margin: 0;
    padding: 0;
}

/* Estilos de encabezados y fuentes futuristas */
h1, h2, h3 {
    font-family: 'Orbitron', sans-serif; /* Orbitron es la fuente principal por defecto */
    color: #4CAF50; /* Verde neón para acentos de título */
}

/* --- NUEVAS REGLAS: Fuentes ESPECÍFICAS para Chino y Japonés --- */
/* Cuando el atributo 'lang' del HTML sea 'zh' (chino) */
html[lang="zh"] body,
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3 {
    font-family: 'Noto Sans SC', sans-serif;
}

/* Cuando el atributo 'lang' del HTML sea 'ja' (japonés) */
html[lang="ja"] body,
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3 {
    font-family: 'Noto Sans JP', sans-serif;
}
/* --------------------------------------------------------------- */


/* Gradiente para texto */
.text-gradient-blue-purple {
    background: linear-gradient(45deg, #007bff, #8a2be2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gradiente oscuro para secciones */
.gradient-bg-section {
    background: linear-gradient(135deg, #1a202c, #2d3748);
    border: 1px solid #30363d;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Fondo ligeramente más claro para tarjetas */
.card-bg {
    background-color: #161b22;
    border: 1px solid #30363d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}
.card-bg:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

/* Botones principales */
.btn-primary {
    background-color: #4CAF50; /* Verde vibrante */
    color: #0d1117;
    padding: 0.9rem 2.2rem;
    border-radius: 9999px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 6px 15px rgba(76, 175, 80, 0.3);
    font-weight: 600;
}
.btn-primary:hover {
    background-color: #66BB6A;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.5);
    transform: translateY(-2px);
}

/* Botones secundarios */
.btn-secondary {
    background-color: #30363d; /* Gris oscuro para botones secundarios */
    color: #c9d1d9;
    padding: 0.7rem 1.4rem;
    border-radius: 9999px;
    transition: all 0.3s ease-in-out;
    border: 1px solid #484f58;
    font-weight: 500;
}
.btn-secondary:hover {
    background-color: #484f58;
    transform: translateY(-1px);
}

/* Iconos SVG */
.icon {
    width: 38px; /* Iconos un poco más grandes */
    height: 38px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    color: #8a2be2; /* Púrpura para acentos de icono */
}

/* Campos de entrada futuristas */
.input-futuristic {
    background-color: #1a202c;
    border: 1px solid #484f58;
    color: #c9d1d9;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
    transition: border-color 0.3s ease;
}
.input-futuristic:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Contenedor del QR */
.qr-code-container {
    background-color: #1a202c;
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid #4CAF50; /* Borde resaltado para el QR */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* Altura mínima para el contenedor del QR */
}

/* Animación de fondo sutil para la sección de Inicio */
.hero-background {
    position: relative;
    background: #0d1117; /* Base */
    overflow: hidden;
}
.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(76,175,80,0.1) 0%, transparent 40%),
                radial-gradient(circle at bottom right, rgba(138,43,226,0.1) 0%, transparent 40%);
    animation: moveGradient 20s infinite alternate;
    opacity: 0.6;
    z-index: 0;
}
@keyframes moveGradient {
    0% { transform: translate(0, 0); }
    50% { transform: translate(10%, 10%); }
    100% { transform: translate(0, 0); }
}
.hero-content {
    position: relative;
    z-index: 1;
}

/* Estilos para el modal */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}
.modal-content-area {
    background-color: #161b22;
    border: 1px solid #30363d;
}
.modal-close-button {
    color: #c9d1d9;
    transition: color 0.2s;
}
.modal-close-button:hover {
    color: #4CAF50;
}

/* Estilos para las imágenes de tipologías (ocultas por defecto, aparecen al pasar el ratón) */
.typology-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.typology-image.visible {
    opacity: 1;
}