/* ==========================================================================
   FJ Intelligence · Portada
   --------------------------------------------------------------------------
   El bloque "Home" del prototipo (fj-v2.css p61, lineas 2500-2839), en hoja
   aparte. No se integra en fj/fj-v2.css porque el archivo del servidor y el
   del prototipo han divergido en las dos direcciones: el del servidor aun
   lleva el bloque @font-face que p61 ya no trae, asi que sustituirlo se
   llevaria reglas vivas de proyectos, actualidad, glosario y el encuentro.

   Depende de fj/fj-v2.css, que aporta los tokens (--col-wide, --col-narrow,
   --sp-acto, --fs-h2, --casa-h, --ease, --rama y la paleta) y los bloques
   compartidos .cs-card, .gl-carril, .k-fin, .k-cta, .k-kicker y .lede. Se
   encola siempre despues.

   Sin !important a proposito: comprobado en el CSSOM de la portada que ni el
   CSS adicional del Customizer ni fji-mapa-v2-layout.css alcanzan ninguna de
   estas clases, y las reglas de Salient que si llegan (body h1, body h2,
   body a) son de dos elementos y pierden contra cualquier selector de clase.

   Version: p7
   ========================================================================== */

.hm-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: 28px 36px;
  align-items: center;
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) 56px 12px;
  min-height: min(78vh, 760px);
}
.hm-head .k-kicker { margin-bottom: 22px; }
.hm-head h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(47px, 5.2vw, 70px);
  line-height: 1;
  letter-spacing: .1px;
  text-wrap: balance;
  margin-bottom: 22px;
}
.hm-head .lede { max-width: 42ch; }
.hm-radar .fj-mapa { max-width: 820px; margin-left: auto; }
.hm-radar .gLayer > circle:first-child { fill: none; }

.hm-sec { padding-top: var(--sp-acto); }

/* La primera seccion respira menos que las otras dos: debajo del hero ya hay
   el aire que deja el radar, y con el ritmo entero quedaban 178 px muertos
   entre el titular y la ceja de Soluciones. */
.hm-oficios { padding-top: clamp(16px, 2vw, 28px); }
.hm-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.hm-sec-head .k-kicker { margin: 0; }
.hm-sec-head a,
.hm-oficios > .wide > .k-kicker {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.hm-sec-head a:hover { color: var(--ink); }
.hm-oficios > .wide > .k-kicker {
  display: block;
  margin-bottom: 28px;
}

.hm-tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 48px;
}
.hm-tres .fj-pillar {
  /* Columna flexible para que .hm-sols pueda empujarse con margin-top:auto y
     las tres listas arranquen a la misma altura, pese a que el párrafo de
     Inteligencia ocupe una línea más. Las columnas ya miden lo mismo: son
     celdas de un grid y se estiran. */
  display: flex;
  flex-direction: column;
  position: relative;
  /* Apaga la tarjeta que fj-map.css le pone a .fj-pillar en móvil —radio,
     relleno lateral, borde en los cuatro lados y fondo—. El plugin usa esa
     clase para los pilares de [fj_portada] y aquí se comparte porque es la
     que fj-map.js busca para encender la rama en el radar. Gana por
     especificidad, 0,2,0 contra 0,1,0, sin !important. */
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  scroll-margin-top: var(--casa-h);
}
.hm-tres .fj-pillar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 36px;
  height: 1px;
  background: var(--rama);
}
.hm-tres h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.28;
  margin-bottom: 12px;
}
.hm-tres h2 a {
  color: inherit;
  text-decoration: none;
  transition: opacity .3s var(--ease);
}
.hm-tres h2 a:hover,
.hm-tres h2 a:focus-visible { opacity: .62; }
.hm-tres p {
  font-size: 15px;
  line-height: 24px;
  color: var(--cuerpo);
  text-wrap: pretty;
}
.hm-sols {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}
/* Salient pone `ul li { list-style: outside disc }` en su style.css, que gana
   al `list-style: none` del <ul> por ser más específico que la herencia. Se
   apaga en el <li>, con clase, sin necesidad de !important. */
.hm-sols li { list-style: none; }
.hm-sols li + li { border-top: 1px solid var(--line); }
.hm-sols a {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 8px 0;
}
.hm-sols a:hover,
.hm-sols a:focus-visible { color: var(--ink); }

