/* ==========================================================================
   Tender la Mano · Fase 2 · re-vestido de las páginas existentes
   (blog generado por n8n, fichas de eventos, cancelar, sugerencias, legales).
   Se carga DESPUÉS de styles.css (y de eventos.css en las fichas) y solo
   reasigna sus variables a los tokens de la dirección A «Constelación»:
   fondo claro, carbón, UN acento verde profundo, Figtree. El marcado, los
   textos y los ganchos que lee main.js no cambian.
   El hero de las fichas pasa a gris oscuro (v3 aprobada por María, 10/10):
   mismas estrellas, sin azul.
   ========================================================================== */

/* ---------- 1) Tokens heredados -> dirección A (página clara) ---------- */
body.tlm-legado,
body.tlm-legado.evento-page {
  --color-bg: var(--c-bg);
  --color-surface: var(--c-bg);
  --color-surface-tint: var(--c-surface);
  --color-surface-tint-warm: var(--c-surface);
  --color-ink: var(--c-ink);
  --color-ink-muted: var(--c-ink-2);
  --color-ink-soft: var(--c-ink-2);
  --color-ink-on-dark: oklch(0.97 0 0);
  --color-ink-muted-on-dark: oklch(0.86 0 0);
  --color-ink-900: oklch(0.25 0 0);
  --color-ink-800: oklch(0.3 0 0);
  --color-border: var(--c-line);
  --color-border-strong: var(--c-line-strong);
  --color-sky: var(--c-accent);
  --color-sky-strong: var(--c-accent);
  --color-sky-soft: var(--c-accent-soft);
  --color-leaf: var(--c-accent);
  --color-leaf-strong: var(--c-accent-soft-ink);
  --color-leaf-soft: var(--c-accent-soft);
  --color-sun: var(--c-accent-soft);
  --color-sun-strong: var(--c-accent);
  --color-sun-soft: var(--c-surface);
  --color-sun-ink: var(--c-ink);
  --color-coral: var(--c-accent);
  --color-coral-strong: var(--c-accent);
  --color-gold: var(--c-accent);
  --color-gold-strong: var(--c-accent-hover);
  --color-gold-soft: var(--c-accent-soft);
  --color-gold-ink: var(--c-accent-ink);
  --color-plum: var(--c-accent);
  --color-plum-strong: var(--c-accent);
  --color-plum-soft: var(--c-accent-soft);
  --shadow-card: none;
  --shadow-card-hover: var(--shadow-hover);
  --shadow-float: none;
  --radius-sm: var(--r-field);
  --radius-md: var(--r-card);
  --radius-lg: var(--r-card);
  --radius-xl: var(--r-card);
  --font-body: var(--f-text);
  --text-hero: var(--fs-h1);
  --text-2xl: var(--fs-h2);
  --text-lg: var(--fs-h3);
  --text-md: var(--fs-lede);
  --text-base: var(--fs-body);
  --text-sm: var(--fs-small);

  background: var(--c-bg);
  background-image: none;
  color: var(--c-ink);
  font-family: var(--f-text);
  font-weight: var(--fw-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

body.tlm-legado h1,
body.tlm-legado h2,
body.tlm-legado h3,
body.tlm-legado h4 {
  font-family: var(--f-display);
  font-weight: var(--fw-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
}

body.tlm-legado h1 {
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}

body.tlm-legado main a { color: var(--c-accent); }
body.tlm-legado main a:hover { color: var(--c-accent-hover); }
body.tlm-legado main a.article-card, body.tlm-legado main a.article-card:hover { color: var(--c-ink); }
body.tlm-legado :focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }

body.tlm-legado .skip-link { background: var(--c-ink); color: var(--c-bg); }

/* Botones: el principal es el acento; el resto, contorno carbón */
body.tlm-legado .btn {
  font-family: var(--f-text);
  font-weight: var(--fw-strong);
  border-width: 1px;
  box-shadow: none;
}

body.tlm-legado .btn:hover { transform: none; box-shadow: none; }
body.tlm-legado .btn:active { transform: scale(0.97); }

body.tlm-legado .btn--gold,
body.tlm-legado .btn--coral,
body.tlm-legado .btn--sky {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
}

body.tlm-legado .btn--gold:hover,
body.tlm-legado .btn--coral:hover,
body.tlm-legado .btn--sky:hover {
  background: var(--c-accent-hover);
  color: var(--c-accent-ink);
  box-shadow: none;
}

body.tlm-legado .btn--ghost-dark,
body.tlm-legado .btn--outline,
body.tlm-legado .btn--ghost,
body.tlm-legado .btn--facebook,
body.tlm-legado .btn--instagram {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}

body.tlm-legado .btn--ghost-dark:hover,
body.tlm-legado .btn--outline:hover,
body.tlm-legado .btn--ghost:hover,
body.tlm-legado .btn--facebook:hover,
body.tlm-legado .btn--instagram:hover {
  background: var(--c-ink);
  color: var(--c-bg);
  border-color: var(--c-ink);
}

/* Etiquetas en píldora sobria */
body.tlm-legado .pilar-tag,
body.tlm-legado .kicker,
body.tlm-legado .legal-lang-tag {
  background: var(--c-bg);
  color: var(--c-ink-2);
  border: var(--border);
  font-weight: var(--fw-strong);
  letter-spacing: 0;
  text-transform: none;
}

body.tlm-legado .pilar-tag .icon,
body.tlm-legado .kicker .icon { display: none; }

/* ---------- 2) Blog: tarjetas planas, fotos en blanco y negro ---------- */
body.tlm-legado .blog-hero { padding-block: var(--s-7) var(--s-5); }
body.tlm-legado .blog-hero::before { display: none; }
body.tlm-legado .blog-hero h1 { max-width: 20ch; }

body.tlm-legado .article-card {
  background: var(--c-bg);
  border: var(--border);
  border-radius: var(--r-card);
  box-shadow: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  body.tlm-legado .article-card:hover { transform: none; border-color: var(--c-line-strong); box-shadow: var(--shadow-hover); }
}

body.tlm-legado .article-card-media { background: var(--c-surface); }
body.tlm-legado .article-card-media img,
body.tlm-legado .article-hero-img { filter: grayscale(1) contrast(1.04); }
body.tlm-legado .article-card h3 { font-size: var(--fs-h3); }
body.tlm-legado .article-card-meta { border-top: var(--border); color: var(--c-ink-2); }
body.tlm-legado .article-card-meta span:last-child { color: var(--c-accent); font-weight: var(--fw-strong); }

body.tlm-legado .article-main .container--narrow { width: min(100% - 2 * var(--gutter), calc(var(--max-text) + 4rem)); }
body.tlm-legado .article-header h1 { font-size: var(--fs-h1); }
body.tlm-legado .article-lede { font-size: var(--fs-lede); color: var(--c-ink-2); }
body.tlm-legado .article-body { font-size: var(--fs-body); line-height: var(--lh-body); }
body.tlm-legado .article-body a { color: var(--c-accent); }
body.tlm-legado .article-body blockquote { border-left-color: var(--c-accent); }
body.tlm-legado .article-cta {
  background: var(--c-surface);
  color: var(--c-ink);
  border: var(--border);
  border-radius: var(--r-card);
  box-shadow: none;
}
body.tlm-legado .article-cta h2,
body.tlm-legado .article-cta p { color: var(--c-ink); }
body.tlm-legado .ai-notice { color: var(--c-ink-2); }
body.tlm-legado .blog-back { color: var(--c-accent); }

/* Recurso relacionado (piloto de enlaces discretos entre proyectos, 11/10) */
.tlm-relacionado {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: var(--border);
  max-width: var(--max-text);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.tlm-relacionado strong { color: var(--c-ink); font-weight: var(--fw-strong); }

/* ---------- 3) Legales y sugerencias ---------- */
body.tlm-legado .legal-block li { color: var(--c-ink-2); }
body.tlm-legado .legal-updated { color: var(--c-ink-2); }
body.tlm-legado .legal-divider { border-top: 1px dashed var(--c-line-strong); }

/* ---------- 4) Fichas de evento: página clara, hero gris oscuro ---------- */
/* El hero conserva su cielo de estrellas, en grafito neutro (sin azul) */
body.tlm-legado .event-hero {
  --color-bg: oklch(0.25 0 0);
  --color-surface: oklch(0.29 0 0);
  --color-surface-tint: oklch(0.3 0 0);
  --color-ink: oklch(0.97 0 0);
  --color-ink-muted: oklch(0.86 0 0);
  --color-ink-soft: oklch(0.8 0 0);
  --color-border: oklch(1 0 0 / 0.16);
  --color-border-strong: oklch(1 0 0 / 0.28);
  background: radial-gradient(120% 90% at 50% -10%, oklch(0.34 0 0) 0%, oklch(0.25 0 0) 60%);
  color: var(--color-ink);
}

body.tlm-legado .event-hero-veil {
  background: linear-gradient(180deg, oklch(0.2 0 0 / 0%) 0%, oklch(0.2 0 0 / 15%) 55%, oklch(0.25 0 0) 100%);
}

body.tlm-legado .event-hero h1 { color: oklch(0.97 0 0); }
body.tlm-legado .event-hero .lede,
body.tlm-legado .event-hero .event-organizers p,
body.tlm-legado .event-hero .event-facts li { color: oklch(0.86 0 0); }
body.tlm-legado .event-hero .event-kicker { color: oklch(0.86 0 0); }

/* En el hero: principal blanco con texto verde (7,4:1); secundario contorno blanco */
body.tlm-legado .event-hero .btn--gold {
  background: var(--c-bg);
  color: var(--c-accent);
  border-color: var(--c-bg);
}

body.tlm-legado .event-hero .btn--gold:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent-soft-ink);
  border-color: var(--c-accent-soft);
}

body.tlm-legado .event-hero .btn--ghost-dark {
  background: transparent;
  color: oklch(0.97 0 0);
  border-color: oklch(0.97 0 0);
}

body.tlm-legado .event-hero .btn--ghost-dark:hover { background: oklch(0.97 0 0); color: oklch(0.25 0 0); }
body.tlm-legado .event-hero :focus-visible { outline-color: oklch(0.97 0 0); }

/* Plazas: estrellas blancas sobre gris */
body.tlm-legado .event-hero .event-seats li { border-color: oklch(0.97 0 0 / 0.7); }
body.tlm-legado .event-hero .event-soldout-badge { background: oklch(0.97 0 0); color: oklch(0.25 0 0); }

/* Secciones de la ficha con el ritmo de la portada (14/10, corrección de María):
   fondo claro alternando con superficie, sin rayas entre secciones, mismos
   espacios y titulares que /. */
body.tlm-legado.evento-page main > section:not(.event-hero) {
  background: var(--c-bg);
  padding-block: var(--s-7);
  border: 0;
}
body.tlm-legado.evento-page main > section:not(.event-hero):nth-of-type(odd) { background: var(--c-surface); }
body.tlm-legado.evento-page .event-section-head h2,
body.tlm-legado.evento-page .section-head h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
body.tlm-legado.evento-page .container--narrow { width: min(100% - 2 * var(--gutter), 48rem); }
body.tlm-legado.evento-page .event-hero { min-height: min(calc(100dvh - 7rem), 820px); padding-block: var(--s-8) var(--s-7); }
body.tlm-legado.evento-page .event-hero-content { width: min(100% - 2 * var(--gutter), 48rem); }

body.tlm-legado .step,
body.tlm-legado .event-audience-item,
body.tlm-legado .event-contribution,
body.tlm-legado .event-venue,
body.tlm-legado .event-facilitator {
  background: var(--c-bg);
  box-shadow: none;
}

body.tlm-legado .step { border: var(--border); border-radius: var(--r-card); }
body.tlm-legado .step-number { background: var(--c-accent-soft); color: var(--c-accent-soft-ink); }
body.tlm-legado .event-audience-item .icon,
body.tlm-legado .event-venue .icon { color: var(--c-accent); }
body.tlm-legado .event-facilitator-mark { background: var(--c-ink); color: var(--c-bg); }
body.tlm-legado .event-cert { background: var(--c-bg); color: var(--c-ink-2); border: var(--border); }
body.tlm-legado .event-contribution { border: var(--border); border-radius: var(--r-card); }
body.tlm-legado .faq-item { border-color: var(--c-line); background: var(--c-bg); }
body.tlm-legado .faq-item summary .icon { color: var(--c-accent); }

body.tlm-legado .event-disclaimer .disclaimer-box {
  background: var(--c-surface);
  border: var(--border);
}

body.tlm-legado .event-disclaimer .disclaimer-box p { color: var(--c-ink); }
body.tlm-legado .event-disclaimer .disclaimer-box .icon { color: var(--c-accent); }

/* Panel de inscripción: tarjeta clara como las de la portada (14/10, María:
   «que se parezca al resto de la web»). Campos sobre blanco, botón verde. */
body.tlm-legado .publish-panel {
  --color-ink: var(--c-ink);
  --color-ink-muted: var(--c-ink-2);
  --color-ink-on-dark: var(--c-ink);
  --color-ink-muted-on-dark: var(--c-ink-2);
  background: var(--c-bg);
  color: var(--c-ink);
  border: var(--border);
  border-radius: var(--r-card);
  box-shadow: none;
}

body.tlm-legado .publish-panel h2,
body.tlm-legado .publish-panel h3,
body.tlm-legado .publish-panel label { color: var(--c-ink); }
body.tlm-legado .publish-panel .lede,
body.tlm-legado .publish-panel p,
body.tlm-legado .publish-panel .hint { color: var(--c-ink-2); }
body.tlm-legado .publish-panel a { color: var(--c-accent); }
body.tlm-legado .publish-panel .field input,
body.tlm-legado .publish-panel .field select,
body.tlm-legado .publish-panel .field textarea {
  background-color: var(--c-bg);
  color: var(--c-ink);
  border: var(--border-strong);
  border-radius: var(--r-field);
}
body.tlm-legado .publish-panel .field select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
body.tlm-legado .publish-panel .field input::placeholder,
body.tlm-legado .publish-panel .field textarea::placeholder { color: var(--c-ink-2); }
body.tlm-legado .publish-panel .field input:focus,
body.tlm-legado .publish-panel .field select:focus,
body.tlm-legado .publish-panel .field textarea:focus { border-color: var(--c-accent); background-color: var(--c-bg); outline: var(--focus); outline-offset: 1px; }
body.tlm-legado .publish-panel .btn--gold { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); }
body.tlm-legado .publish-panel .btn--gold:hover { background: var(--c-accent-hover); color: var(--c-accent-ink); }
body.tlm-legado .publish-panel .consent-row input[type="checkbox"] { accent-color: var(--c-accent); }
body.tlm-legado .publish-panel .btn--whatsapp {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
}
body.tlm-legado .publish-panel .btn--whatsapp:hover { background: var(--c-ink); color: var(--c-bg); }

