/* ==========================================================
   Proyecto v0.1
   Estilos Globales
   ========================================================== */

/* ---------- CONTENEDOR ---------- */

.container {
    width: min(100% - 32px, var(--container-width));
    margin-inline: auto;
}

/* ---------- BODY ---------- */

body {
    display: flex;
    flex-direction: column;
}

/* ---------- MAIN ---------- */

main {
    flex: 1;
}

/* ---------- HEADER ---------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: center;

    height: var(--header-height);

    border-bottom: 1px solid var(--color-border);
}

.site-logo {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.03em;
}

/* ---------- HERO ---------- */

.hero {
    padding: var(--space-8) 0;
    text-align: center;
}

.hero h1 {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);

    margin-bottom: var(--space-4);

    line-height: 1.1;
}

.hero p {
    max-width: 600px;

    margin-inline: auto;

    color: var(--color-text-light);

    font-size: var(--text-lg);
}

/* ---------- GRID ---------- */

.tool-grid {

    display: grid;

    gap: var(--space-4);

    margin-top: var(--space-7);

}

/* ---------- FOOTER ---------- */

.site-footer {

    padding: var(--space-6) 0;

    text-align: center;

    color: var(--color-text-light);

    font-size: var(--text-sm);

    border-top: 1px solid var(--color-border);

}

/* ---------- UTILIDADES ---------- */

.text-center {
    text-align: center;
}

.hidden {
    display: none;
}