/* aimh-skin-legacy.css — la piel del mockup sobre los cuerpos legacy
   ═══════════════════════════════════════════════════════════════════════════
   #608 bloque 3 (Dirección, 2026-09-19: «ahora ponlo en toda la página con
   esta skin»). TRANSITORIO, como aimh-bridge.css, y con la misma vida: se
   borra el día que la última página legacy se migre a la fundación.

   Qué es: las 65 páginas públicas puenteadas ya llevan el cascarón nuevo
   pero su CUERPO sigue siendo css/style.css (2024): degradados, sombras que
   levantan, botones verdes, fondo con foto fija, cabeceras de página con
   focos radiales. Reescribir 65 cuerpos es la migración completa y no cabe
   en una ola; lo que sí cabe es que esos componentes hablen la piel de la
   portada: la paleta y las medidas de 021, el azul de marca como única
   superficie fuerte, tarjetas planas con filete, botones de la fundación,
   nada que brille ni se mueva solo.

   Cómo: (1) las variables legacy (--primary, --bg, --text-body…) que style.css
   y los style="" inline consultan se REMAPEAN a tokens de la fundación —
   con eso hasta los estilos inline heredan la paleta nueva; (2) los
   componentes con más presencia (page-header, section-header, sc-card,
   service-card, glass-card, btn-primary/secondary, section) se redibujan
   con tokens. Todo cuelga de body.aimh-legacy-bridge y va sin capa, porque
   style.css va sin capa y hay que ganarle en orden de fuente.

   Lo que NO hace: no toca la lógica, los formularios ni el texto; no añade
   fotos (los huecos siguen en la Media Library); no inventa un color: cada
   valor es un var(--aimh-*). Si aquí aparece un número suelto, es un error. */

/* ── 1 · la paleta legacy pasa a ser la de la fundación ───────────────── */
body.aimh-legacy-bridge {
  --primary: var(--aimh-brand-primary);
  --primary-dark: var(--aimh-brand-primary-pressed);
  --primary-light: var(--aimh-brand-primary-hover);
  --primary-50: var(--aimh-surface-canvas-alt);
  --primary-100: var(--aimh-border-subtle);
  --green: var(--aimh-brand-primary);
  --green-accion: var(--aimh-button-primary-bg);
  --green-accion-dark: var(--aimh-button-primary-bg-hover);
  --green-dark: var(--aimh-button-primary-bg-pressed);
  --green-50: var(--aimh-surface-canvas-alt);
  --secondary: var(--aimh-brand-primary-pressed);
  --bg: var(--aimh-surface-canvas);
  --white: var(--aimh-surface-default);
  --text: var(--aimh-text-primary);
  --text-body: var(--aimh-text-primary);
  --text-secondary: var(--aimh-text-secondary);
  --text-light: var(--aimh-text-secondary);
  --border: var(--aimh-border-subtle);
  --border-light: var(--aimh-border-divider);
  --linea: var(--aimh-border-divider);
  --radius: var(--aimh-radius-lg);
  --radius-sm: var(--aimh-radius-md);
  --radius-lg: var(--aimh-radius-lg);
  --radius-full: var(--aimh-radius-pill);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --font-heading: var(--aimh-font-family-heading);
  --font-body: var(--aimh-font-family-sans);
  /* las variables que solo viven en style="" inline de algunas páginas
     (inventario 2026-09-20: --text-dark 75 usos, --sup 48, --bg-light 42,
     --accent 34…); sin remapear, un degradado con --accent no resuelve */
  --text-dark: var(--aimh-text-primary);
  --text-mid: var(--aimh-text-secondary);
  --bg-light: var(--aimh-surface-canvas-alt);
  --accent: var(--aimh-brand-primary);
  --accent-light: var(--aimh-brand-primary-hover);
  --teal-dark: var(--aimh-brand-primary-pressed);
  --marca: var(--aimh-brand-primary);
  --sup: var(--aimh-surface-default);
  --sup-3: var(--aimh-surface-canvas-alt);
  --txt-2: var(--aimh-text-secondary);
  --txt-4: var(--aimh-text-secondary);
  --linea-2: var(--aimh-border-subtle);
  --border-strong: var(--aimh-border-strong);
  --peligro: var(--aimh-status-critical-fg);
  --peligro-2: var(--aimh-status-critical-bg);
  --radius-md: var(--aimh-radius-md);
  background: var(--aimh-surface-canvas);
  color: var(--aimh-text-primary);
  font-family: var(--aimh-font-family-sans);
  font-size: var(--aimh-text-body-size);
  line-height: var(--aimh-lh-body);
}
/* sin fondo fotográfico fijo detrás del texto: la portada no lo lleva */
body.aimh-legacy-bridge { background-image: none; background-attachment: scroll; }