.hm-carril {
  gap: 34px;
  scroll-padding-inline: max(22px, calc((100% - var(--col-wide)) / 2 + 56px));
  padding: 4px max(22px, calc((100% - var(--col-wide)) / 2 + 56px)) 20px;
  scrollbar-width: none;
}
.hm-carril::-webkit-scrollbar { display: none; }
.hm-carril .cs-card {
  flex: 0 0 min(20rem, 78vw);
  min-width: 0;
  scroll-snap-align: start;
}
.hm-proyectos .gl-carril-wrap::before,
.hm-proyectos .gl-carril-wrap::after {
  top: 0;
  height: 100%;
}
.hm-proyectos .gl-carril-btn {
  top: 0;
  height: 100%;
}
.hm-proyectos.rv { transform: none; }
.hm-proyectos.is-pager .gl-carril-btn { display: none; }
.hm-proyectos.is-pager .hm-carril {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.hm-pager-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 10px;
}
.hm-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hm-pager[hidden] { display: none; }
.hm-todos {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 5.5%, var(--bg));
  color: var(--muted);
  text-decoration: none;
}
.hm-proyectos > .hm-todos {
  margin: 8px auto 10px;
}
.hm-todos:hover,
.hm-todos:focus-visible { color: var(--ink); }
.hm-todos svg {
  width: 20px;
  height: 20px;
  display: block;
}
.hm-todos rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hm-pager-pips {
  height: 44px;
  border: 0;
  background: color-mix(in oklab, var(--ink) 5.5%, var(--bg));
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 9px;
  width: max-content;
  padding: 0 22px;
  border-radius: 999px;
  overflow: visible;
}
.hm-pager-dot {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  position: relative;
  flex: 0 0 8px;
  width: 8px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  transition: flex-basis .56s var(--ease), width .56s var(--ease);
}
.hm-pager-dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: color-mix(in oklab, var(--ink) 28%, var(--line));
  pointer-events: none;
  transition: background .45s var(--ease);
}
.hm-pager-dot[aria-current="true"] {
  flex-basis: 28px;
  width: 28px;
  height: 44px;
  background: transparent;
}
.hm-pager-dot[aria-current="true"]::after {
  background: color-mix(in oklab, var(--ink) 22%, var(--line));
}
.hm-pager-fill {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 1;
}
.hm-pager.is-play .hm-pager-dot[aria-current="true"] .hm-pager-fill {
  animation: hm-pager-fill 4.2s linear forwards;
}
.hm-pager.is-paused .hm-pager-fill {
  animation-play-state: paused;
}
@keyframes hm-pager-fill {
  to { transform: scaleX(1); }
}
.hm-lecturas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 34px;
}
.hm-lecturas .cs-card > .cs-t { display: block; }
.hm-fin { max-width: var(--col-narrow); }
/* El CSS dinámico de Salient declara `strong { font-family: "Gotham A"... }`,
   y el titular del acto va en <strong> dentro del <em>. Gana por especificidad
   (0,2,2 contra 0,0,1), sin !important. */
.hm-fin .k-cta p strong,
.hm-fin .k-cta p b { font-family: var(--serif); }
.hm-fin .k-cta:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.hm-acto-marca {
  position: relative;
  width: min(280px, 76vw);
  aspect-ratio: 2.35 / 1;
  height: auto;
  margin: 0 auto 28px;
  background: transparent;
  mix-blend-mode: multiply;
}
.hm-acto-marca-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hm-acto-marca img,
.hm-acto-marca video {
  pointer-events: none;
  background: #fff;
}
.hm-acto-marca img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hm-acto-marca video {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 220%;
  width: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  visibility: hidden;
}
.hm-acto-marca.is-on video { visibility: visible; }
.hm-acto-marca.is-on img { visibility: hidden; }
@media (prefers-color-scheme: dark) {
  .hm-acto-marca {
    mix-blend-mode: normal;
    filter: invert(1) hue-rotate(180deg);
  }
}

@media (max-width: 900px) {
  .hm-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 28px 22px 8px;
    gap: 8px;
  }
  .hm-head h1 { font-size: clamp(34px, 9.2vw, 42px); }
  .hm-radar { padding-top: 8px; }
  .hm-radar .fj-mapa { max-width: none; margin: 0 auto; }
  .hm-tres { grid-template-columns: 1fr; gap: 28px; }
  /* En una columna la tarjeta mide lo que mide su contenido, el margen
     automático se resuelve en cero y la lista se pegaría al párrafo. */
  .hm-sols { margin-top: 18px; }
  .hm-lecturas { grid-template-columns: 1fr; gap: 36px; }
  .hm-carril {
    gap: 22px;
    padding-inline: 22px;
    scroll-padding-inline: 22px;
  }
  .hm-carril .cs-card { flex-basis: min(17.5rem, 82vw); }
  .hm-pager-slot { padding-bottom: 4px; }
    /* En una columna el radar queda justo encima de la ceja y el aire de
     escritorio se queda corto: ahí sí hace falta separar. */
  .hm-oficios { padding-top: 56px; }
}

/* --- movimiento reducido: las seis reglas de portada que en p61 viven
       dentro del @media general de fj-v2.css --- */
@media (prefers-reduced-motion: reduce) {
  .hm-proyectos.is-pager .hm-carril { scroll-behavior: auto; }
  .hm-pager-fill,
  .hm-pager-dot { animation: none !important; transition: none; }
  .hm-pager-dot[aria-current="true"] { background: var(--ink); }
  .hm-acto-marca video { display: none; }
  .hm-acto-marca img { visibility: visible; }
}