@layer base;

/* ═══════════════════════════════════════════════════════════════
   CAPA 2: BASE
   Reset moderno y estilos de etiquetas HTML.
   Aquí se estiliza el contenido que viene del editor.
   ─────────────────────────────────────────────────────────── */

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

/* ── HTML y body ──────────────────────────────────────────── */
html {
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    font-size: inherit;
    line-height: inherit;
    font-weight: var(--body-font-weight);
    color: var(--color-body);
    background-color: var(--color-surface);
    /* Sin `overflow-x: hidden/clip`: el desbordamiento horizontal derecho se
       corrige en su origen (logo móvil de ancho fijo y URLs largas del
       contenido), no se enmascara con un recorte global. */
}

/* ── Encabezados ──────────────────────────────────────────── */
h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-font-weight);
    color: var(--color-heading);
}

h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    text-transform: var(--h2-text-transform);
    letter-spacing: var(--h2-letter-spacing);
    font-weight: var(--h2-font-weight);
    color: var(--color-heading);
}

h3 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    text-transform: var(--h3-text-transform);
    letter-spacing: var(--h3-letter-spacing);
    font-weight: var(--h3-font-weight);
    color: var(--color-heading);
}

h4 {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    font-weight: var(--h4-font-weight);
    color: var(--color-heading);
}

h5 {
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
    text-transform: var(--h5-text-transform);
    letter-spacing: var(--h5-letter-spacing);
    font-weight: var(--h5-font-weight);
    color: var(--color-heading);
}

h6 {
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    text-transform: var(--h6-text-transform);
    letter-spacing: var(--h6-letter-spacing);
    font-weight: var(--h6-font-weight);
    color: var(--color-heading);
}

/* ── Párrafos ─────────────────────────────────────────────── */
p {
    color: var(--color-text);
}

p a {
    color: var(--color-link);
}

p a:hover {
    color: var(--color-link-hover);
}

/* ── Enlaces ──────────────────────────────────────────────── */
a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-easing);
}

a:hover {
    color: var(--color-link-hover);
}

a:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
}

/* ── Listas ───────────────────────────────────────────────── */
ul,
ol {
    padding-left: 1.5em;
}

li {
    line-height: var(--body-line-height);
}

/* ── Figure e imágenes ────────────────────────────────────── */
figure {
    display: block;
    max-width: 100%;
    height: auto;
}

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

figcaption {
    font-size: var(--caption-font-size);
    color: var(--color-body);
}

/* ── Separador ────────────────────────────────────────────── */
hr {
    border: none;
    border-top: var(--border-width) solid var(--color-primary);
    margin: 2em 0;
}

/* ── Formularios ──────────────────────────────────────────── */
input,
textarea,
select {
    font-family: var(--font-base);
    font-size: var(--body-font-size);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5em;
}

button {
    font-family: var(--font-base);
    cursor: pointer;
}

/* ── Foco visible global ─────────────────────────────────── */
:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
}

/* ── Selección de texto ──────────────────────────────────── */
::selection {
    background: var(--color-accent);
    color: var(--color-surface);
}