/* ── 2 · tipografía: la escala de la portada ──────────────────────────── */
body.aimh-legacy-bridge :is(h1, h2, h3, h4) { font-family: var(--aimh-font-family-heading); color: var(--aimh-text-primary); letter-spacing: -0.02em; }
body.aimh-legacy-bridge h1 { font-size: var(--aimh-text-display-size); line-height: var(--aimh-text-display-lh); letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
body.aimh-legacy-bridge h2, body.aimh-legacy-bridge .section-header h2, body.aimh-legacy-bridge .section-title { font-size: var(--aimh-text-statement-size); line-height: 1.1; font-weight: 700; text-wrap: balance; }
body.aimh-legacy-bridge h3 { font-size: var(--aimh-text-subsection-size); line-height: var(--aimh-lh-heading); font-weight: 600; letter-spacing: 0; }
body.aimh-legacy-bridge .section-header p { color: var(--aimh-text-secondary); font-size: var(--aimh-text-lead-size); line-height: 1.55; }
body.aimh-legacy-bridge main a:not([class]) { color: var(--aimh-text-link); text-decoration: underline; }

/* ── 3 · cabecera de página: la superficie azul de marca, plana ────────
   Era un degradado oscuro con dos focos radiales. Ahora es el azul de marca
   con el titular a escala de display y el texto claro — la misma superficie
   fuerte que la portada usa para la tarjeta de cifras. */
body.aimh-legacy-bridge .page-header { margin-top: 0; padding: var(--aimh-space-96) 0 var(--aimh-space-64); background: var(--aimh-brand-primary); color: var(--aimh-brand-on-primary); text-align: start; }
body.aimh-legacy-bridge .page-header::before, body.aimh-legacy-bridge .page-header::after { display: none; }
body.aimh-legacy-bridge .page-header :is(h1, h2, p, span, small, li) { color: inherit; }
body.aimh-legacy-bridge .page-header h1 { font-size: var(--aimh-text-display-size); font-weight: 700; margin: 0 0 var(--aimh-space-16); max-inline-size: 22ch; }
body.aimh-legacy-bridge .page-header p { font-size: var(--aimh-text-lead-size); line-height: 1.55; max-inline-size: 46ch; margin: 0; opacity: 0.94; }
body.aimh-legacy-bridge .page-header .hero-badge, body.aimh-legacy-bridge .page-header .badge { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: var(--aimh-radius-pill); box-shadow: none; }
body.aimh-legacy-bridge .page-header a:not([class]) { color: inherit; }
@media (max-width: 599px) { body.aimh-legacy-bridge .page-header { padding: var(--aimh-space-48) 0; } }

/* el héroe legacy de las pocas páginas que aún lo llevan */
body.aimh-legacy-bridge .hero { min-height: 0; background: var(--aimh-surface-canvas); }

/* ── 4 · secciones: ritmo de la portada, sin bandas alternas ─────────── */
body.aimh-legacy-bridge .section { padding: var(--aimh-space-section-public-lg) 0; background: transparent; }
body.aimh-legacy-bridge .section:nth-child(even) { background: var(--aimh-surface-canvas-alt); }
body.aimh-legacy-bridge .container { max-width: var(--aimh-max-public); padding-inline: var(--aimh-space-margin-public); }
@media (max-width: 599px) { body.aimh-legacy-bridge .container { padding-inline: var(--aimh-space-margin-public-narrow); } }

/* ── 5 · tarjetas: planas, con filete, como las seis puertas ───────────
   Sin sombra, sin levantarse al pasar el ratón, sin cristal. El borde se
   vuelve azul al hover/focus, exactamente como .aimh-door. */
body.aimh-legacy-bridge :is(.sc-card, .service-card, .glass-card, .icon-box, .gl-item, .card) {
  background: var(--aimh-surface-default); border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-radius-lg);
  box-shadow: none; transform: none; transition: border-color var(--aimh-motion-duration-fast) var(--aimh-motion-easing-state);
}
body.aimh-legacy-bridge :is(.sc-card, .service-card, .glass-card, .icon-box, .gl-item, .card):hover,
body.aimh-legacy-bridge :is(.sc-card, .service-card, .glass-card, .icon-box, .gl-item, .card):focus-within { box-shadow: none; transform: none; border-color: var(--aimh-brand-primary); }
body.aimh-legacy-bridge .service-content { padding: var(--aimh-space-24); }
body.aimh-legacy-bridge .service-icon { background: var(--aimh-surface-canvas-alt); border-radius: var(--aimh-radius-md); box-shadow: none; }
body.aimh-legacy-bridge .gradient-line { display: none; }

