/* =========================================================================
 * WSSF · Base typography & layout
 * ========================================================================= */

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-base);
    font-weight: var(--sf-fw-regular);
    line-height: var(--sf-lh-normal);
    color: var(--sf-text);
    background-color: var(--sf-bg);
    min-height: 100vh;
    min-height: 100svh;
}

/* ----- Headings ----- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sf-font-sans);
    font-weight: var(--sf-fw-semibold);
    line-height: var(--sf-lh-tight);
    color: var(--sf-text);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--sf-text-3xl); font-weight: var(--sf-fw-bold);     letter-spacing: -0.02em; }
h2 { font-size: var(--sf-text-2xl); font-weight: var(--sf-fw-semibold); letter-spacing: -0.015em; }
h3 { font-size: var(--sf-text-xl);  font-weight: var(--sf-fw-semibold); }
h4 { font-size: var(--sf-text-lg);  font-weight: var(--sf-fw-semibold); }
h5 { font-size: var(--sf-text-base);font-weight: var(--sf-fw-semibold); }
h6 { font-size: var(--sf-text-sm);  font-weight: var(--sf-fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; }

/* ----- Texto ----- */

p { margin: 0; line-height: var(--sf-lh-relaxed); }
p + p { margin-top: var(--sf-space-3); }

small { font-size: var(--sf-text-sm); color: var(--sf-text-muted); }

strong, b { font-weight: var(--sf-fw-semibold); }

a {
    color: var(--sf-primary-700);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--sf-duration-fast) var(--sf-ease);
}
a:hover { color: var(--sf-primary-800); }

code, kbd, samp, pre {
    font-family: var(--sf-font-mono);
    font-size: 0.9em;
    background: var(--sf-bg-alt);
    border-radius: var(--sf-radius-xs);
    padding: 0.1em 0.3em;
}

pre {
    padding: var(--sf-space-3);
    overflow-x: auto;
    line-height: var(--sf-lh-snug);
}

hr {
    border: 0;
    border-top: 1px solid var(--sf-border);
    margin: var(--sf-space-8) 0;
}

blockquote {
    border-left: 3px solid var(--sf-primary-500);
    padding-left: var(--sf-space-4);
    color: var(--sf-text-muted);
    font-style: italic;
}

/* ----- Tablas base ----- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sf-text-sm);
}

th, td {
    text-align: left;
    padding: var(--sf-space-3) var(--sf-space-4);
    border-bottom: 1px solid var(--sf-border-soft);
}

th {
    font-weight: var(--sf-fw-semibold);
    color: var(--sf-text-muted);
    font-size: var(--sf-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--sf-bg-alt);
}

/* ----- Layout containers ----- */

.wssf-container {
    width: 100%;
    max-width: var(--sf-max-width);
    margin-inline: auto;
    padding-inline: var(--sf-space-4);
}

@media (min-width: 768px) {
    .wssf-container { padding-inline: var(--sf-space-6); }
}

@media (min-width: 1280px) {
    .wssf-container { padding-inline: var(--sf-space-8); }
}

.wssf-narrow {
    max-width: var(--sf-content-width);
    margin-inline: auto;
}

/* ----- Stack utility (vertical rhythm consistente) ----- */

.wssf-stack > * + * { margin-top: var(--sf-space-4); }
.wssf-stack-sm > * + * { margin-top: var(--sf-space-2); }
.wssf-stack-lg > * + * { margin-top: var(--sf-space-8); }

/* ----- Cluster utility (flex wrap horizontal con gap) ----- */

.wssf-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-3);
    align-items: center;
}

/* ----- Grid responsive base ----- */

.wssf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--sf-space-4);
}

/* ----- Media: imágenes responsivas con lazy ----- */

.wssf-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.wssf-img-square { aspect-ratio: 1 / 1; }
.wssf-img-16-9   { aspect-ratio: 16 / 9; }
.wssf-img-4-3    { aspect-ratio: 4 / 3; }

/* ----- Texto helpers ----- */

.wssf-text-muted   { color: var(--sf-text-muted); }
.wssf-text-subtle  { color: var(--sf-text-subtle); }
.wssf-text-invert  { color: var(--sf-text-invert); }

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

.wssf-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wssf-text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wssf-text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}