/* fuente base */
html {
    font-size: 16px; /* 1rem = 17px */
}

/* Aplicación de fuentes y colores generales */
body {
    font-family: var(--primary-font, sans-serif);
    font-size: var(--text-base, 16px);
    background: var(--color-background-0, #13161c);
    color: var(--color-text-3, #ffffff);

}



/* Estilo para la barra de desplazamiento */
* {
    scrollbar-width: thin;  /* Hacer la barra de desplazamiento más delgada */
    scrollbar-color: var(--color-background-3) var(--color-background-0);  /* Color de la barra de desplazamiento y el fondo */
}

/* Estilo por defecto para pantallas pequeñas (mobile-first) */
.base-layout {
    width: 100%;
    margin: auto;
    max-width: 91%;
    display: grid;
    gap: 10px;
}

/* Estilos para pantallas medianas y grandes */
@media (min-width: 768px) {
    .base-layout {
        max-width: var(--page-max-width); 
    }
}



/* ----- button ----- */
button {
    cursor: pointer;
}














/******************************* BOTONES ********************************/

/* Estilos base para botones (mobile-first) */
.btn {
    background: var(--primary-color);        /* Color de fondo principal */
    color: beige;                            /* Color del texto */
    padding: 10px 30px;                      /* Espaciado dentro del botón */
    border-radius: 7px;                      /* Bordes redondeados */
    display: inline-block;                   /* Permite que los botones se alineen en línea */
    font-size: 1rem;                         /* Tamaño de fuente base */
    width: auto;                             /* El ancho será automático */
    text-align: center;                      /* Centra el texto */
    cursor: pointer;                        /* Hace que el cursor sea una mano cuando pasa por encima */
    transition: all 0.3s ease;               /* Transición suave para efectos de hover */
}

/* Estilo para botones más pequeños */
.btn-sm {
    font-size: .8rem;                        /* Fuente más pequeña */
    padding: 5px 20px;                       /* Espaciado dentro del botón reducido */
}

/* Efecto de hover para botones */
.btn:hover {
    filter: brightness(120%);                /* Aumenta el brillo cuando el botón se pasa por encima */
}

/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .btn {
        width: 100%;                         /* En móviles, los botones ocupan el 100% del ancho */
        padding: 12px 20px;                  /* Aumenta el padding para que los botones sean más grandes y fáciles de tocar */
    }

    .btn-sm {
        font-size: .9rem;                    /* Aumenta ligeramente el tamaño de la fuente en móviles */
        padding: 8px 25px;                   /* Padding ajustado para tamaños más pequeños */
    }
}

/* Estilos para pantallas medianas y grandes */
@media (min-width: 769px) {
    .btn {
        width: auto;                         /* Vuelve a tener un ancho automático en pantallas más grandes */
        padding: 10px 30px;                  /* Padding normal para pantallas más grandes */
    }

    .btn-sm {
        font-size: .8rem;                    /* Tamaño de fuente pequeño para botones */
        padding: 5px 20px;                   /* Padding reducido */
    }
}