/* ── 6 · botones: los de la fundación ──────────────────────────────────
   El primario era verde y saltaba con sombra al pasar el ratón; el
   mockup tiene un solo color de acción, el azul de marca, y quieto. */
body.aimh-legacy-bridge :is(.btn-primary, .btn-primary-small, .btn-submit, button[type="submit"]:not([class])) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--aimh-control-gap-icon);
  min-block-size: var(--aimh-control-height-md); padding: 0 var(--aimh-control-padding-inline);
  background: var(--aimh-button-primary-bg); color: var(--aimh-button-primary-fg); border: 1px solid var(--aimh-button-primary-bg);
  border-radius: var(--aimh-control-radius); font-family: var(--aimh-font-family-sans); font-size: var(--aimh-text-button-size); font-weight: 500; line-height: 1;
  box-shadow: none; transform: none; text-decoration: none; letter-spacing: 0; text-transform: none;
}
body.aimh-legacy-bridge :is(.btn-primary, .btn-primary-small, .btn-submit):hover { background: var(--aimh-button-primary-bg-hover); border-color: var(--aimh-button-primary-bg-hover); color: var(--aimh-button-primary-fg); transform: none; box-shadow: none; }
body.aimh-legacy-bridge :is(.btn-primary, .btn-primary-small, .btn-submit):active { background: var(--aimh-button-primary-bg-pressed); border-color: var(--aimh-button-primary-bg-pressed); transform: none; }
body.aimh-legacy-bridge .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--aimh-control-height-md); padding: 0 var(--aimh-control-padding-inline);
  background: transparent; color: var(--aimh-button-secondary-fg); border: 1px solid var(--aimh-button-secondary-border); border-radius: var(--aimh-control-radius);
  font-family: var(--aimh-font-family-sans); font-size: var(--aimh-text-button-size); font-weight: 500; line-height: 1; box-shadow: none; transform: none; text-decoration: none;
}
body.aimh-legacy-bridge .btn-secondary:hover { background: var(--aimh-surface-canvas-alt); color: var(--aimh-button-secondary-fg); transform: none; box-shadow: none; }
/* dentro de la cabecera azul, el secundario va en contorno claro */
body.aimh-legacy-bridge .page-header .btn-secondary { color: var(--aimh-brand-on-primary); border-color: var(--aimh-brand-on-primary); }
body.aimh-legacy-bridge .page-header .btn-secondary:hover { background: var(--aimh-brand-on-primary); color: var(--aimh-brand-primary); }
body.aimh-legacy-bridge .page-header .btn-primary { background: var(--aimh-brand-on-primary); color: var(--aimh-brand-primary); border-color: var(--aimh-brand-on-primary); }
body.aimh-legacy-bridge .page-header .btn-primary:hover { background: var(--aimh-surface-canvas-alt); border-color: var(--aimh-surface-canvas-alt); color: var(--aimh-brand-primary); }

