/* ==========================================================================
   TIPOGRAFÍA - Fuentes del proyecto
   Fuentes: Poppins (principal), Roboto (secundaria), Open Sans (alternativa)
   Cargadas desde Google Fonts en el Layout
   ========================================================================== */

/* ----------------------------------------
   BASE
   ---------------------------------------- */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--fe-font-size-base);
}

body {
    font-family: var(--fe-font-primary);
    font-weight: 400;
    line-height: var(--fe-line-height);
    color: var(--fe-text-body);
}

/* ----------------------------------------
   HEADINGS
   ---------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--fe-font-primary);
    font-weight: 600;
    line-height: 1.3;
    color: var(--fe-secondary-light);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1, .h1 {
    font-size: 2.5rem;
    font-weight: 800;
}

h2, .h2 {
    font-size: 2rem;
    font-weight: 700;
}

h3, .h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

h4, .h4 {
    font-size: 1.25rem;
    font-weight: 600;
}

h5, .h5 {
    font-size: 1rem;
    font-weight: 500;
}

h6, .h6 {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ----------------------------------------
   PÁRRAFOS Y TEXTO
   ---------------------------------------- */
p {
    font-family: var(--fe-font-primary);
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 1rem;
}

.lead {
    font-size: 1.125rem;
    font-weight: 500;
}

small, .small {
    font-size: 0.875rem;
}

/* ----------------------------------------
   ENLACES
   ---------------------------------------- */
a {
    color: var(--fe-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--fe-transition-fast);
}

a:hover {
    color: var(--fe-primary-dark);
    text-decoration: none;
}

a:focus {
    outline: 2px solid var(--fe-primary);
    outline-offset: 2px;
}

/* ----------------------------------------
   LISTAS
   ---------------------------------------- */
ul, ol {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

ul ul, ul ol, ol ul, ol ol {
    margin-bottom: 0;
}

/* ----------------------------------------
   CLASES DE TEXTO UTILITARIAS
   ---------------------------------------- */
.text-primary { color: var(--fe-primary) !important; }
.text-secondary { color: var(--fe-secondary) !important; }
.text-dark { color: var(--fe-text-dark) !important; }
.text-muted { color: var(--fe-text-muted) !important; }
.text-light { color: var(--fe-text-light) !important; }
.text-white { color: #fff !important; }

.text-success { color: var(--fe-success) !important; }
.text-warning { color: var(--fe-warning) !important; }
.text-danger { color: var(--fe-danger) !important; }
.text-info { color: var(--fe-info) !important; }

/* Color verde del proyecto */
.tx-green,
.h5-green,
.icon-green span {
    color: var(--fe-primary-light) !important;
}

/* ----------------------------------------
   FONT WEIGHTS
   ---------------------------------------- */
.fw-regular { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.fw-extrabold { font-weight: 800; }

/* ----------------------------------------
   RESPONSIVE TYPOGRAPHY
   ---------------------------------------- */
@media (max-width: 991.98px) {
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.75rem; }
    h3, .h3 { font-size: 1.35rem; }
}

@media (max-width: 767.98px) {
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
}