/* Listado de cancelar y avisos fuera del hero */
body.tlm-legado .event-closed-box .event-soldout-badge,
body.tlm-legado main > section:not(.event-hero) .event-soldout-badge { background: var(--c-ink); color: var(--c-bg); }

/* Logo e imagen del evento (huecos de la plantilla, Fase 3) */
.event-logo {
  display: block;
  width: auto;
  max-width: 10rem;
  max-height: 4rem;
  margin-bottom: var(--s-4);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-field);
  background: oklch(0.97 0 0);
}

.event-imagen { margin: 0; }
.event-imagen img { width: 100%; height: auto; border-radius: var(--r-card); filter: grayscale(1) contrast(1.05); }
.event-imagen figcaption { margin-top: var(--s-2); font-size: var(--fs-micro); color: var(--c-ink-2); }

.event-organiza-servicio {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: oklch(0.86 0 0);
}

/* Aviso «EJEMPLO» de /eventos/ejemplo/ */
.ejemplo-aviso {
  position: relative;
  z-index: 2;
  padding-block: var(--s-3);
  background: var(--c-accent-soft);
  color: var(--c-accent-soft-ink);
  border-bottom: 1px dashed var(--c-accent);
  font-size: var(--fs-small);
}

.ejemplo-aviso p { max-width: none; margin: 0; }
.ejemplo-aviso strong { font-weight: var(--fw-strong); letter-spacing: 0.04em; }

/* Auspiciadores de la ficha: «Con el apoyo de / Mit Unterstützung von» (14/10/2026).
   Va en el hero gris, debajo de quién organiza; los logos sobre una placa clara. */
.event-apoyo {
  margin-block: var(--s-4) var(--s-5);
  display: grid;
  gap: var(--s-2);
}

body.tlm-legado .event-hero .event-apoyo__titulo,
.event-apoyo__titulo {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-strong);
  color: oklch(0.86 0 0);
}

.event-apoyo__lista {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 30rem) {
  .event-apoyo__lista { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
}

.event-apoyo__item {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--s-1) var(--s-3);
  border: 1px solid oklch(1 0 0 / 0.28);
  border-radius: var(--r-field);
  font-size: var(--fs-small);
  color: oklch(0.97 0 0);
}

.event-apoyo__item--logo {
  justify-content: center;
  background: oklch(0.985 0 0);
  border-color: oklch(0.985 0 0);
  padding: var(--s-2) var(--s-3);
}

/* Todos a la misma altura; ninguno más ancho de 320 px (el de Baden-Württemberg no se amplía). */
.event-apoyo__logo {
  display: block;
  width: auto;
  height: 3.5rem;
  max-width: min(20rem, 100%);
  object-fit: contain;
}