/* CONTENEDOR PRINCIPAL */
.landing-contenedor {
    max-width: 900px;
    margin: 40px auto;
    text-align: center;
    padding: 20px;
}

/* LOGO */
.logo-kol {
    width: 140px;
    margin-bottom: 20px;
}

/* TITULO */
.landing-titulo {
    font-size: 32px;
    color: #252850;
    margin-bottom: 10px;
}

/* SUBTITULO */
.landing-subtitulo {
    font-size: 18px;
    color: #444;
    margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.landing-descripcion {
    font-size: 16px;
    color: #555;
    margin-bottom: 40px;
}

.landing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


/* TARJETAS */
.landing-tarjeta {
    background: white;
    border: 1px solid #D0AA65;
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    color: #252850;
    transition: 0.2s;
}

.landing-tarjeta:hover {
    background: #f9f4ea;
    transform: translateY(-3px);
}

/* ICONOS */
.tarjeta-icono {
    font-size: 40px;
    margin-bottom: 10px;
}
/* ===========================
   FOOTER
   =========================== */

.footer {
    width: 100%;
    background: #252850;
    padding: 10px 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    color: white;
    font-size: 14px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Izquierda */
.footer-copy {
    color: #D0AA65;
    font-size: 13px;
}

/* Derecha */
.footer-k2 {
    color: #D0AA65;
    font-size: 13px;
}
.header {
    width: 100%;
    background: #252850;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left,
.header-right {
    width: 80px; /* equilibrio visual */
    display: flex;
    justify-content: center;
}

.header-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.logo-kol {
    height: 45px;
    width: auto; /* mantiene proporción */
}
.logo-bsd {
    height: 35px;
    width: auto; /* mantiene proporción natural */
    opacity: 0.9; /* opcional: lo hace más elegante */
}


/* ===========================
   FONDO GENERAL
   =========================== */

body {
    background-color: #2F3A70; /* azul más claro que el header/footer */
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #D0AA65; /* texto oro */
}

/* ===========================
   TARJETAS DEL LANDING
   =========================== */

.landing-tarjeta {
    background: #f7f7f7; /* blanco suave */
    border: 1px solid #D0AA65;
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    color: #252850; /* texto interno azul oscuro */
    transition: 0.2s;
}

.landing-tarjeta:hover {
    background: #f0e9d9; /* beige suave */
    transform: translateY(-3px);
}

/* ===========================
   TITULOS Y TEXTOS
   =========================== */

.landing-titulo,
.landing-subtitulo,
.landing-descripcion {
    color: #D0AA65; /* oro institucional */
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
body {
    padding-top: 80px; /* ajusta según la altura real del header */
}
.header {
    border-bottom: 3px solid #D0AA65; /* línea oro */
}
.footer {
    border-top: 3px solid #D0AA65; /* línea oro */
}