:root {
    /* Texto */
    --body-color-primary:    #173e5d;
    --body-color-secondary:  #6b7280;
    --body-color-secondary-rgb: 107, 114, 128;

    /* Tipografía */
    --body-font-family:      'Inter', sans-serif;
    --body-font-weight:      400;
    --heading-font-family:   'Inter', sans-serif;
    --heading-font-weight:   700;
    --heading-secondary-font-weight: 600;
    --bold-font-weight:      700;

    /* Fondos */
    --body-bg:               #ffffff;
    --color-white:           #ffffff;
    --color-white-rgb:       255, 255, 255;
    --color-black:           #0f1c2e;
    --color-black-rgb:       15, 28, 46;
    --color-light-gray:      #f4f6fa;
    --color-light-gray-rgb:  244, 246, 250;
    --color-surface:         #eef3f9;

    /* Azul corporativo */
    --color-primary:         #1d4b6d;
    --color-primary-rgb:     29, 75, 109;
    --color-primary-dark:    #142d56;

    /* Azul CTA */
    --color-accent:          #247ceb;
    --color-accent-rgb:      36, 124, 235;
    --color-accent-light:    #e8f1fd;
    --color-secondary:       var(--color-accent);
    --color-secondary-rgb:   var(--color-accent-rgb);
    --color-secondary-dark:  #1a5cc0;

    /* Bordes */
    --color-border:          #e8edf4;

    /* Botones */
    --btn-padding-x:         1.75rem;
    --btn-padding-y:         0.8rem;

    /* UI */
    --transition:            all 0.25s ease;
    --header-height:         88px;
    --border-radius:         12px;
    --border-radius-sm:      8px;

    /* Gradiente hero */
    --main-gradient:         linear-gradient(135deg, #1d4b6d 0%, #247ceb 100%);

    /* Cards */
    --card-padding:          2rem;
    --card-title-size:       1.1rem;
    --card-title-margin-bottom: 0.65rem;
    --card-description-size: 0.95rem;
    --card-shadow-md:        0 4px 20px rgba(29, 75, 109, 0.07);
    --card-shadow-lg:        0 16px 40px rgba(29, 75, 109, 0.12);
    --card-hover-translate-y: -6px;
    --hover-up-translate-y:  -4px;
    --hover-up-shadow-lg:    0 12px 28px rgba(29, 75, 109, 0.10);

    /* Misc */
    --font-size-small:       0.875rem;
    --section-padding-y:     5.5rem;
    --footer-padding:        4rem;
    --footer-item-margin:    2rem;
    --footer-item-opacity:   0.75;

    /* Bootstrap overrides */
    --bs-body-color:         var(--body-color-primary);
    --bs-secondary-rgb:      var(--body-color-secondary-rgb);
    --bs-body-font-family:   var(--body-font-family);
    --bs-body-font-weight:   var(--body-font-weight);
    --bs-body-bg:            var(--body-bg);
    --bs-secondary-bg-rgb:   var(--color-light-gray-rgb);
    --bs-heading-font-family: var(--heading-font-family);
    --bs-heading-font-weight: var(--heading-font-weight);
    --bs-link-hover-color-rgb: var(--color-accent-rgb);
    --bs-primary-rgb:        var(--color-primary-rgb);
}

/* Base */
body {
    font-family: var(--body-font-family);
    color: var(--body-color-primary);
    background-color: var(--body-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

/* Secciones */
.section-padding {
    padding: var(--section-padding-y) 0;
}

.section-white {
    background-color: var(--color-white);
}

.section-alt {
    background-color: var(--color-light-gray);
}

.section-surface {
    background-color: var(--color-surface);
}

/* Dark/darker clases — redirigen a claro */
.section-dark    { background-color: var(--color-light-gray); }
.section-darker  { background-color: var(--color-surface); }

/* Encabezados de sección */
.section-intro {
    max-width: 640px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--body-color-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}

/* Utils */
.text-accent {
    color: var(--color-accent);
}

.hover-up {
    transition: var(--transition);
}

.hover-up:hover {
    transform: translateY(var(--hover-up-translate-y));
    box-shadow: var(--hover-up-shadow-lg);
}

/* Responsive */
@media (max-width: 767.98px) {
    :root {
        --section-padding-y: 4rem;
        --header-height:     72px;
    }
}