/*
 * Los tokens de diseño: la única fuente de valores visuales (FUNDAMENTALS §F).
 * check:tokens falla cualquier otra hoja que lleve un color, un tamaño de
 * fuente o una duración literales en vez de un var() de aquí.
 *
 * **Todo lo de este fichero sale del export del design system**
 * (`.agents/design/design_system/Sistema de Diseño.dc.html`, 2026-09-02).
 * ADAPTACION §0.11: ningún agente inventa un color ni una tipografía. Dos
 * salidas deliberadas de esa regla, las dos hacia arriba y las dos escritas:
 *
 *   1. Los tamaños van en rem, no en px. Con el tamaño de raíz por defecto el
 *      render es idéntico; cuando el lector ha subido la base de su navegador,
 *      rem lo respeta y px lo ignora en silencio.
 *   2. Tres colores del export no pasan 4.5:1 en el uso que les da el export, y
 *      se oscurecen hasta que pasan: el morado de marca como color de TEXTO
 *      (--color-accent-text), el verde de WhatsApp y el amarillo de las
 *      estrellas. Los originales se conservan para lo que sí aguantan, que es
 *      ser fondo de un botón con texto blanco. Es la misma operación que el
 *      scaffold hacía con sus acentos, y el motivo es el mismo: no se publica un
 *      par que no se puede probar. check:contrast es quien lo prueba.
 *
 * El nombre lleva carga:
 *   --color-*   lleva texto, o es un fondo sobre el que se pone texto. Se
 *               comprueba el contraste.
 *   --rule-*    filetes y separadores. No son borde de control, no se comprueban.
 *   --radius-*  las esquinas del export: 18 tarjeta, 32 bloque, 48 hoja, 999 píldora.
 *   --logo-*    la marca, hoy provisional.
 */

