@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --color-blueLogo: #6fbce6;
    --color-deepBlueLogos: #4d7f9c;
    --color-greenLogo: #81a761;
    --color-deepGreenLogos: #5a7245;
    --color-black: #000000;
    --color-white: #ffffff;

    --color-primary: #4d7f9c; /* El valor inicial se actualizará con JS */
    --color-secondary: #1f2120;
    --text-color: #aeb0b4;
    --color-light: #fff;
    --color-divider: #ffffff1a;
    --dark-color-divider: #0e110d;

    /* Fuentes */
    --default-font: 'Hanken Grotesk', sans-serif; /* Fallback a sans-serif genérico */

    /* Breakpoints */
    --breakpoint-xs: 375px; /* Extra small devices */
    --breakpoint-sm: 576px; /* Small devices (landscape phones) */
    --breakpoint-md: 768px; /* Medium devices (tablets) */
    --breakpoint-lg: 992px; /* Large devices (desktops) */
    --breakpoint-xl: 1200px; /* Extra large devices (large desktops) */
    --breakpoint-xxl: 1400px; /* Larger desktops */


/* Margenes */
            --card-border-radius: 0.75rem;
            --card-image-border-radius: 0.5rem;
            --card-spacing-unit: 1rem;
            --card-grid-gap: 1.5rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Desplazamiento suave. Soportado en Safari 15.4+. Se ignora en versiones anteriores. */
}

body {
    font-family: var(--default-font);
    color: var(--text-color);
    background-color: var(--color-secondary); /* Fondo base para evitar saltos de color */
    line-height: 1.6; /* Mejor legibilidad */
}

img {
    max-width: 100%; /* Base para imágenes responsivas */
    height: auto;
    display: block; /* Evita espacio extra debajo de las imágenes */
}

input,
button,
textarea,
select {
    font-family: var(--default-font);
    font-size: inherit; /* Heredar tamaño de fuente */
}

input,
button {
    border: none;
    outline: none;
}

ul {
    list-style: none; /* Quitar viñetas por defecto */
}

a {
    text-decoration: none; /* Quitar subrayado por defecto */
    color: inherit; /* Heredar color por defecto */
}

/* ******************************* */
/* UTILIDADES                      */
/* ******************************* */
.container {
    width: 100%; /* Ocupar todo el ancho disponible */
    max-width: var(--breakpoint-xl); /* Ancho máximo del contenedor */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Espaciado interno */
    padding-right: 15px; /* Espaciado interno */
}

.background-dark-1 {
    background-color: var(--dark-color-divider);
}

.background-dark-2 {
    background-color: var(--color-secondary);
}

.container-logo {
    display: flex;
    align-items: center;
    gap: 15px; 
    text-decoration: none;
}

.container-logo img {
    width: 40px; /* Ajustado para móviles */
    height: 40px;
    object-fit: cover;
}

.container-logo span {
    color: var(--color-light);
    font-size: 22px; /* Ajustado */
    font-weight: 600;
    white-space: nowrap; /* Evitar que el texto se rompa */
}

.btn {
    text-decoration: none;
    padding: 15px 25px; /* Ajustado ligeramente */
    text-transform: capitalize;
    border-radius: 50px; /* Usar un valor grande para píldora */
    display: inline-flex; /* Cambiado a inline-flex para mejor comportamiento en línea */
    align-items: center;
    justify-content: center; /* Centrar contenido del botón */
    gap: 10px; /* Soportado en Safari 14.1+. Considerar márgenes para versiones anteriores si es necesario. */
    font-weight: 700;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s; /* Transición más completa */
    cursor: pointer;
    border: none;
    line-height: 1.2; /* Asegurar que el texto no se corte */
}

.btn.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-light);
    /* position: relative; No parece necesario globalmente */
}

.btn.btn-primary:hover,
.btn.btn-primary:focus { /* Añadido :focus para accesibilidad */
    background-color: var(--color-light);
    color: var(--dark-color-divider);
}

.btn.btn-secondary {
    background-color: var(--color-light);
    color: var(--dark-color-divider);
    /* position: relative; No parece necesario globalmente */
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus { /* Añadido :focus para accesibilidad */
    background-color: var(--color-primary);
    color: var(--color-light);
}

.badge {
    color: var(--color-light);
    text-transform: uppercase;
    font-size: 13px; /* Ligeramente más pequeño para flexibilidad */
    letter-spacing: 1px;
    font-weight: 800;
    display: inline-flex; /* Para que se comporte bien con el texto */
    align-items: center;
    gap: 10px; /* Soportado en Safari 14.1+. Considerar márgenes para versiones anteriores si es necesario. */
}

.badge::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%; /* Círculo perfecto */
    background-color: var(--color-primary);
}

.title {
    font-size: 32px; /* Tamaño base para móviles */
    text-transform: uppercase;
    letter-spacing: -1px;
    font-weight: 800;
    color: var(--color-light);
    line-height: 1.2;
}

.title span {
    color: var(--color-primary);
}

section {
    padding-top: 60px; /* Espaciado base para móviles */
    padding-bottom: 60px;
}

/* Media Queries para estilos globales */

/* Medium devices (tablets, 768px and up) */
@media (min-width: var(--breakpoint-md)) {
    .container-logo {
        gap: 20px; /* Soportado en Safari 14.1+. */
    }
    .container-logo img {
        width: 50px;
        height: 50px;
    }
    .container-logo span {
        font-size: 26px;
    }

    .btn {
        padding: 17px 30px; /* Más padding en pantallas grandes */
    }
    
    .badge {
        font-size: 14px;
    }

    .title {
        font-size: 38px; /* Aumentar tamaño de título */
    }

    section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: var(--breakpoint-lg)) {
    .title {
        font-size: 42px;
    }
    section {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}