/* =========================================================================
   Araant — páginas que todavía usan la plantilla antigua (partials/head.php):
   mismas cabecera, etiquetas y ritmo que las páginas nuevas, sin esperar a
   rehacer cada una. Se carga la última (después de mercury.css y legado.css),
   por eso lleva «html body:not(#_)» y !important: las hojas antiguas
   también los usan.
   ========================================================================= */

/* --- Cabecera de página: la foto del horizonte con su velo -------------------------- */
html body:not(#_) .page-hero, html body:not(#_) main > section.page-hero {
  position: relative !important; isolation: isolate; overflow: hidden;
  background: var(--onyx) !important; border-bottom: 0 !important;
  padding-top: calc(var(--alto-encabezado, 72px) + clamp(40px, 5vw, 72px)) !important;
  padding-bottom: clamp(48px, 6vw, 96px) !important;
  min-height: 0 !important;
}
html body:not(#_) .page-hero::before {
  content: "" !important; position: absolute !important; inset: 0 !important; z-index: -2 !important;
  background: url("/sitio/medios/horizonte-1280.webp") 50% 88% / cover no-repeat !important;
  opacity: 1 !important; width: auto !important; height: auto !important; transform: none !important; filter: none !important;
}
html body:not(#_) .page-hero::after {
  content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; border: 0 !important;
  background:
    linear-gradient(90deg, rgba(23, 23, 33, 0.66) 0%, rgba(23, 23, 33, 0.22) 62%, rgba(23, 23, 33, 0) 100%),
    linear-gradient(180deg, rgba(23, 23, 33, 0.5) 0%, rgba(23, 23, 33, 0) 34%, rgba(23, 23, 33, 0.35) 70%, var(--onyx) 100%) !important;
  opacity: 1 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important;
}
/* Con cabecera de foto, la barra fija va encima de ella: el hueco de la barra sobra. */
body:has(main > .page-hero:first-child) .encabezado-hueco { display: none; }

html body:not(#_) main > section.page-hero h1, html body:not(#_) .page-hero .detail__title {
  font-size: clamp(34px, 4.2vw, 56px) !important; line-height: 1.08 !important; letter-spacing: 0.005em !important; max-width: 24ch;
}
html body:not(#_) .page-hero .lead, html body:not(#_) .page-hero .detail__lead, html body:not(#_) .page-hero .section__header > p:not(.section__eyebrow) {
  font-size: clamp(18px, 1.5vw, 21px) !important; line-height: 1.45 !important; max-width: 56ch; color: var(--ash) !important;
}

/* --- Etiqueta de sección: como «.etiqueta» de la web nueva ------------------------------ */
html body:not(#_) .section__eyebrow, html body:not(#_) .ojo {
  display: inline-flex !important; align-items: center; gap: 10px; margin: 0 0 20px !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--texto-tipo) !important; font-size: 12px !important; font-weight: 480 !important; line-height: 1 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--ash) !important;
}
html body:not(#_) .section__eyebrow::before, html body:not(#_) .ojo::before { display: none !important; }

/* --- Ritmo de secciones --------------------------------------------------------------- */
html body:not(#_) main > .section:not(.page-hero) { padding-block: clamp(56px, 7vw, 112px) !important; }
html body:not(#_) main > .section:not(.page-hero) + .section:not(.page-hero) { border-top: 1px solid var(--linea); }
html body:not(#_) main > .section.section--subtle { background: linear-gradient(180deg, rgba(147, 166, 193, 0.08), rgba(147, 166, 193, 0) 70%) !important; }
html body:not(#_) .section__header h2 { font-size: clamp(28px, 3vw, 42px) !important; line-height: 1.12 !important; }
html body:not(#_) .section__header h2 + p { color: var(--ash) !important; max-width: 62ch; }

/* --- Listas de definiciones y tarjetas planas ------------------------------------------- */
html body:not(#_) .glosario, html body:not(#_) .tipogrid { border-top: 1px solid var(--linea-fuerte); display: block !important; }
html body:not(#_) .glosario__item {
  display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px 24px; align-items: start;
  padding: 22px 0 !important; border: 0 !important; border-bottom: 1px solid var(--linea) !important; border-radius: 0 !important; background: none !important;
}
html body:not(#_) .glosario__item dt { font-size: 16px; font-weight: 480; color: var(--ivory) !important; }
html body:not(#_) .glosario__item dd { font-size: 16px !important; line-height: 1.55; color: var(--ash) !important; }
html body:not(#_) .glosario__item--warn { border-left: 0 !important; padding-left: 0 !important; background: linear-gradient(180deg, rgba(237, 237, 243, 0.06), rgba(237, 237, 243, 0)) !important; }
@media (max-width: 760px) { html body:not(#_) .glosario__item { grid-template-columns: 1fr; } }

/* --- Pestañas, migas y enlaces de apoyo ---------------------------------------------------- */
html body:not(#_) .crumbs, html body:not(#_) .crumbs a { font-size: 13px; color: var(--ash) !important; }
html body:not(#_) .crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
html body:not(#_) .teaser-link a { display: inline-flex; align-items: center; min-height: 24px; }