/* =========================================================
   EL ARCHIVO DE LAS HISTORIAS INFINITAS
   Archivo: base.css
   Función: Reset y estilos globales
   ========================================================= */


/* =========================
   RESET GLOBAL
   ========================= */

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


/* =========================
   DOCUMENTO
   ========================= */

    html {
        scroll-behavior: smooth;
        font-size: 16px;
    }

    body {
        min-height: 100vh;

        background-color: var(--bg-main);

        color: var(--text-main);

        font-family: var(--font-body);
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.6;

        overflow-x: hidden;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }


/* =========================
   TIPOGRAFÍAS
   ========================= */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-title);
        font-weight: 600;
        line-height: 1.2;
        color: var(--text-main);
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.35rem;
    }

    h5 {
        font-size: 1.15rem;
    }

    h6 {
        font-size: 1rem;
    }

    p {
        color: var(--text-secondary);
    }


/* =========================
   TEXTO ESPECIAL
   ========================= */

    .logo-text {
        font-family: var(--font-logo);
    }

    .decorative-text {
        font-family: var(--font-decorative);
    }


/* =========================
   ENLACES
   ========================= */

    a {
        color: var(--accent-main);
        text-decoration: none;
        transition: var(--transition-base);
    }

    a:hover {
        color: var(--accent-soft);
    }


/* =========================
   LISTAS
   ========================= */

    ul,
    ol {
        list-style: none;
    }


/* =========================
   IMÁGENES
   ========================= */

    img {
        display: block;
        max-width: 100%;
        height: auto;
    }


/* =========================
   FORMULARIOS
   ========================= */

    input,
    textarea,
    select,
    button {
        font: inherit;
    }

    button {
        background: none;
        border: none;
        cursor: pointer;
    }


/* =========================
   TABLAS
   ========================= */

    table {
        border-collapse: collapse;
        width: 100%;
    }


/* =========================
   SELECCIÓN DE TEXTO
   ========================= */

    ::selection {
        background-color: var(--accent-main);
        color: var(--color-black);
    }


/* =========================
   SCROLLBAR
   ========================= */

    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: var(--color-obsidian);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-charcoal);
        border-radius: var(--radius-full);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-slate);
    }