:root {
  /* ── Tipografía ──────────────────────────────────────────────────────── */
  /* Dos familias y ninguna más, las del export: Poppins para titulares, botones
     y etiquetas — es el eco del wordmark del logo — y Karla para el cuerpo.
     Autoalojadas en subset latino (fonts.css): el export las pedía a Google
     Fonts y eso es lo único suyo que no se puede portar, porque FUNDAMENTALS §B
     prohíbe una petición a terceros en el primer pintado.

     No hay una tercera familia. El scaffold traía una monoespaciada para las
     fechas y los metadatos; el export compone eso en Poppins en mayúsculas
     pequeñas, así que --font-meta es Poppins y no hay que descargar nada más. */
  --font-head: Poppins, "Helvetica Neue", Arial, sans-serif;
  --font-body: Karla, "Helvetica Neue", Arial, sans-serif;
  --font-meta: Poppins, "Helvetica Neue", Arial, sans-serif;
  /* El logotipo es provisional (partials/wordmark.njk): el nombre compuesto en
     la cara de titulares hasta que TASK-004 traiga el artwork vectorizado. */
  --font-wordmark: Poppins, "Helvetica Neue", Arial, sans-serif;

  /* Escala del export, en rem. A tamaño de raíz por defecto el render es el
     mismo; con la base subida por el lector, rem la respeta y px la ignora. */
  --size-hero: 2.75rem;
  --size-h1: 2.125rem;
  --size-h2: 1.5rem;
  --size-h3: 1.1875rem;
  --size-lead: 1.125rem;
  --size-quote: 1rem;
  --size-body: 1.0625rem;
  --size-list: 1rem;
  --size-small: 0.9375rem;
  --size-meta: 0.875rem;
  --size-ui: 0.8125rem;
  --size-eyebrow: 0.875rem;
  --size-wordmark: 1rem;
  /* La altura del logotipo de la cabecera. */
  --wordmark-height: 1.125rem;
  /* La marca real es un bloqueo horizontal: el círculo de puzzle y "OPEN MIND"
     al lado. A la altura del logotipo anterior (18px) la palabra deja de
     leerse, así que la marca tiene su propia altura. */
  --marca-height: 2.75rem;
  --marca-height-pie: 3.25rem;
  /* El recorte del retrato en el hero. Cuatro tercios: cabe la cara y los
     hombros sin que la foto empuje la ficha de datos fuera de la pantalla. */
  --ratio-retrato: 4 / 3;
  /* El ancho del distintivo del COP en el pie: cabe el nombre y el número sin
     que el sello pese más que la marca que tiene encima. */
  --sello-width: 18rem;
  /* La banda del proceso: panorámica de verdad, para que una ilustración de
     apoyo no empuje los pasos fuera de la pantalla. */
  --ratio-banda: 3 / 1;
  /* La ilustración de una tarjeta: apaisada y baja, para que la tarjeta sea
     sobre todo el texto y las tres de una fila midan lo mismo. */
  --ratio-tarjeta: 5 / 3;
  /* El retrato redondo del bloque "quién te atiende". */
  --retrato-width: 9rem;
  /* El ancho de una tarjeta del carril. Fijo a propósito: es lo que deja
     asomar la siguiente y cuenta que hay más. */
  --rail-card: 22rem;
  /* Lo mínimo que necesita una columna de texto para no partir palabras: por
     debajo de esto, se apila. */
  --measure-corto: 18rem;

  --leading-body: 1.6;
  --leading-tight: 1.15;
  --leading-hero: 1.15;
  --leading-snug: 1.5;
  --line-unit: 1.7rem;

  --track-head: -0.01em;
  --track-h2: -0.01em;
  --track-wordmark: -0.01em;
  --track-eyebrow: 0.08em;

  --weight-body: 400;
  --weight-strong: 600;
  --weight-bold: 700;

  /* ── Color ───────────────────────────────────────────────────────────── */
  /* Del export, literal. Los nombres describen el papel, no el tono: el día que
     la marca cambie de morado, cambia el valor y no doscientas reglas.

     Los dos morados del export (#7B5CF0 y su hover #6647D6) son colores de
     ACCIÓN sobre fondo claro: valen para un botón relleno con texto blanco, y
     no para texto morado sobre lavanda, que no llega a 4.5:1. Por eso hay un
     tercer morado, --color-accent-text, que es el que usa el texto de enlace y
     el único que check:contrast deja pasar contra los dos fondos claros. Es la
     misma operación que el scaffold hacía con sus acentos: bajar la
     luminosidad hasta que el par se prueba, y no publicar lo que no se prueba. */
  --color-ink: #2e2547;
  --color-body: #524a68;
  --color-dim: #524a68;
  --color-cite: #524a68;
  --color-muted: #635d73;
  --color-brand: #7b5cf0;
  --color-brand-strong: #6647d6;
  --color-accent: #5b3ac9;
  --color-accent-text: #5b3ac9;
  --color-whatsapp: #118038;
  --color-whatsapp-strong: #0e6f31;
  --color-star: #8a6400;

  --color-canvas: #fcfbfe;
  --color-lavender: #f3f0fc;
  --color-surface-home: #fcfbfe;
  --color-surface-servicios: #fcfbfe;
  --color-surface-contacto: #fcfbfe;
  --color-surface-charla: #fcfbfe;
  --color-surface-blog: #fcfbfe;
  --color-surface-post: #fcfbfe;

  --color-invert-bg: #2e2547;
  --color-invert-fg: #ffffff;
  --color-invert-dim: #cfc8e4;
  --color-invert-link: #b9a7ff;
  --color-invert-field: #3a3057;
  /* La línea que separa la barra legal del resto del pie. Un doceavo de blanco
     sobre la tinta violeta, que es como la dibuja el export: no es un borde de
     control y no se comprueba su contraste. */
  --rule-invert: rgba(255, 255, 255, 0.12);

  /* El tinte de la página. Lo pisa [data-surface]. El export pinta todas las
     páginas sobre el mismo fondo y usa la lavanda para bandas y secciones, no
     para páginas enteras: los seis tokens de arriba existen para que un
     [data-surface] siga siendo el punto donde eso se cambiaría. */
  --page-bg: var(--color-surface-home);

  /* ── Líneas y bordes ─────────────────────────────────────────────────── */
  /* El export dibuja tarjetas con borde fino y esquinas redondeadas, no la hoja
     reglada de 2px del scaffold. --rule-weight baja a 1px y los radios entran
     como tokens propios. */
  --rule-strong: #d9d2ee;
  --rule-hair: #f0ecfa;
  --rule-soft: #e8e4f4;
  --rule-field: #e8e4f4;
  --rule-tint: #e8e4f4;
  --rule-weight: 1px;
  --rule-hairline: 1px;

  /* ── Radios y sombra ─────────────────────────────────────────────────── */
  --radius-card: 18px;
  --radius-block: 32px;
  --radius-sheet: 48px;
  --radius-media: 28px;
  --radius-field: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 24px rgba(46, 37, 71, 0.05);
  --shadow-card-hover: 0 14px 32px rgba(123, 92, 240, 0.14);
  --shadow-action: 0 10px 24px rgba(123, 92, 240, 0.25);
  --shadow-whatsapp: 0 10px 24px rgba(37, 211, 102, 0.35);
  /* El degradado del hero: lavanda arriba, fondo abajo. Es lo que el export
     dibuja en la cabecera de las cuatro plantillas. */
  --hero-gradient: linear-gradient(180deg, var(--color-lavender) 0%, var(--color-canvas) 100%);

  /* ── La marca ─────────────────────────────────────────────────────────── */
  /* El logotipo real de Centro Open Mind es un PNG que hoy vive en el WordPress;
     traerlo vectorizado es lo único de TASK-004 que no se puede hacer desde el
     export, porque el export lo enlaza en vez de dibujarlo. Mientras tanto la
     marca hereda el morado de acción, que es lo que el export usa para ella. */
  --logo-rest: var(--color-brand);

  /* ── Space ────────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.375rem;
  --space-6: 1.75rem;
  --space-7: 2.125rem;
  --space-8: 2.5rem;
  --space-9: 3.5rem;
  --space-10: 5rem;
  --space-11: 6rem;

  /* The page gutter: the one inset every edge of the sheet is measured from.
     The masthead, the route bar, the page header, every section body, the
     colophon, the band and the blog table all read this and nothing else, so
     "the left edge of the page" is a single number rather than a convention
     eleven rules agree to honour. They did not: una página llegó a publicarse a 40px en
     phone while its own page header sat at 16, because a redundant
     `:not(.section--split)` override outranked the narrow-screen rule.

     It steps twice, and the steps are restated as literals in the two @media
     blocks below because a media query cannot read a custom property. */
  --gutter: var(--space-8);

  --rail-width: 17.5rem;
  --rail-narrow: 15rem;

  /* The blog index. Fixed outer tracks rather than proportional ones, because
     both hold one line of mono at a known width — an ISO date and "N min" — and
     a proportional column would grow the empty space beside them on a wide
     screen instead of giving it to the post. The header row and every post row
     read this same value; two templates that have to agree eventually do not.

     The gutter on its outer cells is --gutter itself, read directly. It used to
     be a --post-gutter of its own that stepped down at 60rem while the rest of
     the sheet stepped down at 30rem, so between those two widths the table sat
     18px left of the page header above it. */
  --post-tracks: 10.5rem minmax(0, 1fr) 8.25rem;
  /* Las tres anchuras del export, en px convertidos a rem: la hoja (1160),
     la columna de lectura (680) y la del hero centrado (820). */
  --page-width: 72.5rem;
  --measure: 42.5rem;
  --measure-lead: 51.25rem;
  --measure-hero: 37.5rem;

  /* A form is not prose and does not want the prose measure. Fields as wide as
     a paragraph make a short answer look like a mistake and drag the eye back
     across the whole sheet between one label and the next. Narrower than
     --measure-lead on purpose. */
  --measure-form: 34rem;

  /* One height for every control in the route bar. 1.75rem clears the 24px
     floor of WCAG 2.2 SC 2.5.8 with room to spare — the pager arrows used to
     come out at 20px, which did not. */
  --control-height: 2.75rem;
  /* The key cap in <kbd>. Sized against --control-height: it has to read as a
     key sitting inside the search button, not as a second control next to it. */
  --key-size: 1.0625rem;
  /* The drawn key cap in the bottom band, which is a different object from the
     <kbd> above: that one is a key named inside a sentence, this one is the
     picture of the key. 1.8125rem is 29px at the default root size, which is
     what the design export draws, and it is deliberately the largest control
     in the band — the point of the band is that the shortcut stops hiding in a
     13px label. Width only; the glyph keeps its own 40:42 ratio. */
  --keycap-width: 1.8125rem;

  /* The width below which the ruled sheet stacks. A media query cannot read a
     custom property, so the @media rules in site.css restate it as a literal;
     site.js reads it from here so at least the script and the tokens agree.
     Change it and the two @media (max-width: 60rem) blocks change with it. */
  --bp-narrow: 60rem;

  /* ── The social card ──────────────────────────────────────────────────── */
  /* 1200 × 630 is the Open Graph plate, and it is the one artefact in this
     repo measured in px on purpose: a PNG has no reader, no root font size and
     no preference to honour, so rem here would only be rem-shaped px. The
     card's own scale lives in tokens for the same reason everything else does
     — check:tokens holds og-card.css to the same rule as site.css, and a card
     that quietly stopped matching the site is the failure this prevents. */
  --og-width: 1200px;
  --og-height: 630px;
  /* The frame's inset from the plate edge, and the content's inset from the
     frame. Two values, because the rules run the full width of the frame and
     only their contents are indented. */
  --og-frame: 10px;
  --og-pad: 34px;
  --og-band: 96px;
  --og-band-foot: 108px;
  --og-mark: 44px;

  --size-og-title: 118px;
  --size-og-title-long: 80px;
  /* The logotype is sized by HEIGHT, not by font-size: it is vector now, and
     letting width drive it would make its weight change with the container.
     46px here puts it at ~331px wide, which is where the redesign draws it. */
  --og-wordmark-height: 46px;
  --size-og-summary: 22px;
  --size-og-meta: 14px;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  /* The key cap going down under a finger. Shorter than --motion-fast by half
     and verbatim from the design export's 0.07s: a key press is not a
     transition between two states of the interface, it is feedback, and
     feedback that takes 150ms reads as lag. It is the only duration in the
     sheet below --motion-fast, which is why it is named rather than folded in. */
  --motion-tap: 70ms;
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);

  /* The page transition, verbatim from the design export's `viewIn`:
     `0.42s cubic-bezier(0.22,0.61,0.36,1)` over `opacity 0→1` and
     `translateY(14px)→0`. A quick departure that settles rather than
     decelerating hard — --ease-enter is a much stronger curve and reads as a
     flourish at full-page scale, which is the opposite of what §D asks for.
     0.42s is --motion-slow, which is what that token was reserved for. */
  --ease-view: cubic-bezier(0.22, 0.61, 0.36, 1);
  --view-shift: 14px;
}

