/* =================================================================
   SEEM - TIPOGRAFIA
   Familias, pesos y escala tipografica.
   ================================================================= */

:root {
    /* === FAMILIAS TIPOGRAFICAS === */
    --seem-fuente-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --seem-fuente-mono: "iki-mono-variable",'JetBrains Mono', 'Fira Code', monospace;
    --seem-fuente-logo: 'bc-barell', 'Inter', sans-serif;
    --seem-fuente-titulos: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* === PESOS TIPOGRAFICOS === */
    --seem-peso-fino: 300;
    --seem-peso-regular: 400;
    --seem-peso-medio: 500;
    --seem-peso-negrita: 600;

    /* === ALTURAS DE LINEA === */
    --seem-alto-linea-apretado: 1.2;
    --seem-alto-linea-normal: 1.5;
    --seem-alto-linea-amplio: 1.7;

    /* === ESCALA TIPOGRAFICA === */
    --seem-texto-xs: 0.75rem;     /* 12px */
    --seem-texto-sm: 0.875rem;    /* 14px */
    --seem-texto-base: 1rem;      /* 16px */
    --seem-texto-md: 1.125rem;    /* 18px */
    --seem-texto-lg: 1.25rem;     /* 20px */
    --seem-texto-xl: 1.5rem;      /* 24px */
    --seem-texto-2xl: 1.875rem;   /* 30px */
    --seem-texto-3xl: 2rem;       /* 32px */
    --seem-texto-4xl: 2.5rem;     /* 40px */
}

/* =================================================================
   ESTILOS BASE DE ELEMENTOS TIPOGRAFICOS
   ================================================================= */

* {
    font-family: var(--seem-fuente-ui);
    font-weight: var(--seem-peso-regular);
    line-height: var(--seem-alto-linea-normal);
}

h1, h2, h3, h4, h5, h6,
.titulo {
    font-family: var(--seem-fuente-titulos);
    line-height: var(--seem-alto-linea-apretado);
    text-wrap: balance;
}

h1 {
    font-size: var(--seem-texto-4xl);
    font-weight: var(--seem-peso-negrita);
}

h2 {
    font-size: var(--seem-texto-3xl);
    font-weight: var(--seem-peso-regular);
}

h3 {
    font-size: var(--seem-texto-2xl);
    font-weight: var(--seem-peso-fino);
}

h4 {
    font-size: var(--seem-texto-xl);
    font-weight: var(--seem-peso-regular);
}

h5 {
    font-size: var(--seem-texto-lg);
    font-weight: var(--seem-peso-regular);
}

h6 {
    font-size: var(--seem-texto-base);
    font-weight: var(--seem-peso-negrita);
    text-transform: uppercase;
}

p {
    text-align: left;
    text-wrap: pretty;
}

b, strong, .negrita {
    font-weight: var(--seem-peso-negrita);
}

.fina {
    font-weight: var(--seem-peso-fino);
}

em, i, .italica {
    font-style: italic;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--seem-transicion-rapida, 150ms ease-in-out);
}

a:hover {
    color: var(--seem-color-acento);
}

ul, ol {
    padding-left: 1.5em;
}

li {
    margin-bottom: 0.5em;
}

blockquote {
    font-family: var(--seem-fuente-titulos);
    font-style: italic;
    font-size: var(--seem-texto-lg);
    padding-left: 1.5em;
    border-left: 2px solid var(--seem-color-gris-300);
}

code, pre {
    font-family: var(--seem-fuente-mono);
    font-size: var(--seem-texto-xs);
}

/* =================================================================
   CLASES UTILITARIAS TIPOGRAFICAS
   ================================================================= */

.etiqueta {
    display: block;
    font-size: var(--seem-texto-xs);
    font-weight: var(--seem-peso-negrita);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--seem-color-gris-600);
    margin-bottom: var(--seem-espacio-1);
}

.texto-mono {
    font-family: var(--seem-fuente-mono);
    font-size: var(--seem-texto-sm);
}

.subtitulo {
    font-size: var(--seem-texto-sm);
    color: var(--seem-color-gris-600);
}

::selection {
    background-color: var(--seem-color-acento);
    color: var(--seem-color-papel);
}

/* =================================================================
   RESPONSIVE MOVIL
   ================================================================= */
@media (max-width: 40em) {
    h1 {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    h2 {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    h3 {
        font-size: clamp(1.1rem, 4vw, 1.618rem);
    }

    h4 {
        font-size: var(--seem-texto-lg);
    }

    p {
        font-size: var(--seem-texto-base);
    }

    * {
        line-height: 1.4;
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: var(--seem-alto-linea-apretado);
    }
}

/* =================================================================
   MATERIAL SYMBOLS (ICONOS)
   ================================================================= */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 400;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v175/kJF4BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJU22ZZLsYEpzC_1ver5Y0.woff2) format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "aalt";
}