/* ==========================================================================
   declar.ar — Tema global del sitio (rediseño 2026-09, estética "lattice" clara)
   Lo carga includes/site-header.php en TODAS las páginas, después de styles.min.css.
   - Tokens --dc-* (fondo #fafcff, tinta #12161f, azul #242c4f, bordes #dadee6)
   - Manrope (self-hosted) + IBM Plex Mono para etiquetas
   - Líneas verticales del marco de 1200px
   - Ajustes de páginas con layout viejo (blog, legales, novedades, formularios)
   ========================================================================== */

/* ---- Fuentes ---- */
@font-face {
    font-family: 'Manrope';
    src: url('/fonts/manrope/Manrope-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/plex-mono/IBMPlexMono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/plex-mono/IBMPlexMono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/plex-mono/IBMPlexMono-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ---- Tokens ---- */
:root {
    --dc-bg: #fafcff;
    --dc-card: #ffffff;
    --dc-fg: #12161f;
    --dc-body: #3a404b;
    --dc-muted-fg: #555b66;
    --dc-subtle: #7a808c;
    --dc-muted: #eef2fa;
    --dc-hover: #f3f6fc;
    --dc-border: #dadee6;
    --dc-primary: #242c4f;
    --dc-primary-dark: #1a2039;
    --dc-sans: 'Manrope', system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --dc-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --dc-frame: 1400px;

    /* Variables del CSS viejo (styles.min.css) apuntando al tema nuevo */
    --font-family-text: var(--dc-sans);
    --font-family-heading: var(--dc-sans);
    --font-family-button: var(--dc-sans);
    --font-family-footer: var(--dc-sans);
    --font-family: var(--dc-sans);
    --color-primary: #242c4f;
    --color-primary-dark: #1a2039;
    --color-primary-light: #eef2fa;
    --color-text: #12161f;
    --color-text-light: #555b66;
    --color-text-lighter: #7a808c;
    --color-bg: #fafcff;
    --color-bg-light: #eef2fa;
    --color-border: #dadee6;
}

body {
    background: var(--dc-bg);
    font-family: var(--dc-sans);
    color: var(--dc-fg);
}
::selection { background: var(--dc-primary); color: #fff; }

/* ---- Marco: líneas verticales a los lados de la columna de 1400px ---- */
.dc-frame-lines {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(var(--dc-frame), 100%);
    transform: translateX(-50%);
    border-left: 1px solid var(--dc-border);
    border-right: 1px solid var(--dc-border);
    pointer-events: none;
    z-index: 6;
}
@media (max-width: 1439px) {
    .dc-frame-lines { display: none; }
}

/* ==========================================================================
   Páginas con layout viejo
   ========================================================================== */

/* Botones legacy: rectos */
.btn { border-radius: 3px; font-family: var(--dc-sans); }
.btn-primary { background: var(--dc-primary); color: #fff; }
.btn-primary:hover { background: var(--dc-primary-dark); color: #fff; }

/* ---- Blog: listado ---- */
.blog-listing { background: var(--dc-bg); }
.blog-listing-header h1,
.blog-article h1 {
    font-size: clamp(34px, 4.6vw, 52px);
    font-weight: 300;
    letter-spacing: -0.032em;
    line-height: 1.06;
    color: var(--dc-fg);
    text-wrap: balance;
}
.blog-listing-header p { color: var(--dc-muted-fg); }
.blog-grid,
.blog-related-grid {
    gap: 1px;
    background: var(--dc-border);
    border: 1px solid var(--dc-border);
}
.blog-card,
.blog-related-card {
    border: 0;
    border-radius: 0;
    background: var(--dc-bg);
    transition: background .2s ease;
}
.blog-card:hover,
.blog-related-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    background: var(--dc-hover);
}
.blog-card-title,
.blog-related-card-title { font-weight: 500; letter-spacing: -0.015em; color: var(--dc-fg); }
.blog-card-description,
.blog-related-card-desc { color: var(--dc-muted-fg); }
.blog-card-meta,
.blog-related-card-meta,
.blog-meta {
    font-family: var(--dc-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--dc-subtle);
}
.blog-related-title { font-weight: 300; letter-spacing: -0.03em; }
/* Listado a todo el ancho del marco, igual que /novedades/ */
.blog-listing { --bl-pad-x: 56px; }
.blog-listing .container { max-width: var(--dc-frame); padding-left: 0; padding-right: 0; }
.blog-listing-header { padding-left: var(--bl-pad-x); padding-right: var(--bl-pad-x); }
.blog-listing .blog-card { padding: 32px var(--bl-pad-x); }
@media (max-width: 560px) {
    .blog-listing { --bl-pad-x: 20px; }
}

/* ---- Blog: artículo ---- */
.blog-article { background: var(--dc-bg); }
.blog-breadcrumb a { color: var(--dc-primary); }
.blog-body h2 { font-weight: 400; letter-spacing: -0.025em; color: var(--dc-fg); }
.blog-body h3 { font-weight: 500; letter-spacing: -0.015em; color: var(--dc-fg); }
.blog-body p,
.blog-body li { color: var(--dc-body); }
.blog-body a { color: var(--dc-primary); }
.blog-body table { border-radius: 0; }
.blog-body pre { border-radius: 4px; }
.blog-body code { border-radius: 3px; }
.blog-cta {
    background: var(--dc-card);
    border: 1px solid var(--dc-border);
    border-radius: 0;
    text-align: left;
    padding: 40px;
}
.blog-cta h3 {
    color: var(--dc-fg);
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 300;
    letter-spacing: -0.03em;
}
.blog-cta p { color: var(--dc-muted-fg); margin: 0 0 24px; }
.blog-cta .btn-primary { background: var(--dc-primary); color: #fff; }
.blog-cta .btn-primary:hover { background: var(--dc-primary-dark); color: #fff; }

/* ---- Legales y páginas informativas ---- */
.terms-static {
    --terms-link: var(--dc-primary);
    --terms-text: var(--dc-body);
    --terms-heading: var(--dc-fg);
    background: var(--dc-bg);
    font-family: var(--dc-sans);
}
.terms-static h1 {
    font-family: var(--dc-sans);
    font-size: clamp(32px, 4.4vw, 48px);
    font-weight: 300;
    letter-spacing: -0.032em;
    line-height: 1.08;
}
.terms-static h2 { font-family: var(--dc-sans); font-weight: 500; letter-spacing: -0.02em; }
.terms-static h3 { font-family: var(--dc-sans); font-weight: 600; }
.terms-static input,
.terms-static select,
.terms-static textarea { border-radius: 3px; font-family: var(--dc-sans); }
.terms-static button { border-radius: 3px; font-family: var(--dc-sans); }

/* ---- Novedades ---- */
.nv-list-wrap h1,
.nv-article h1 {
    color: var(--dc-fg) !important;
    font-size: clamp(32px, 4.4vw, 46px);
    font-weight: 300;
    letter-spacing: -0.032em;
    line-height: 1.08;
}
.nv-list-wrap > p { color: var(--dc-muted-fg) !important; }
/* Listado a todo el ancho del marco: las tarjetas van de línea a línea */
.nv-list-wrap {
    --nv-pad-x: 56px;
    max-width: var(--dc-frame);
    padding-left: 0;
    padding-right: 0;
}
.nv-list-wrap > h1,
.nv-list-wrap > p { padding-left: var(--nv-pad-x); padding-right: var(--nv-pad-x); }
.nv-list-wrap > .nv-search { display: block; width: calc(100% - 2 * var(--nv-pad-x)); margin-left: var(--nv-pad-x); margin-right: var(--nv-pad-x); }
.nv-list-wrap .nv-card { padding: 28px var(--nv-pad-x); gap: 24px; }
.nv-list-wrap .nv-card > span { flex: 1; min-width: 0; }
/* El extracto llena el ancho y se corta a dos líneas */
.nv-list-wrap .nv-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 560px) {
    .nv-list-wrap { --nv-pad-x: 20px; }
}
.nv-search { border-radius: 3px; border-color: var(--dc-border); background: var(--dc-card); font-family: var(--dc-sans); }
.nv-card {
    border-radius: 0;
    border-color: var(--dc-border);
    background: var(--dc-bg);
    margin-bottom: -1px;
    transition: background .2s ease;
}
.nv-card:hover { box-shadow: none; background: var(--dc-hover); }
.nv-card img { border-radius: 4px; }
.nv-card h2 { color: var(--dc-fg); font-weight: 500; letter-spacing: -0.015em; }
.nv-card time { font-family: var(--dc-mono); color: var(--dc-subtle); letter-spacing: 0.04em; }
.nv-card p { color: var(--dc-muted-fg); }
.nv-eyebrow { font-family: var(--dc-mono); font-weight: 500; color: var(--dc-primary); }
.nv-rich { color: var(--dc-body); }
.nv-rich h1, .nv-rich h2, .nv-rich h3, .nv-rich h4 { color: var(--dc-fg); font-weight: 500; }
.nv-rich strong, .nv-rich b { color: var(--dc-fg); }
.nv-rich a, .nv-back { color: var(--dc-primary); }
.nv-rich img, .nv-rich iframe { border-radius: 4px; }