/* The two steps of --gutter. Here rather than in site.css because this is where
   the value is declared and a reader who finds the token should find its whole
   life in one place. 60rem is --bp-narrow, restated as a literal for the reason
   given there; 30rem is the width below which 22px of paper on each side is
   more than a phone can spare. */
@media (max-width: 60rem) {
  :root {
    --gutter: var(--space-5);
    /* La escala de titulares baja con la pantalla. No es estética: a 320px, que
       es lo que queda de un móvil al 400% de zoom, "Psiconutrición" a 44px no
       cabe y empuja la página hacia los lados. WCAG 1.4.10 lo prohíbe y
       `check:responsive` lo mide. */
    --size-hero: 2rem;
    --size-h1: 1.625rem;
    --size-h2: 1.3125rem;
  }
}

@media (max-width: 30rem) {
  :root {
    --gutter: var(--space-4);
    --size-hero: 1.75rem;
  }
}

/* Named page tints, one per entry type, straight from the export. */
[data-surface="home"] {
  --page-bg: var(--color-surface-home);
}
[data-surface="servicios"] {
  --page-bg: var(--color-surface-servicios);
}
[data-surface="contacto"] {
  --page-bg: var(--color-surface-contacto);
}
[data-surface="charla"] {
  --page-bg: var(--color-surface-charla);
}
[data-surface="blog"] {
  --page-bg: var(--color-surface-blog);
}
[data-surface="post"] {
  --page-bg: var(--color-surface-post);
}

/*
 * prefers-reduced-motion is honoured at the token layer, not per component.
 * Zeroing the durations here means no component can forget — per-component
 * compliance is the kind of thing that ends up 95% correct and therefore broken.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-tap: 0ms;
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * ── La paleta por servicio ──────────────────────────────────────────────────
 * Aquí vivía el espectro heredado del scaffold: un tono por página, generado
 * con una fórmula en OKLCH.
 * ADAPTACION §0.11 dice que la paleta del sitio sale del export del design
 * system, no de una fórmula: TASK-004 la deriva y vuelve a escribir esta
 * sección. Hasta entonces no hay tinte por servicio, y ninguna plantilla lo
 * pide: un token inventado es una decisión de diseño tomada en el teclado.
 */