:root {
    --bs-font-sans-serif: "Work Sans", sans-serif;
}

:root[data-bs-theme="light"] {
    --brand-primary: #13ec80;
    --brand-secondary: #102219;
    --brand-bg-light: #f6f8f7;
    --brand-bg-dark: #102219;
    --brand-text-dark: #0d1b14;
    --brand-text-light: #fff;
    --brand-card: #FFF;
}

:root[data-bs-theme="dark"]{
    --brand-primary: #13ec80;
    --brand-secondary: #FFF;
    --brand-bg-dark: #121212;
    --brand-text-dark: #121212;
    --brand-text-light: #fff;
    --brand-card: #1e1e1e;
}

body {
    background-color: var(--brand-bg-light);
    color: var(--brand-text-dark);
}

a {
    text-decoration: none;
}

/* Clases de utilidad personalizadas para el color de marca */
.text-brand { color: var(--brand-primary) !important; }
.bg-brand { background-color: var(--brand-primary) !important; }
.border-brand { border-color: var(--brand-primary) !important; }

.bg-brand.text-brand { color: var(--brand-text-dark) !important; }


/**/
.text-brand > .icon {
    color:var(--brand-primary);
}

/* Botones personalizados */
.btn-brand {
    background-color: var(--brand-primary);
    color: var(--brand-text-dark);
    font-weight: 700;
    border: none;
}
.btn-brand:hover {
    filter: brightness(1.05);
    color: var(--brand-text-light);
}

[data-bs-theme="light"] .btn:hover {
    color: var(--brand-text-dark);
}

[data-bs-theme="dark"] .btn:hover {
    color: var(--brand-text-light);
}

/* Utilidades de recorte de texto (Line Clamp no es nativo en BS5.3 puro) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ajustes de Navbar */
[data-bs-theme="light"] .navbar {
    backdrop-filter: blur(12px);
    background-color: rgba(246, 248, 247, 0.9);
    border-bottom: 1px solid #e7f3ed;
}

[data-bs-theme="dark"] .navbar {
    backdrop-filter: blur(12px);
    background-color: rgba(18, 18, 18, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Cards con imagen de fondo */
.bg-card-custom {
    background-color: var(--brand-card) !important;
}

.bg-card-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
}

.card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}
[data-bs-theme="light"] .card:hover {
    border-color: rgba(0, 229, 255, 0.3);
}
[data-bs-theme="dark"] .card:hover {
    border-color: rgba(0, 229, 255, 0.3);
}

/* Gradientes para las tarjetas hero */
.hero-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%);
}

.hero-overlay-sm {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.article-content p {
    margin-bottom: 1.5rem;
    line-height: 1.75;
    font-size: 1.125rem;
    color: #2d3748;
}
.article-content h2 {
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-content img {
    max-width: 100%;
}

.bg-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cursor-pointer {
    cursor: pointer;
}

[data-bs-theme="light"] .bg-footer {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}
[data-bs-theme="dark"] .bg-footer {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.text-normal {
    color: var(--brand-secondary)
}

.custom-article {
    box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 50px rgba(0, 0, 0, 0.5);
    border-color: rgb(255 255 255 / 0.05);
}