/* ── 7 · formularios: los campos de la fundación ──────────────────────── */
body.aimh-legacy-bridge :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  border: 1px solid var(--aimh-border-strong); border-radius: var(--aimh-radius-control); background: var(--aimh-surface-default); color: var(--aimh-text-primary);
  font-family: var(--aimh-font-family-sans); box-shadow: none;
}
body.aimh-legacy-bridge :is(input, select, textarea):focus-visible { outline: 2px solid var(--aimh-focus-ring); outline-offset: 1px; border-color: var(--aimh-brand-primary); box-shadow: none; }

/* ── 8 · nada se mueve solo ────────────────────────────────────────────
   Las entradas por scroll del cuerpo legacy siguen valiendo (una vez, sin
   bucle); lo que se quita es el brillo, el flotar y el levantarse. */
body.aimh-legacy-bridge :is(.float, .floating, [class*="pulse"], [class*="shimmer"]) { animation: none; }

/* ── 9 · las páginas que dibuja el servidor ───────────────────────────────
   Artículos (/blog/*), directorio y perfiles (/u/*), /certverify y los hubs
   de recursos ES/HT traen su hoja en un <style> propio con la cabecera clara
   y 8 rem de aire arriba para la barra fija de 2024. Especificidad por
   encima del <style> (body + main + clase), mismo tratamiento que
   .page-header: azul de marca plano, texto claro, sin degradados. */
body.aimh-legacy-bridge main :is(.bl-hero, .dir-hero, .rhero, .cv-hero) { padding: var(--aimh-space-64) 0 var(--aimh-space-48); background: var(--aimh-brand-primary); color: var(--aimh-brand-on-primary); border: 0; }
body.aimh-legacy-bridge main :is(.bl-hero, .dir-hero, .rhero, .cv-hero) :is(h1, h2, p, span, time, a, small) { color: inherit; }
body.aimh-legacy-bridge main :is(.bl-hero, .dir-hero, .rhero, .cv-hero) h1 { font-family: var(--aimh-font-family-heading); font-size: var(--aimh-text-display-size); line-height: var(--aimh-text-display-lh); letter-spacing: -0.025em; font-weight: 700; }
body.aimh-legacy-bridge main .bl-crumbs a { text-decoration: underline; }
body.aimh-legacy-bridge main .bl-cat { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: var(--aimh-radius-pill); }
body.aimh-legacy-bridge main .bl-body-wrap { background: transparent; }
body.aimh-legacy-bridge main .bl-body { font-size: var(--aimh-text-body-lg-size); color: var(--aimh-text-primary); }
body.aimh-legacy-bridge main .bl-body h2 { font-family: var(--aimh-font-family-heading); color: var(--aimh-text-primary); font-size: var(--aimh-text-section-title-size); }
body.aimh-legacy-bridge main .bl-body h3 { color: var(--aimh-text-primary); }
body.aimh-legacy-bridge main .bl-body a { color: var(--aimh-text-link); }
body.aimh-legacy-bridge main .bl-body blockquote { border-left: 3px solid var(--aimh-brand-primary); background: var(--aimh-surface-canvas-alt); border-radius: 0 var(--aimh-radius-md) var(--aimh-radius-md) 0; }
body.aimh-legacy-bridge main .bl-cover { border-radius: var(--aimh-radius-lg); background: var(--aimh-surface-canvas-alt); }
body.aimh-legacy-bridge main :is(.bl-note, .rnote) { background: var(--aimh-surface-canvas-alt); border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-radius-md); color: var(--aimh-text-secondary); }
body.aimh-legacy-bridge main .bl-cta { background: var(--aimh-brand-primary); color: var(--aimh-brand-on-primary); border-radius: var(--aimh-radius-lg); text-align: start; }
body.aimh-legacy-bridge main .bl-cta h2 { font-family: var(--aimh-font-family-heading); color: inherit; font-size: var(--aimh-text-section-title-size); }
body.aimh-legacy-bridge main .bl-cta p { color: inherit; opacity: 0.94; }
body.aimh-legacy-bridge main :is(.bl-btn, .rbtn) { display: inline-flex; align-items: center; min-block-size: var(--aimh-control-height-md); padding: 0 var(--aimh-control-padding-inline); border-radius: var(--aimh-control-radius); background: var(--aimh-brand-on-primary); color: var(--aimh-brand-primary); font-family: var(--aimh-font-family-sans); font-size: var(--aimh-text-button-size); font-weight: 500; text-decoration: none; }
body.aimh-legacy-bridge main :is(.bl-btn.alt, .rbtn.alt) { background: transparent; color: var(--aimh-brand-on-primary); border: 1px solid var(--aimh-brand-on-primary); }
body.aimh-legacy-bridge main .bl-rel h2 { font-family: var(--aimh-font-family-heading); color: var(--aimh-text-primary); font-size: var(--aimh-text-subsection-size); }
body.aimh-legacy-bridge main :is(.bl-rc, .rcard, .dir-card, .cv-card) { background: var(--aimh-surface-default); border: 1px solid var(--aimh-border-subtle); border-radius: var(--aimh-radius-lg); box-shadow: none; transform: none; }
body.aimh-legacy-bridge main :is(.bl-rc, .rcard, .dir-card):hover { box-shadow: none; transform: none; border-color: var(--aimh-brand-primary); }
body.aimh-legacy-bridge main .bl-rc .t { color: var(--aimh-text-primary); }
body.aimh-legacy-bridge main .bl-rc .e { color: var(--aimh-text-secondary); }

