/* Las fuentes se cargan con desde el de index.php.
Estaban aca con @import, que obliga al navegador a bajar y parsear este
archivo antes de descubrir siquiera que las fuentes existen: dos viajes
en cadena en vez de dos en paralelo. */
/* Define Color Palette and Fonts as CSS Variables */
:root {
/* Nuevos colores basados en la imagen proporcionada */
--ktj-dark-blue: #0A1622; /* Azul oscuro (casi negro) */
--ktj-medium-blue: #0A3B5B; /* Azul medio */
--ktj-bright-blue: #0078C8; /* Azul brillante */
--ktj-red: #E63946; /* Rojo */
/* Mantenemos los colores originales como referencia */
--ktj-blue: #0078C8; /* Actualizado al azul brillante */
--ktj-purple: #8A2BE2; /* Blue Violet - mantenido para compatibilidad */
--ktj-light: #f8f9fa; /* Bootstrap light grey */
--ktj-dark: #0A1622; /* Actualizado al azul oscuro */
--font-primary: 'Roboto', sans-serif;
--font-secondary: 'Poppins', sans-serif; /* Good for headings */
/* Gradientes actualizados basados en la imagen */
--ktj-gradient-blue: linear-gradient(135deg, var(--ktj-dark-blue), var(--ktj-bright-blue));
--ktj-gradient-red: linear-gradient(135deg, var(--ktj-bright-blue), var(--ktj-red));
--ktj-gradient: var(--ktj-gradient-blue); /* Mantener compatibilidad */
}
/* Basic Body Styling */
body {
font-family: var(--font-primary);
color: var(--ktj-dark);
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-secondary);
font-weight: 600; /* Slightly bolder headings */
color: var(--ktj-blue); /* Example: Use primary blue for headings */
}
/* Placeholder for Navbar Styling (adjust in layout step) */
#navbar {
background-color: rgba(255, 255, 255, 0.9); /* Example: Slightly transparent white */
backdrop-filter: blur(5px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Hero Section Styling with Background Image */
#hero-section {
min-height: 80vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background-color: var(--ktj-dark-blue); /* mientras cargan las imagenes */
}
/* --------------------------------------------------------------------------
Fondo del hero: dos imagenes que se alternan
--------------------------------------------------------------------------
El puerto de contenedores que ya tenia el sitio y el convoy de barcazas en
el rio amazonico. La de abajo (rio) esta siempre; la de arriba (puerto) va
apareciendo y desapareciendo, asi que basta con animar una sola capa.
El png original del puerto pesaba 2,7 MB; el webp pesa 255 KB y el del rio
81 KB, de modo que las dos juntas siguen pesando un octavo de lo que pesaba
una sola antes.
-------------------------------------------------------------------------- */
/*
Las tres capas del hero, de atras hacia adelante:
0 .hero-fondos las imagenes
1 ::before el degradado que oscurece
2 .container el titulo y el boton (z-index en el HTML)
Estuvo un rato con z-index -1 y el hero se veia vacio: como
#hero-section no crea contexto de apilamiento propio, un hijo con
z-index negativo se pinta por detras del background-color del propio
hero, que lo tapaba entero. Con valores positivos y explicitos no
depende de eso.
*/
.hero-fondos {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-fondo {
position: absolute;
inset: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
will-change: opacity;
}
.hero-fondo-rio {
background-image: url('../images/hero-rio.jpg');
background-image: image-set(url('../images/hero-rio.webp') type('image/webp'),
url('../images/hero-rio.jpg') type('image/jpeg'));
}
.hero-fondo-puerto {
background-image: url('../images/hero-opt.jpg');
background-image: image-set(url('../images/hero.webp') type('image/webp'),
url('../images/hero-opt.jpg') type('image/jpeg'));
animation: heroAlternar 18s ease-in-out infinite;
}
/* Arranca en el puerto (lo que el sitio ya mostraba), se funde al rio, se
queda un rato y vuelve. Los tramos largos en 1 y en 0 son a proposito: sin
ellos parecerian dos imagenes parpadeando en vez de alternandose. */
@keyframes heroAlternar {
0% { opacity: 1; }
42% { opacity: 1; }
50% { opacity: 0; }
92% { opacity: 0; }
100% { opacity: 1; }
}
/* Quien pidio menos movimiento en su sistema ve solo la primera, quieta. */
@media (prefers-reduced-motion: reduce) {
.hero-fondo-puerto {
animation: none;
opacity: 1;
}
}
/* Efecto parallax, solo en escritorio: iOS Safari maneja mal
background-attachment: fixed -- estira la imagen o la deja temblando al
hacer scroll -- y en pantallas chicas no aporta nada. */
@media (min-width: 993px) {
.hero-fondo {
background-attachment: fixed;
}
}
/* Overlay para mejorar la legibilidad del texto sobre la imagen */
#hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(10, 22, 34, 0.7), rgba(0, 120, 200, 0.5)); /* Gradiente con los nuevos colores */
z-index: 1; /* sobre las imagenes de fondo, debajo del texto */
}
/* Footer Styling */
#footer {
background-color: var(--ktj-dark-blue);
color: var(--ktj-light);
}
#footer a {
color: var(--ktj-bright-blue);
text-decoration: none;
transition: color 0.3s ease;
}
#footer a:hover {
color: var(--ktj-red);
text-decoration: underline;
}
/* Iconos de redes sociales que todavia no tienen cuenta detras. Se ven, pero
atenuados y sin cursor de enlace: asi no prometen un destino que no existe.
Cuando el cliente abra sus redes se reemplazan por normales. */
.social-placeholder {
color: var(--ktj-light);
opacity: 0.45;
cursor: default;
display: inline-block;
}
/* Utility Classes */
.bg-gradient-blue {
background: var(--ktj-gradient-blue);
color: white;
}
.bg-gradient-red {
background: var(--ktj-gradient-red);
color: white;
}
.bg-dark-blue {
background-color: var(--ktj-dark-blue);
color: white;
}
.bg-medium-blue {
background-color: var(--ktj-medium-blue);
color: white;
}
.bg-bright-blue {
background-color: var(--ktj-bright-blue);
color: white;
}
.text-bright-blue {
color: var(--ktj-bright-blue);
}
.text-red {
color: var(--ktj-red);
}
/* Botones personalizados */
.btn-ktj-blue {
background-color: var(--ktj-bright-blue);
color: white;
border: none;
transition: all 0.3s ease;
}
.btn-ktj-blue:hover {
background-color: var(--ktj-medium-blue);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-ktj-red {
background-color: var(--ktj-red);
color: white;
border: none;
transition: all 0.3s ease;
}
.btn-ktj-red:hover {
background-color: #d32f2f; /* Rojo más oscuro */
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Benefits Section */
.benefit-card {
background: rgba(10, 59, 91, 0.7);
border-left: 4px solid var(--ktj-red);
transition: all 0.3s ease;
transform: translateY(0);
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
border-left: 8px solid var(--ktj-bright-blue);
background: rgba(10, 59, 91, 0.9);
}
.benefit-card img {
transition: all 0.3s ease;
}
.benefit-card:hover img {
transform: scale(1.1);
}
.benefit-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(10, 22, 34, 0) 0%, rgba(10, 59, 91, 0.3) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.benefit-card:hover .benefit-overlay {
opacity: 1;
}
.transition-all {
transition: all 0.3s ease;
}
/* Add more styles as sections are built */
/* Add more styles as sections are built */