/* ========================================================================== 1. CONFIGURACIÓN GLOBAL Y RESET BÁSICO ========================================================================== Se definen las variables de color para ambos temas (claro y oscuro). Esto permite gestionar la paleta de colores de forma centralizada y consistente. */ :root { /* Paleta para el tema oscuro (utilizado en la página de Ada) */ --bg-dark: #0A192F; --text-dark-primary: #E6F1FF; --text-dark-secondary: #A8B2D1; /* Paleta para el tema claro (utilizado en la página de ZUNNIA) - REFINADA */ --bg-light: #f0f8e6; /* Fondo: Verde pastel muy claro y suave */ --card-bg-light: #ffffff; /* Fondo para tarjetas: Blanco puro para que resalten */ --text-light-primary: #2c3e50; /* Texto principal: Azul pizarra oscuro para alta legibilidad */ --text-light-secondary: #5a6872; /* Texto secundario: Gris azulado para información de apoyo */ /* Colores de acento */ --accent-color-zunnia: #5d9c70; /* Acento para ZUNNIA: Verde vibrante */ --accent-color-zunnia-hover: #4a7d59;/* Acento para ZUNNIA (hover): Tono más oscuro */ --accent-color-ada: #8da9b6; /* Acento para Ada: Tono azulado original */ } /* Reset básico y estilos generales para el . - 'box-sizing' se omite ya que no se estableció uno global, los navegadores usan 'content-box'. - 'margin: 0' elimina los márgenes por defecto. - 'font-family' establece la tipografía principal del sitio. - 'line-height' mejora la legibilidad del texto. - La configuración de flexbox ('display: flex', 'flex-direction: column', 'min-height: 100vh') asegura que el footer se mantenga al final de la página, incluso en páginas con poco contenido. */ body { font-family: 'Fredoka', sans-serif; margin: 0; line-height: 1.7; display: flex; flex-direction: column; min-height: 100vh; } /* El 'main' debe crecer para ocupar el espacio disponible entre el header y el footer. */ main { flex-grow: 1; } /* Contenedor principal que centra el contenido y añade espaciado lateral. */ .container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; } /* ========================================================================== 2. APLICACIÓN DE TEMAS POR PÁGINA ========================================================================== /* --- TEMA CLARO: Página de ZUNNIA --- */ .page-zunnia { background-color: var(--bg-light); color: var(--text-light-primary); transition: background-color 0.3s ease; } /* --- TEMA OSCURO: Página de Ada --- */ .page-ada { background-color: var(--bg-dark); color: var(--text-dark-primary); } /* Se asegura que el contenido dentro de 'main' en la página de Ada se estire verticalmente */ .page-ada .main-content-ada { display: flex; flex-direction: column; flex-grow: 1; } /* ========================================================================== 3. ESTILOS DE COMPONENTES ========================================================================== /* --- Barra de Navegación (Navbar) --- */ .navbar { padding: 1rem 0; width: 100%; z-index: 1000; } .navbar .container { display: flex; justify-content: space-between; align-items: center; } .logo-link { font-weight: 700; font-size: 1.8rem; text-decoration: none; } .navbar nav a { text-decoration: none; font-weight: 600; transition: color 0.3s ease; } /* Estilos específicos de Navbar para el tema claro (ZUNNIA) */ .page-zunnia .navbar { position: sticky; /* La barra se fija en la parte superior al hacer scroll */ top: 0; background-color: rgba(255, 255, 255, 0.75); /* Fondo blanco semitransparente */ backdrop-filter: blur(10px); /* Efecto de desenfoque para un look "cristalino" */ -webkit-backdrop-filter: blur(10px); /* Compatibilidad con Safari */ border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Borde sutil */ padding: 1.2rem 0; } .page-zunnia .logo-link, .page-zunnia .navbar nav a { color: var(--text-light-primary); } .page-zunnia .navbar nav a:hover { color: var(--accent-color-zunnia); } /* Estilos específicos de Navbar para el tema oscuro (Ada) */ .page-ada .navbar { background-color: rgba(0, 0, 0, 0.05); /* Fondo oscuro sutil */ } .page-ada .logo-link { color: var(--text-dark-primary); } /* --- Menú Desplegable (Dropdown) --- */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; /* Oculto por defecto */ position: absolute; background-color: rgba(10, 25, 47, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(141, 169, 182, 0.5); min-width: 180px; box-shadow: 0 8px 16px rgba(0,0,0,0.3); z-index: 10; border-radius: 8px; margin-top: 0.75rem; /* Espacio entre el botón y el menú */ overflow: hidden; } .dropdown-content a { color: var(--text-dark-secondary); padding: 12px 16px; text-decoration: none; display: flex; align-items: center; gap: 10px; transition: background-color 0.2s ease, color 0.2s ease; } .dropdown-icon { width: 1.2em; height: 1.2em; } .dropdown-content a:hover { background-color: rgba(141, 169, 182, 0.1); color: var(--text-dark-primary); } .dropdown:hover .dropdown-content { display: block; /* Muestra el menú al pasar el mouse */ } /* --- Sección Hero (Cabecera Principal) --- */ .hero { text-align: center; padding: 6rem 0; } .hero h1 { font-size: 3.5rem; margin-bottom: 1rem; line-height: 1.2; } .hero p { font-size: 1.25rem; margin-bottom: 2.5rem; max-width: 650px; margin-left: auto; margin-right: auto; } /* Ajustes específicos de Hero para ZUNNIA */ .page-zunnia .hero { padding: 7rem 0; } .page-zunnia .hero p { color: var(--text-light-secondary); font-size: 1.3rem; } /* --- Botones de Llamada a la Acción (CTA) --- */ .cta-button { display: inline-block; background-color: transparent; border-width: 2px; border-style: solid; padding: 0.9rem 2rem; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 1.1rem; transition: all 0.2s ease; cursor: pointer; text-align: center; } /* Estilos de botón para ZUNNIA */ .page-zunnia .cta-button { color: var(--accent-color-zunnia); border-color: var(--accent-color-zunnia); } .page-zunnia .cta-button:hover { background-color: var(--accent-color-zunnia-hover); border-color: var(--accent-color-zunnia-hover); color: #ffffff; transform: translateY(-3px); /* Efecto sutil de levantamiento */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } /* Estilos de botón para Ada */ .page-ada .cta-button { color: var(--accent-color-ada); border-color: var(--accent-color-ada); } .page-ada .cta-button:hover { background-color: var(--accent-color-ada); color: var(--bg-dark); transform: scale(1.05); } /* --- Sección de Productos (ZUNNIA) --- */ #products { padding: 6rem 0; } .products h2 { text-align: center; font-size: 2.8rem; margin-bottom: 4rem; } .product-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .product-info h3 { font-size: 2.5rem; margin-top: 0; margin-bottom: 0.5rem; } .product-info .product-tagline { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.5rem; } .product-info p { margin-bottom: 2rem; } .product-image img { max-width: 100%; border-radius: 10px; } /* Mejoras visuales de la tarjeta de producto para ZUNNIA */ .page-zunnia .product-showcase { background-color: var(--card-bg-light); border-radius: 20px; padding: 4rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); border: 1px solid rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .page-zunnia .product-showcase:hover { transform: translateY(-5px); /* Eleva la tarjeta al pasar el mouse */ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); } .page-zunnia .product-info .product-tagline { color: var(--text-light-secondary); } /* --- Hero de Página de Producto (Ada) --- */ .page-hero { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .page-hero .product-title { font-size: 6rem; font-weight: 700; margin: 0; } .page-hero .product-subtitle { font-size: 1.5rem; max-width: 500px; margin: 1rem auto 2.5rem; color: var(--text-dark-secondary); } .download-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; width: 100%; max-width: 500px; } .download-buttons .cta-button { flex: 1; /* Permite que los botones crezcan y tengan el mismo ancho */ white-space: nowrap; } /* --- Pie de Página (Footer) --- */ .footer { padding: 3rem 0; margin-top: auto; /* Empuja el footer al final */ } /* Footer Detallado (Página de Ada) */ .page-ada .footer { background-color: rgba(0, 0, 0, 0.05); } .footer-content { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 2rem; } .footer-left { flex-shrink: 0; } .footer-links { display: flex; gap: 4rem; justify-content: center; flex-grow: 1; } .footer-column h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--text-dark-primary); } .footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column ul li { margin-bottom: 0.5rem; } .footer-column ul a { color: var(--text-dark-secondary); text-decoration: none; transition: color 0.3s ease; } .footer-column ul a:hover { color: var(--text-dark-primary); } .footer-app-info { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; } .footer-app-info img { width: 40px; height: 40px; } .footer-app-info h4 { margin: 0; font-size: 1.8rem; font-weight: 700; color: var(--text-dark-primary); } .social-icons { display: flex; gap: 1.5rem; } .social-icon svg { width: 24px; height: 24px; fill: var(--text-dark-secondary); transition: fill 0.3s ease; } .social-icon:hover svg { fill: var(--text-dark-primary); } .footer-copyright-text { font-size: 0.9rem; color: var(--text-dark-secondary); margin-top: 1.5rem; } /* Footer Simple (Página de ZUNNIA) */ .page-zunnia .footer.simple-footer { background-color: rgba(0, 0, 0, 0.02); /* Un fondo casi imperceptible */ text-align: center; padding: 2rem 0; } .page-zunnia .simple-footer p { color: var(--text-light-secondary); font-size: 0.95rem; margin: 0; } /* ========================================================================== 4. ESTILOS RESPONSIVOS (Adaptación a Móviles) ========================================================================== */ @media (max-width: 768px) { /* Ajustes generales para pantallas pequeñas */ .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1rem; } .page-hero .product-title { font-size: 3.5rem; } .page-hero .product-subtitle { font-size: 1.2rem; } /* La tarjeta de producto pasa a una sola columna */ .product-showcase { grid-template-columns: 1fr; padding: 2.5rem; /* Menos padding en móvil */ } .product-image { order: -1; /* Mueve la imagen arriba del texto */ margin-bottom: 2rem; } /* El footer detallado pasa a una sola columna y se centra */ .footer-content { flex-direction: column; align-items: center; text-align: center; } .footer-links { flex-direction: column; gap: 2rem; /* Reduce el espacio entre columnas de enlaces */ text-align: center; } }