/**
 * BASE / TYPOGRAPHY
 * -----------------------------------------------------------------------------
 * Poppins para titulares, DM Sans para texto corrido.
 * Los títulos de sección con estilo propio viven en components/section-heading.
 */

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--heading);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.3px;
}

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

/*
 * Aire entre párrafos consecutivos. Se limita a hermanos directos para no
 * alterar las tarjetas, que llevan su propio espaciado.
 */
p + p {
    margin-top: var(--space-sm);
}

/* --- Énfasis en color dentro de un título ------------------------------ */

h1 em,
h2 em,
h3 em,
.text-accent {
    font-style: normal;
    color: var(--blue);
}

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

small {
    font-size: var(--fs-sm);
}

blockquote {
    border-left: 3px solid var(--blue);
    padding-left: var(--space-md);
    color: var(--text-strong);
    font-style: italic;
}

code,
pre {
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: var(--fs-base);
}

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

::selection {
    background: var(--blue);
    color: var(--white);
}

/* =============================================================
   INVERSIÓN SOBRE FONDO OSCURO
   Cualquier bloque con .is-dark reajusta sus colores de texto.
============================================================= */

.is-dark {
    color: var(--on-dark);
}

.is-dark h1,
.is-dark h2,
.is-dark h3,
.is-dark h4,
.is-dark strong {
    color: var(--white);
}

.is-dark p {
    color: var(--on-dark-muted);
}

.is-dark h1 em,
.is-dark h2 em,
.is-dark h3 em,
.is-dark .text-accent {
    color: var(--blue-light);
}

/* =============================================================
   CONTENIDO EDITORIAL (the_content)
============================================================= */

.entry-content > * + * {
    margin-top: var(--space-md);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: var(--space-lg);
}

.entry-content ul,
.entry-content ol {
    padding-left: var(--space-md);
}

.entry-content ul li {
    list-style: none;
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-xs);
}

.entry-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    background: var(--blue);
}

.entry-content ol {
    list-style: decimal;
}

.entry-content ol li {
    margin-bottom: var(--space-xs);
    padding-left: var(--space-2xs);
}

/*
 * `:not(.btn)`: WooCommerce marca como `entry-content` los paneles de las
 * pestañas del producto, y sin esa exclusión los botones que viven ahí dentro
 * heredaban color y subrayado de enlace (un botón azul con texto azul se
 * quedaba ilegible).
 */
.entry-content a:not(.btn) {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}