/* ── 10 · modo oscuro: el blanco escrito a mano sobre el azul de marca ──
   La paleta de la fundación se invierte con data-theme/data-tema o con el
   sistema: en oscuro --aimh-brand-primary pasa a un azul claro y el texto
   que va encima es --aimh-brand-on-primary (oscuro). Las páginas legacy
   traen bloques con background:var(--primary) y color:#fff escritos en el
   propio HTML; en claro coinciden con la fundación, en oscuro dejarían
   blanco sobre azul claro (2.6:1). Se corrige solo esa combinación y solo
   en oscuro, con la misma pareja de tokens que usa .page-header. Los
   selectores buscan el prefijo del color claro escrito a mano (#f…, 255,255,255)
   sin escribir aquí ningún color: la piel sigue sin un solo valor suelto. */
:root:is([data-theme="dark"], [data-tema="oscuro"]) body.aimh-legacy-bridge :is([style*="background:var(--primary"], [style*="background: var(--primary"], [style*="background: linear-gradient(135deg, var(--primary"], [style*="background:linear-gradient(135deg,var(--primary"]),
:root:is([data-theme="dark"], [data-tema="oscuro"]) body.aimh-legacy-bridge :is([style*="background:var(--primary"], [style*="background: var(--primary"], [style*="background: linear-gradient(135deg, var(--primary"], [style*="background:linear-gradient(135deg,var(--primary"]) :is([style*="color:#f"], [style*="color: #f"], [style*="(255,255,255"], [style*="(255, 255, 255"]) {
  color: var(--aimh-brand-on-primary) !important;
  border-color: var(--aimh-brand-on-primary) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-tema="claro"]) body.aimh-legacy-bridge :is([style*="background:var(--primary"], [style*="background: var(--primary"], [style*="background: linear-gradient(135deg, var(--primary"], [style*="background:linear-gradient(135deg,var(--primary"]),
  :root:not([data-theme="light"]):not([data-tema="claro"]) body.aimh-legacy-bridge :is([style*="background:var(--primary"], [style*="background: var(--primary"], [style*="background: linear-gradient(135deg, var(--primary"], [style*="background:linear-gradient(135deg,var(--primary"]) :is([style*="color:#f"], [style*="color: #f"], [style*="(255,255,255"], [style*="(255, 255, 255"]) {
    color: var(--aimh-brand-on-primary) !important;
    border-color: var(--aimh-brand-on-primary) !important;
  }
}