/* FJ Intelligence · v2 · WordPress (sin @font-face: Quarto/Gotham las carga Salient) */

/* ---------- tokens ---------- */
:root {
  --bg: #F4F2EB;
  --bg-hueco: #EDEAE1;
  --ink: #1D1D1B;
  --cuerpo: #5C5B58;
  --muted: #6B6A66;
  --line: #dcd9cf;
  --serif: Quarto, Georgia, "Times New Roman", serif;
  --sans: "Gotham A", "Gotham B", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fut: #54708C;
  --int: #4A6159;
  --smc: #C99B45;
  --leg: #7A4F4A;
  --rama: var(--ink);

  /* anchos: cada sección elige uno a conciencia */
  --col-narrow: 760px;
  --col-mid: 900px;
  --col-wide: 1280px;

  /* escala tipográfica: la de A, con el titular un punto más grande */
  --fs-display: clamp(2.125rem, 1.45rem + 2.7vw, 3.375rem);
  --fs-h2: clamp(1.375rem, 1.2rem + .62vw, 1.6875rem);
  --fs-h3: 1.1875rem;
  --fs-cifra: clamp(2.375rem, 1.7rem + 2.7vw, 3.625rem);
  --fs-cita: clamp(1.375rem, 1.16rem + .85vw, 1.75rem);

  /* ritmo vertical */
  --sp-acto: clamp(88px, 11vw, 152px);
  --sp-bloque: clamp(56px, 7vw, 96px);

  /* sin redondeos: la identidad es de filete recto, no de tarjeta */
  --r-media: 0;
  --r-chip: 0;

  --velo: .08;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14140F;
    --bg-hueco: #1C1C16;
    --ink: #F0EDE4;
    --cuerpo: #A9A69C;
    --muted: #88857B;
    --line: #33322B;
    --velo: .1;
    --smc: #D6AC61;
    --fut: #7E9AB6;
    --int: #74907F;
    --leg: #C48982;
  }
  .k-logo { filter: invert(1); }
}

/* WP · reset acotado a .pg (el bloque FJ). En el prototipo era global
   (*, html, body, a, img) y aqui se comia el header, el footer y el banner
   de cookies de Salient.
   La especificidad va envuelta en :where() a proposito, para que valga 0
   igual que el `*` del prototipo: con `.pg *` (0,1,1) este reset le gana a
   las reglas de una sola clase del diseno (.k-p, .k-cap, .ev-cal…) y deja
   la pieza entera sin ritmo vertical.
   Y las declaraciones de pagina siguen colgando de `body`, no de `.pg`:
   evento.css las neutraliza con body:has(.evento){background:transparent}
   para que se vea la capa de cielo de body::before. En `.pg` el article
   queda opaco y tapa el degradado. */
:where(.pg, .pg *, .pg *::before, .pg *::after) { box-sizing: border-box; }
:where(.pg, .pg *) { margin: 0; padding: 0; }

html:has(.pg) {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* En body va solo lo que tiene que vivir en body: el color de pagina (que
   evento.css pasa a transparent para dejar ver su cielo) y el recorte
   horizontal que piden las piezas a 100vw.
   La tipografia NO. En body se la comen tambien el header, el footer y el
   banner de cookies de Salient (95 elementos medidos), y --sans empieza por
   `Gotham`, que en la cuenta de Hoefler del sitio es un corte distinto y mas
   ancho que el "Gotham A"/"Gotham B" del resto de la web: 248,8 px contra
   240,7 px para el mismo texto a 20 px. */
body:has(.pg) {
  background: var(--bg);
  overflow-x: hidden;
}

.pg {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(.pg a) { color: inherit; }
:where(.pg img) { max-width: 100%; display: block; }

.pg ::selection {
  background: color-mix(in oklab, var(--rama) 26%, transparent);
  color: var(--ink);
}

.pg :where(a, button):focus-visible {
  outline: 2px solid var(--rama);
  outline-offset: 4px;
  border-radius: 3px;
}

.pg[hidden] { display: none !important; }
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* WP · `.inner` a secas es la clase de los span del split_line_heading de
   Salient: 24 elementos en /casos-de-uso/ y 53 en una ficha de portfolio.
   Sin acotar, cada letra del titular se come 72px/40px de padding y la foto
   a sangre se queda en --col-wide. :where(.pg) mantiene la especificidad en
   (0,1,0), la misma que el selector original. */
:where(.pg) .inner { max-width: var(--col-wide); margin: 0 auto; padding: 72px 56px 40px; }
.wide { max-width: var(--col-wide); margin: 0 auto; padding: 0 56px; }
#pg-indice .inner { padding-bottom: 0; text-align: left; }

/* ==========================================================================
   Índice
   ========================================================================== */

h1.index {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: .2px;
  text-wrap: balance;
  margin-bottom: 18px;
}
.lede {
  font-size: 14px;
  line-height: 22px;
  color: var(--cuerpo);
  max-width: 58ch;
  text-wrap: pretty;
}

.cs-filtro {
  display: flex;
  align-items: stretch;
  gap: 32px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 40px 0 0;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cs-filtro::-webkit-scrollbar { display: none; }
.cs-filtro button {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  border-radius: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  min-height: 44px;
  padding: 12px 0 14px;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.cs-filtro button:hover { color: var(--ink); }
.cs-filtro button.on {
  color: var(--ink);
  border-bottom-color: var(--rama, var(--ink));
}

.ac-cuenta {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--muted);
  margin: 18px 0 0;
}
.ac-cuenta[data-rama] {
  color: var(--ink);
}

.cs-rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 52px 34px;
  margin-top: 40px;
  padding-bottom: 96px;
}
@media (max-width: 1180px) { .cs-rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .cs-rejilla { grid-template-columns: repeat(2, 1fr); } }

.cs-card { display: block; text-decoration: none; color: inherit; }
.cs-card[hidden],
.cs-card.ac-lead[hidden] { display: none; }
a.cs-card,
.cs-card[data-go] { cursor: pointer; }

.cs-k {
  display: flex;
  align-items: baseline;
  align-content: flex-start;
  flex-wrap: wrap;
  min-height: 36px; /* dos líneas: las tarjetas alinean su imagen aunque la etiqueta salte */
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  transition: color .3s var(--ease);
}
a.cs-card:hover .cs-k,
.cs-card[data-go]:hover .cs-k { color: var(--ink); }
.cs-conf,
.cs-serie,
.cs-anio,
.cs-min {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
}
.cs-conf { text-transform: lowercase; }
.cs-serie { white-space: normal; }
.cs-conf::before,
.cs-serie::before,
.cs-anio::before,
.cs-min::before {
  content: "·";
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0;
  margin: 0 .7em;
}

.cs-img {
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 10.5;
  margin-bottom: 20px;
  background: var(--bg-hueco);
  border-radius: var(--r-chip);
  border-top: 1px solid var(--rama);
}
.cs-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) contrast(.96) brightness(1.02);
  transition: transform .7s var(--ease), filter .45s var(--ease);
}
.cs-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--bg);
  opacity: var(--velo);
}
a.cs-card:hover .cs-img img,
.cs-card[data-go]:hover .cs-img img {
  transform: scale(1.035);
  filter: saturate(.84) contrast(.96) brightness(1.04);
}

/* el grado de color es un sistema, no una excepción por selector */
[data-grade="none"] .cs-img img,
[data-grade="none"] img,
img[data-grade="none"] { filter: none; }
[data-grade="none"] .cs-img::after,
[data-grade="none"] .k-fig-c::after { opacity: 0; }

.cs-t {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
  margin-bottom: 8px;
}
.cs-txt {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--cuerpo);
  text-wrap: pretty;
}

/* Actualidad: la pieza de apertura abre a sangre de la rejilla */
.cs-card.ac-lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-bottom: 8px;
}
.cs-card.ac-lead .cs-img {
  grid-column: 1;
  grid-row: 1 / 4;
  margin-bottom: 0;
  aspect-ratio: 2 / 3;
}
.cs-card.ac-lead .cs-k {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  margin-bottom: 18px;
}
.cs-card.ac-lead .cs-t {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem);
  line-height: 1.14;
  margin-bottom: 14px;
}
.cs-card.ac-lead .cs-txt {
  grid-column: 2;
  grid-row: 3;
  font-size: 14px;
  line-height: 22px;
  max-width: 48ch;
}
#pg-indice .cs-card.ac-lead .cs-img {
  aspect-ratio: 3 / 2;
}
.cs-card:not(.ac-lead) > .cs-t { display: none; }
.cs-card.ac-sin-foto {
  padding-top: 14px;
  border-top: 1px solid var(--rama);
}
.cs-card.ac-sin-foto .cs-k { min-height: 0; }
.cs-card.ac-sin-foto .cs-t { font-size: 1.3125rem; }
@media (max-width: 900px) {
  .cs-filtro { gap: 22px; }
  .cs-card.ac-lead {
    display: block;
    padding-bottom: 0;
  }
  .cs-card.ac-lead .cs-img {
    aspect-ratio: 16 / 10;
    margin-bottom: 20px;
  }
  .cs-card.ac-lead .cs-t { font-size: 1.4375rem; }
}

/* una tarjeta sin ficha (div, no enlace) no debe fingir que lo es */
div.cs-card { cursor: default; }
div.cs-card .cs-img { opacity: .82; }
.cs-pronto {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-left: auto;
  padding-left: 12px;
  white-space: nowrap;
}

/* ==========================================================================
   Ficha de proyecto
   ========================================================================== */

.caso { --rama: var(--smc); }

/* --- cabecera --- */
/* Sin barra de vuelta: la ficha vive dentro del sitio y el header ya navega. */
.k-head {
  padding: clamp(36px, 5vw, 72px) 24px clamp(20px, 2.4vw, 36px);
  text-align: center;
}
.k-head > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * .07s + .05s);
}
.k-head.is-in > * { opacity: 1; transform: none; }
.k-head.is-in > .k-logo { opacity: .9; }

.k-kicker {
  display: block;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}
.k-head .k-kicker { margin-bottom: clamp(20px, 2.6vw, 30px); }

.k-head h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 1.18;
  letter-spacing: .1px;
  text-wrap: balance;
  max-width: 19ch;
  margin: 0 auto clamp(22px, 2.6vw, 30px);
}
.k-meta {
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--muted);
  text-wrap: balance;
  max-width: 62ch;
  margin: 0 auto;
}
.k-meta i { font-style: normal; margin: 0 9px; color: color-mix(in oklab, var(--muted) 55%, transparent); }
/* marca del cliente, bajo el titular.
   Se mide por ancho, no por alto: es un lockup de varias líneas. */
.k-logo {
  display: block;
  width: clamp(108px, 10vw, 136px);
  height: auto;
  margin: 0 auto clamp(20px, 2.4vw, 26px);
  object-fit: contain;
  opacity: .9;
}
.k-logo-w {
  width: clamp(168px, 20vw, 248px);
}
.k-head:has(.k-logo) h1 { margin-bottom: clamp(18px, 2vw, 24px); }

/* --- héroe a sangre: la imagen no termina, se deshace en el papel --- */
.k-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-hueco);
}
.k-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) contrast(.96) brightness(1.02);
  transform: scale(1.06);
  transition: transform 1.4s var(--ease);
}
.k-hero.is-in img { transform: none; }
.k-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--bg);
  opacity: var(--velo);
}
.k-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  z-index: 2;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg) 3%, color-mix(in oklab, var(--bg) 42%, transparent) 52%, transparent);
}

/* zoom lento ligado al scroll donde el navegador lo soporte */
@supports (animation-timeline: view()) {
  .k-hero.is-in img {
    animation: heroDrift linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 85%;
  }
  @keyframes heroDrift {
    from { transform: scale(1.09); }
    to { transform: scale(1); }
  }
}

/* --- actos --- */
.k-cap { padding-top: var(--sp-acto); }
.k-cap .k-kicker { text-align: center; margin-bottom: 22px; }
.k-cap h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.33;
  text-align: center;
  text-wrap: balance;
  max-width: 22ch;
  margin: 0 auto clamp(34px, 3.8vw, 46px);
}

.k-col {
  max-width: var(--col-narrow);
  margin: 0 auto;
  padding: 0 24px;
}
.k-col.ancho { max-width: var(--col-mid); }

/* dos columnas de texto sólo cuando hay sitio de verdad */
.k-col.dos {
  max-width: var(--col-mid);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 4vw, 64px);
}
@media (max-width: 780px) { .k-col.dos { grid-template-columns: 1fr; } }

.k-p {
  font-size: 16px;
  line-height: 26px;
  color: var(--cuerpo);
  text-wrap: pretty;
  margin-bottom: 22px;
}
.k-p:last-child { margin-bottom: 0; }
.k-p em { font-family: var(--serif); font-style: italic; font-size: 1.06em; color: var(--ink); }

/* --- banda de cifras --- */
.k-cifras {
  max-width: var(--col-mid);
  margin: var(--sp-bloque) auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  text-align: center;
}
.k-cifras > div { border-top: 1px solid var(--line); padding-top: 22px; }
.k-cifras b {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-cifra);
  line-height: 1;
  letter-spacing: -.028em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  margin-bottom: 14px;
}
.k-cifras span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.k-cifras small {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 19px;
  color: var(--cuerpo);
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .k-cifras { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .k-cifras > div { padding: 20px 0; }
  .k-cifras > div:last-child { border-bottom: 1px solid var(--line); }
}

/* --- figura --- */
.k-fig {
  margin: var(--sp-acto) auto 0;
  max-width: var(--col-mid);
  padding: 0 24px;
}
.k-fig.ancha { max-width: var(--col-wide); }
.k-fig-c {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-media);
  background: var(--bg-hueco);
}
.k-fig-c img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) contrast(.96) brightness(1.02);
  transform: scale(1.05);
  transition: transform 1.3s var(--ease);
}
.rv.on .k-fig-c img { transform: none; }
.k-fig-c::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--bg);
  opacity: var(--velo);
}
.k-fig figcaption {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--muted);
  text-align: center;
  text-wrap: pretty;
  max-width: 56ch;
  margin: 18px auto 0;
}
.k-fig figcaption a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 92%;
}

/* a sangre: banda a todo el ancho, se deshace en el papel por abajo */
.k-fig.sangre {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 72px 0 0;
}
.k-fig.sangre .k-fig-c {
  aspect-ratio: auto;
  height: clamp(260px, 36vw, 540px);
  border-radius: 0;
  background: var(--bg);
}
.k-fig.sangre .k-fig-c img {
  transform: scale(1.06);
  transition: transform 1.4s var(--ease);
}
#pg-citiverse .k-fig.sangre .k-fig-c {
  height: clamp(320px, 46vw, 680px);
}
#pg-citiverse .k-fig.sangre .k-fig-c img {
  filter: none;
  object-position: center;
}
.k-fig.sangre .k-fig-c::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--bg);
  opacity: var(--velo);
}
.k-fig.sangre .k-fig-c::after {
  inset: auto 0 -1px 0;
  z-index: 2;
  height: 36%;
  opacity: 1;
  background: linear-gradient(
    to top,
    var(--bg) 4%,
    color-mix(in oklab, var(--bg) 48%, transparent) 48%,
    transparent
  );
}
.k-fig.sangre[data-grade="none"] .k-fig-c::before { opacity: 0; }
.k-fig.sangre figcaption { padding: 0 24px; }
.k-fig.sangre + .k-fig.sangre { margin-top: 36px; }
@supports (animation-timeline: view()) {
  .k-fig.sangre.rv.on .k-fig-c img {
    animation: heroDrift linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 85%;
  }
}
.k-fig.sangre + .k-voz { margin-top: 56px; }

/* --- ficha técnica --- */
/* ficha técnica: cierra el caso, ya no lo interrumpe */
.k-hechos {
  max-width: var(--col-narrow);
  margin: var(--sp-acto) auto 0;
  padding: 0 24px;
}
.k-hechos .k-kicker { text-align: center; margin-bottom: clamp(24px, 3vw, 32px); }
.k-hechos > div {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 22px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.k-hechos > div:last-child { border-bottom: 1px solid var(--line); }
.k-hechos b {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.k-hechos span { font-size: 15px; line-height: 23px; color: var(--ink); }

/* --- la cita: Light, 22 px, como antes de la auditoría --- */
.k-voz {
  max-width: 620px;
  margin: var(--sp-acto) auto 0;
  padding: 0 24px;
  text-align: center;
}
.k-voz blockquote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  line-height: 34px;
  color: var(--ink);
  margin: 0;
}
.k-voz blockquote::before { content: "«"; }
.k-voz blockquote::after { content: "»"; }
.k-voz figcaption {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- resultados --- */
.k-res {
  max-width: var(--col-narrow);
  margin: clamp(32px, 3.6vw, 44px) auto 0;
  padding: 0 24px;
}
.k-res > div { padding: 26px 0; border-top: 1px solid var(--line); }
.k-res > div:last-child { border-bottom: 1px solid var(--line); }
.k-res h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.42;
  text-wrap: balance;
  margin-bottom: 8px;
}
.k-res p { font-size: 15px; line-height: 24px; color: var(--cuerpo); text-wrap: pretty; }

/* --- cierre --- */
.k-fin {
  max-width: var(--col-mid);
  margin: var(--sp-acto) auto 0;
  padding: 0 24px clamp(90px, 11vw, 140px);
}
.k-fin > .k-kicker { text-align: center; margin-bottom: clamp(28px, 3.4vw, 40px); }

.k-sig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 44px);
}
@media (max-width: 720px) { .k-sig { grid-template-columns: 1fr; } }

.k-herm { display: block; text-decoration: none; color: inherit; }
.k-herm-i {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-chip);
  background: var(--bg-hueco);
  margin-bottom: 18px;
}
.k-herm-i img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) contrast(.96) brightness(1.02);
  transition: transform .8s var(--ease);
}
.k-herm-i::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--bg);
  opacity: var(--velo);
}
.k-herm:hover .k-herm-i img { transform: scale(1.04); }
.k-herm-c {
  display: block;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.k-herm-t {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.36;
  letter-spacing: -.008em;
  text-wrap: pretty;
  color: var(--ink);
  transition: opacity .45s var(--ease);
}
.k-herm:hover .k-herm-t { opacity: .62; }

.k-cta {
  margin-top: clamp(72px, 9vw, 116px);
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.k-cta .k-kicker { margin-bottom: 20px; }
.k-cta p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.13rem + .45vw, 1.375rem);
  line-height: 1.5;
  text-wrap: balance;
  color: var(--ink);
}
.k-cta a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size .45s var(--ease);
}
.k-cta a:hover { background-size: 0% 1px; }

/* ==========================================================================
   Artículo
   ========================================================================== */

.articulo { --rama: var(--fut); display: flex; flex-direction: column; }
.articulo > * { order: 4; }
.articulo > .k-head { order: 1; }
.articulo > .k-hero + .k-col:has(.k-p-apertura) { order: 2; }
.articulo > .k-hero { order: 3; }
.articulo .k-head h1 { max-width: 22ch; }
/* la foto entra después de la apertura, como lámina, no como cine bajo el titular */
.articulo .k-hero {
  width: min(calc(100% - 48px), var(--col-mid));
  margin: var(--sp-acto) auto 0;
  aspect-ratio: 3 / 2;
  max-height: none;
  border-top: 1px solid var(--rama);
}
.articulo.articulo-portada .k-hero {
  width: 100%;
  max-height: min(46vh, 520px);
  aspect-ratio: 21 / 9;
  border-top: 0;
  margin-top: clamp(48px, 6vw, 88px);
}
.articulo .k-head {
  padding-bottom: clamp(24px, 3vw, 36px);
}

.k-kicker a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size .45s var(--ease);
}
.k-kicker a:hover { background-size: 100% 1px; }

.k-p-apertura {
  font-size: 18px;
  line-height: 28px;
  color: var(--ink);
  text-align: center;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

.articulo:not(.termino) .k-cap .k-kicker,
.articulo:not(.termino) .k-cap h2 {
  text-align: left;
  max-width: var(--col-narrow);
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.k-p a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 92%;
  transition: background-size .45s var(--ease);
}
.k-p a:hover { background-size: 0% 1px; }

.k-sub {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.36;
  text-wrap: balance;
  color: var(--ink);
  margin: 36px 0 14px;
}
.k-col ul,
.k-col ol {
  margin: 0 0 22px;
  padding-left: 1.15em;
  color: var(--cuerpo);
  font-size: 16px;
  line-height: 26px;
}
.k-col li { margin-bottom: 8px; }
.k-col li::marker { color: var(--muted); }

.k-dl {
  max-width: var(--col-narrow);
  margin: clamp(28px, 3.2vw, 40px) auto 0;
  padding: 0 24px;
}
.k-dl > div { padding: 22px 0; border-top: 1px solid var(--line); }
.k-dl > div:last-child { border-bottom: 1px solid var(--line); }
.k-dl h3 {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rama, var(--muted));
  margin-bottom: 8px;
}
.k-dl p { font-size: 15px; line-height: 24px; color: var(--cuerpo); text-wrap: pretty; }

/* figura de dato: mismo ancho que el texto del artículo */
.k-fig.dato {
  width: 100%;
  max-width: var(--col-narrow);
}
.k-fig.dato .k-fig-c {
  aspect-ratio: auto;
  background: var(--bg-hueco);
  padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 28px) 18px;
}
.k-fig.dato .k-fig-c::after { display: none; }
.k-fig.dato svg { width: 100%; height: auto; display: block; }
.k-fig.dato .ac-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
}
.k-fig.dato .ac-leyenda i {
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 8px;
  vertical-align: middle;
  background: currentColor;
  font-style: normal;
}

.ac-comp { display: grid; gap: 22px; }
.ac-comp-row { display: grid; gap: 8px; }
.ac-comp-row strong {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.ac-comp-bar {
  display: flex;
  height: 28px;
  overflow: hidden;
  background: color-mix(in oklab, var(--line) 55%, transparent);
}
.ac-comp-bar > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w, 0%);
  overflow: hidden;
  white-space: nowrap;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--bg);
  min-width: 0;
}
.ac-comp-bar > span:first-child { background: var(--muted); }
.ac-comp-bar > span:nth-child(2) { background: var(--int); }
.ac-comp-bar > span:nth-child(3) { background: var(--fut); }
.ac-delta {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
  text-wrap: pretty;
  max-width: 42ch;
  margin: 18px auto 0;
}

/* lámina: diagrama o captura que no debe recortarse ni velarse */
.k-fig.lamina { max-width: var(--col-wide); }
.k-fig.lamina .k-fig-c {
  aspect-ratio: auto;
  background: var(--bg-hueco);
  border-top: 1px solid var(--rama, var(--line));
}
.k-fig.lamina .k-fig-c::after { display: none; }
.k-fig.lamina .k-fig-c img {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: saturate(.78) contrast(.97) brightness(1.01);
  transform: none;
}

.ac-hbar { display: grid; gap: 16px; }
.ac-hbar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  align-items: baseline;
}
.ac-hbar-row b {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
}
.ac-hbar-row em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
}
.ac-hbar-row .ac-hbar-track {
  grid-column: 1 / -1;
  height: 7px;
  background: color-mix(in oklab, var(--line) 65%, transparent);
}
.ac-hbar-row .ac-hbar-track i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--rama, var(--fut));
}
.ac-hbar-row.is-here .ac-hbar-track i { background: var(--ink); }
.ac-hbar-row.is-here b { color: var(--ink); }

.ac-vbars {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 8px;
  align-items: end;
  height: 180px;
  padding-top: 22px;
}
.ac-vbars > div {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}
.ac-vbars b {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  color: var(--muted);
}
.ac-vbars i {
  display: block;
  align-self: end;
  width: 100%;
  max-width: 22px;
  height: var(--h);
  background: var(--rama, var(--fut));
}
.ac-vbars span {
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) {
  .ac-vbars { grid-template-columns: repeat(6, 1fr); height: auto; row-gap: 18px; }
  .ac-vbars > div { height: 140px; }
}

.ac-tri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 28px;
}
.ac-tri > div { padding: 8px 0 4px; border-top: 1px solid var(--rama, var(--line)); }
.ac-tri b {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  letter-spacing: -.03em;
  line-height: 1;
  margin: 10px 0 8px;
}
.ac-tri span {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--cuerpo);
  text-wrap: pretty;
}
@media (max-width: 640px) { .ac-tri { grid-template-columns: 1fr; gap: 18px 0; } }
.ac-tri.cuatro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ac-tri.cuatro { grid-template-columns: 1fr 1fr; gap: 22px 28px; } }
@media (max-width: 560px) { .ac-tri.cuatro { grid-template-columns: 1fr; } }

.ac-pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 32px;
}
.ac-pasos > div { padding-top: 14px; border-top: 1px solid var(--rama, var(--line)); }
.ac-pasos small {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.ac-pasos h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 10px;
}
.ac-pasos p { font-size: 14px; line-height: 22px; color: var(--cuerpo); text-wrap: pretty; }
@media (max-width: 800px) { .ac-pasos { grid-template-columns: 1fr; gap: 28px 0; } }
.ac-pasos.cuatro { grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
@media (max-width: 900px) { .ac-pasos.cuatro { grid-template-columns: 1fr 1fr; gap: 28px 24px; } }
@media (max-width: 560px) { .ac-pasos.cuatro { grid-template-columns: 1fr; } }

.ac-grupos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: end;
  height: 168px;
}
.ac-grupos > div {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  gap: 8px;
  min-width: 0;
}
.ac-grupos .cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  align-items: end;
  height: 100%;
}
.ac-grupos .cols i {
  display: block;
  width: 100%;
  height: var(--h, 0%);
  background: var(--muted);
}
.ac-grupos .cols i:nth-child(2) { background: color-mix(in oklab, var(--rama, var(--fut)) 55%, var(--ink)); }
.ac-grupos .cols i:nth-child(3) { background: var(--rama, var(--fut)); }
.ac-grupos span {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 640px) { .ac-grupos { grid-template-columns: repeat(3, 1fr); height: auto; row-gap: 20px; } .ac-grupos > div { height: 120px; } }

.k-dl.ac-pilares {
  max-width: var(--col-wide);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 28px;
}
.k-dl.ac-pilares > div {
  padding: 16px 0 8px;
  border-top: 1px solid var(--rama, var(--line));
  border-bottom: 0;
}
.k-dl.ac-pilares ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 22px;
  color: var(--cuerpo);
}
.k-dl.ac-pilares li { margin: 0 0 6px; }
@media (max-width: 900px) { .k-dl.ac-pilares { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .k-dl.ac-pilares { grid-template-columns: 1fr; } }

.ac-levers { max-width: var(--col-narrow); margin: 0 auto; padding: 0 24px; }
.k-fig.dato .ac-levers { max-width: none; padding: 0; }
.ac-levers > div {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 8px 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.ac-levers > div:last-child { border-bottom: 1px solid var(--line); }
.ac-levers b {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--rama, var(--int));
}
.ac-levers h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.125rem;
  margin: 0 0 6px;
}
.ac-levers p { font-size: 14px; line-height: 22px; color: var(--cuerpo); margin: 0; }

.ac-serie {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0 0 clamp(36px, 4.2vw, 56px);
}
.ac-serie a,
.ac-serie span {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.ac-serie a:hover { color: var(--ink); }
.ac-serie [aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--rama, var(--ink));
}

.k-sigue { padding-top: var(--sp-bloque); }
.k-fuente {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--muted);
  text-align: center;
  text-wrap: pretty;
  max-width: 56ch;
  margin: 18px auto 0;
  padding: 0 24px;
}
.k-hechos a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 92%;
}

/* WP · @view-transition fuera: cambia la navegacion de todo el sitio.
   navigation: auto; */
.termino h1 { view-transition-name: fj-lema; }
.gl-lema.is-vt,
.gl-nombre.is-vt { view-transition-name: fj-lema; }

/* ==========================================================================
   Casa · header, búsqueda, lámina del lema, volumen
   ========================================================================== */

:root { --casa-h: 0px; }   /* WP · el header lo pone Salient */
/* WP · body { padding-top: var(--casa-h) } fuera: dejaba 56px de hueco */

.casa-skip {
  position: absolute;
  left: 14px;
  top: 8px;
  z-index: 40;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  transform: translateY(-160%);
}
.casa-skip:focus {
  transform: none;
}

.casa {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--casa-h);
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.casa.is-scrolled { border-bottom-color: var(--line); }
.casa-marca {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.125rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
}
.casa nav {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.casa nav a,
.casa-contacto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.casa nav a:hover,
.casa-contacto:hover { color: var(--ink); }
.casa nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.casa-pie {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: 28px 56px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.casa-pie a {
  color: var(--muted);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.casa-pie a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .casa-pie { padding: 24px 22px 40px; }
}

.casa-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--bg);
  display: grid;
  align-content: start;
  padding: clamp(88px, 14vh, 140px) 28px 48px;
}
.casa-overlay[hidden] { display: none; }
.casa-cerrar {
  position: absolute;
  top: 16px;
  right: 20px;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  min-height: 44px;
  padding: 0 4px;
  cursor: pointer;
}
.casa-cerrar:hover { color: var(--ink); }
.casa-overlay input[type="search"] {
  width: min(38rem, 100%);
  margin: 0 auto;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  color: var(--ink);
  padding: 8px 0 14px;
  outline: none;
  appearance: none;
}
.casa-overlay input::placeholder { color: var(--muted); opacity: 1; }
.casa-atajo {
  width: min(38rem, 100%);
  margin: 10px auto 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}
.casa-atajo kbd {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  border: 1px solid var(--line);
  padding: 1px 6px;
}
.casa-hits {
  list-style: none;
  width: min(38rem, 100%);
  margin: 28px auto 0;
}
.casa-hits a {
  display: grid;
  grid-template-columns: minmax(10ch, .8fr) 1.4fr;
  gap: 8px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.casa-hits a:hover { border-top-color: var(--rama, var(--ink)); }
.casa-hits b {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.125rem;
  color: var(--ink);
}
.casa-hits small {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.casa-hits span {
  font-size: 14px;
  line-height: 21px;
  color: var(--cuerpo);
  align-self: center;
}

.gl-lema {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 92%;
  cursor: pointer;
}
.gl-lamina {
  position: absolute;
  z-index: 12;
  width: min(34ch, calc(100vw - 32px));
  padding: 14px 16px 16px;
  background: var(--bg);
  border-top: 1px solid var(--rama, var(--ink));
  pointer-events: none;
}
.gl-lamina[hidden] { display: none; }
.gl-lamina p {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}

.cs-rejilla[data-filtro="futuros"] .ac-volumen {
  order: -1;
  border-top: 0;
  padding-top: 0;
}

.ac-volumen {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
  padding: 8px 0 36px;
  margin-bottom: 8px;
  border-top: 1px solid var(--rama, var(--fut));
}
.ac-volumen[hidden] { display: none; }
.ac-vol-head { padding-top: 6px; }
.ac-vol-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 10px 0 12px;
}
.ac-vol-head p {
  font-size: 14px;
  line-height: 22px;
  color: var(--cuerpo);
  max-width: 42ch;
  text-wrap: pretty;
}
.ac-vol-lead {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ac-vol-lead .cs-img {
  margin-bottom: 16px;
  aspect-ratio: 16 / 9;
  border-top: 0; /* el filete ya lo pone .ac-volumen; dos rayas seguidas se leen mal */
}
.ac-vol-n {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.ac-volumen .ac-serie {
  grid-column: 1 / -1;
  justify-content: flex-start;
  margin: 8px 0 0;
  position: relative;
  z-index: 8;
}
.ac-volumen .ac-serie a {
  position: relative;
}
.ac-thumb {
  position: absolute;
  left: 0;
  bottom: calc(100% + 14px);
  width: 220px;
  padding-bottom: 12px;
  background: var(--bg);
  border-top: 1px solid var(--rama, var(--fut));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
}
.ac-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10.5;
  object-fit: cover;
  margin-bottom: 10px;
}
.ac-thumb em {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
}
@media (hover: hover) {
  .ac-volumen .ac-serie a:hover .ac-thumb,
  .ac-volumen .ac-serie a:focus-visible .ac-thumb {
    opacity: 1;
    visibility: visible;
  }
}
@media (hover: none), (max-width: 780px) {
  .ac-volumen .ac-serie {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .ac-volumen .ac-serie a {
    flex: 0 0 132px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .ac-volumen .ac-serie a .ac-thumb {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    padding-bottom: 0;
    pointer-events: none;
  }
  .ac-volumen .ac-serie a .ac-thumb em {
    font-size: 13px;
  }
}

.ac-archivo {
  margin-top: 8px;
  padding: 48px 0 96px;
  border-top: 1px solid var(--line);
}
.ac-archivo[hidden] { display: none; }
.ac-archivo .k-kicker { margin-bottom: 10px; }
.ac-archivo h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0 0 12px;
}
.ac-archivo > p {
  font-size: 14px;
  line-height: 22px;
  color: var(--cuerpo);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0 0 28px;
}
.ac-archivo .gl-row { max-width: 52rem; }

/* ==========================================================================
   Glosario · diccionario, no tarjetas
   ========================================================================== */

.gl-barra {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin: 40px 0 0;
  border-bottom: 1px solid var(--line);
}
.gl-barra .cs-filtro {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border-bottom: 0;
}
.gl-busca {
  flex: 0 1 16rem;
  margin: 0;
  max-width: none;
  min-width: 10rem;
  display: flex;
  align-items: stretch;
}
.gl-busca input[type="search"] {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink);
  padding: 0 0 13px;
  outline: none;
  appearance: none;
  box-shadow: none;
}
.gl-busca input[type="search"]::placeholder {
  color: var(--muted);
  opacity: 1;
}
.gl-busca input[type="search"]:focus {
  font-style: normal;
}
.gl-busca input[type="search"]::-webkit-search-decoration,
.gl-busca input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

.gl-az {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 22px 0 0;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--casa-h, 0px);
  z-index: 3;
  background: var(--bg);
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.gl-az a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.gl-az a:hover { color: var(--ink); }
.gl-az a[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.gl-az a[data-off] {
  opacity: .32;
  pointer-events: none;
  color: var(--muted);
}

.gl-lista { padding-bottom: 96px; }

.gl-grupo { margin-top: clamp(36px, 4.2vw, 56px); }
.gl-grupo[hidden] { display: none; }
.gl-letra {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 4px;
  scroll-margin-top: 64px;
}

.gl-row {
  display: grid;
  grid-template-columns: minmax(12ch, .9fr) 1.45fr;
  grid-template-rows: auto auto;
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 5px;
  padding: 18px 0 16px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s var(--ease);
}
.gl-row[hidden] { display: none; }
.gl-row:hover { border-top-color: var(--rama, var(--ink)); }
.gl-nombre {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  text-wrap: pretty;
  color: var(--ink);
}
.gl-ramas {
  grid-column: 1;
  grid-row: 2;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.gl-def {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size: 14px;
  line-height: 22px;
  color: var(--cuerpo);
  text-wrap: pretty;
  align-self: center;
}
.gl-vacio {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 48px 0 0;
  max-width: 36ch;
}
.gl-vacio[hidden] { display: none; }

.is-busca .cs-filtro,
.is-busca .gl-az {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
.is-busca .gl-busca { flex: 1 1 auto; }
.is-busca .ac-cuenta { margin-top: 18px; }

.gl-usos {
  max-width: none;
  width: 100%;
  margin: var(--sp-bloque) 0 0;
  padding: 0;
  font-family: inherit;
  font-weight: 400;
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
}
.gl-usos > .k-kicker {
  text-align: center;
  margin-bottom: clamp(22px, 2.8vw, 34px);
}
.gl-carril-wrap {
  position: relative;
}
.gl-carril-wrap::before,
.gl-carril-wrap::after {
  content: "";
  position: absolute;
  top: 2px;
  width: clamp(40px, 7vw, 72px);
  height: min(9.85rem, 44vw);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.gl-carril-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 12%, transparent);
}
.gl-carril-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 12%, transparent);
}
.gl-carril-wrap.is-back::before,
.gl-carril-wrap.is-more::after { opacity: 1; }
.gl-carril-btn {
  position: absolute;
  z-index: 2;
  top: 2px;
  width: 48px;
  height: min(9.85rem, 44vw);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  opacity: .88;
  transition: opacity .3s var(--ease);
}
.gl-carril-btn.prev { left: 12px; }
.gl-carril-btn.next { right: 12px; }
.gl-carril-btn:hover { opacity: 1; }
.gl-carril-btn[hidden] { display: none; }
.gl-carril-btn svg {
  width: 28px;
  height: 28px;
  display: block;
  background: var(--bg);
  box-shadow: 0 0 0 7px var(--bg);
}
.gl-carril-btn path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: none) {
  .gl-carril-btn { opacity: 1; }
}
.gl-carril {
  display: flex;
  gap: clamp(16px, 2.2vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(24px, calc((100% - var(--col-mid)) / 2 + 24px));
  padding: 2px max(24px, calc((100% - var(--col-mid)) / 2 + 24px)) 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--ink) 22%, transparent) transparent;
}
.gl-carril::-webkit-scrollbar { height: 6px; }
.gl-carril::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--ink) 22%, transparent);
  border-radius: 99px;
}
.gl-carril .k-herm {
  flex: 0 0 min(17.5rem, 78vw);
  min-width: 0;
  scroll-snap-align: start;
}
.gl-carril .k-herm-i { margin-bottom: 14px; }
.gl-carril .k-herm-t {
  font-size: 1.0625rem;
  line-height: 1.34;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gl-carril[data-n="1"] {
  justify-content: center;
  overflow-x: hidden;
  scrollbar-width: none;
}
.gl-carril[data-n="1"]::-webkit-scrollbar { display: none; }
.gl-carril[data-n="1"] .k-herm { flex-basis: min(20rem, 86vw); }
.termino .k-fin { padding-top: var(--sp-bloque); }
.termino .gl-vecinos { border-top: 0; }

/* ficha de término: sin héroe; el filete de rama sustituye a la foto */
.termino .k-head {
  padding-bottom: clamp(20px, 2.6vw, 32px);
}
.termino .k-head h1 { max-width: 20ch; }
.termino .k-head::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--rama, var(--ink));
  margin: 28px auto 0;
}
.termino .k-p-apertura {
  text-align: left;
  max-width: none;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink);
}
.termino .k-cap { padding-top: var(--sp-bloque); }
.termino .k-cap h2 { margin-bottom: clamp(22px, 2.6vw, 32px); }

.gl-afines {
  max-width: var(--col-narrow);
  margin: var(--sp-acto) auto 0;
  padding: 0 24px;
}
.gl-afines > .k-kicker {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 32px);
}
.gl-afines .gl-row {
  grid-template-columns: minmax(10ch, .8fr) 1.5fr;
  padding: 14px 0 12px;
}
.gl-afines .gl-nombre { font-size: 1.125rem; }
.gl-afines .gl-def { font-size: 13.5px; line-height: 21px; }

.gl-vecinos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.gl-vecinos a {
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  background-image: none;
}
.gl-vecinos a:last-child { text-align: right; }
.gl-vecinos small {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.gl-vecinos span {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.125rem, 1.02rem + .4vw, 1.3125rem);
  line-height: 1.32;
  text-wrap: pretty;
  color: var(--ink);
  transition: opacity .4s var(--ease);
}
.gl-vecinos a:hover span { opacity: .62; }

/* ==========================================================================
   Movimiento
   ========================================================================== */

.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0s);
}
.rv.on { opacity: 1; transform: none; }

/* el escalonado ocurre dentro del bloque, no sólo entre bloques */
.rv-hijos > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * .08s);
}
:is(.rv-hijos.on, .rv.on .rv-hijos) > * { opacity: 1; transform: none; }

.k-fig.dato:not(.on) .ac-comp-bar > span {
  width: 0;
  color: transparent;
}
.k-fig.dato.on .ac-comp-bar > span {
  width: var(--w, 0%);
  transition: width 1.15s var(--ease), color .4s var(--ease) .45s;
  transition-delay: var(--d, 0s), calc(var(--d, 0s) + .45s);
}
.k-fig.dato.on .ac-comp-row:nth-child(2) .ac-comp-bar > span { transition-delay: calc(var(--d, 0s) + .18s), calc(var(--d, 0s) + .6s); }
.k-fig.dato.on .ac-comp-row:nth-child(3) .ac-comp-bar > span { transition-delay: calc(var(--d, 0s) + .32s), calc(var(--d, 0s) + .72s); }

.k-fig.dato:not(.on) .ac-hbar-track i { width: 0; }
.k-fig.dato.on .ac-hbar-track i {
  width: var(--w, 0%);
  transition: width 1.05s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * .07s);
}
.ac-hbar-row:nth-child(1) { --i: 0; }
.ac-hbar-row:nth-child(2) { --i: 1; }
.ac-hbar-row:nth-child(3) { --i: 2; }
.ac-hbar-row:nth-child(4) { --i: 3; }
.ac-hbar-row:nth-child(5) { --i: 4; }
.ac-hbar-row:nth-child(6) { --i: 5; }
.ac-hbar-row:nth-child(7) { --i: 6; }
.ac-hbar-row:nth-child(8) { --i: 7; }
.ac-hbar-row:nth-child(9) { --i: 8; }
.ac-hbar-row:nth-child(10) { --i: 9; }

.k-fig.dato:not(.on) .ac-vbars i,
.k-fig.dato:not(.on) .ac-grupos .cols i { height: 0; }
.k-fig.dato.on .ac-vbars i,
.k-fig.dato.on .ac-grupos .cols i {
  height: var(--h);
  transition: height 1s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * .06s);
}
.ac-vbars > div:nth-child(1), .ac-grupos > div:nth-child(1) { --i: 0; }
.ac-vbars > div:nth-child(2), .ac-grupos > div:nth-child(2) { --i: 1; }
.ac-vbars > div:nth-child(3), .ac-grupos > div:nth-child(3) { --i: 2; }
.ac-vbars > div:nth-child(4), .ac-grupos > div:nth-child(4) { --i: 3; }
.ac-vbars > div:nth-child(5), .ac-grupos > div:nth-child(5) { --i: 4; }
.ac-vbars > div:nth-child(6), .ac-grupos > div:nth-child(6) { --i: 5; }
.ac-vbars > div:nth-child(7) { --i: 6; }
.ac-vbars > div:nth-child(8) { --i: 7; }
.ac-vbars > div:nth-child(9) { --i: 8; }
.ac-vbars > div:nth-child(10) { --i: 9; }
.ac-vbars > div:nth-child(11) { --i: 10; }

.k-fig.dato svg polyline,
.k-fig.dato svg line.ac-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.k-fig.dato.on svg polyline,
.k-fig.dato.on svg line.ac-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.55s var(--ease);
  transition-delay: calc(var(--d, 0s) + .12s);
}

.k-fig.dato .ac-delta {
  opacity: 0;
  transform: translateY(8px);
}
.k-fig.dato.on .ac-delta {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0s) + 1.05s);
}

.k-fig.dato:not(.on) .ac-tri > div,
.k-fig.dato:not(.on) .ac-pasos > div,
.k-fig.dato:not(.on) .ac-levers > div {
  opacity: 0;
  transform: translateY(14px);
}
.k-fig.dato.on .ac-tri > div,
.k-fig.dato.on .ac-pasos > div,
.k-fig.dato.on .ac-levers > div {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * .1s);
}
.ac-tri > div:nth-child(1), .ac-pasos > div:nth-child(1), .ac-levers > div:nth-child(1) { --i: 0; }
.ac-tri > div:nth-child(2), .ac-pasos > div:nth-child(2), .ac-levers > div:nth-child(2) { --i: 1; }
.ac-tri > div:nth-child(3), .ac-pasos > div:nth-child(3), .ac-levers > div:nth-child(3) { --i: 2; }
.ac-tri > div:nth-child(4), .ac-pasos > div:nth-child(4), .ac-levers > div:nth-child(4) { --i: 3; }
.ac-tri > div:nth-child(5), .ac-levers > div:nth-child(5) { --i: 4; }

/* transición de elemento compartido: la tarjeta se convierte en el héroe */
::view-transition-group(*) {
  animation-duration: .62s;
  animation-timing-function: var(--ease);
}
::view-transition-old(root) {
  animation: vtOut .34s var(--ease-exit) both;
}
::view-transition-new(root) {
  animation: vtIn .5s var(--ease) both;
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gl-carril-wrap::before,
  .gl-carril-wrap::after,
  .gl-carril-btn { transition: none; }
  .k-head > *, .k-head.is-in > *,
  .rv, .rv-hijos > *, .k-fig-c img, .k-hero img, .k-hero.is-in img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .k-head.is-in > .k-logo { opacity: .9 !important; }
  .k-fig.dato .ac-comp-bar > span {
    width: var(--w, 0%) !important;
    color: var(--bg) !important;
  }
  .k-fig.dato .ac-hbar-track i { width: var(--w, 0%) !important; }
  .k-fig.dato .ac-vbars i,
  .k-fig.dato .ac-grupos .cols i { height: var(--h) !important; }
  .k-fig.dato svg polyline,
  .k-fig.dato svg line.ac-line { stroke-dashoffset: 0 !important; }
  .k-fig.dato .ac-delta,
  .k-fig.dato .ac-tri > div,
  .k-fig.dato .ac-pasos > div,
  .k-fig.dato .ac-levers > div {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Calculadora de tiempo de uso
   ========================================================================== */

.calc {
  --calc-fill: var(--rama, var(--int));
  width: min(calc(100% - 48px), var(--col-mid));
  margin: var(--sp-bloque) auto 0;
  scroll-margin-top: calc(var(--casa-h) + 12px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.calc-kicker {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.calc-intro {
  padding: 28px 0 32px;
}
.calc-intro p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--cuerpo);
  margin: 14px 0 0;
  max-width: 46ch;
  text-wrap: pretty;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.calc-col {
  padding: 32px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.calc-col + .calc-col {
  padding-left: 36px;
  border-left: 1px solid var(--line);
}
.calc-col:first-child { padding-right: 36px; }

.calc-ctrl { display: flex; flex-direction: column; gap: 14px; }
.calc-ctrl-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.calc-ctrl label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.calc-val {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.calc-ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}
.calc-nota {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.calc input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--line);
  outline: none;
  border-radius: 0;
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  cursor: grab;
  border: 4px solid var(--bg);
  box-shadow: 0 0 0 1px var(--ink);
}
.calc input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  cursor: grab;
  border: 3px solid var(--bg);
}
.calc input[type="range"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.calc-big-k {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.calc-big {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(4.5rem, 3rem + 6vw, 7rem);
  line-height: .9;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin: -8px 0 0;
}
.calc-sub {
  font-size: 16px;
  font-weight: 300;
  color: var(--cuerpo);
  margin-top: 18px;
}
.calc-sub b { font-weight: 400; color: var(--ink); }
.calc-sub em {
  font-style: normal;
  color: var(--calc-fill);
}

.calc-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.calc-pair > div {
  background: var(--bg);
  padding: 20px 22px;
}
.calc-pair .k {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.calc-pair .n {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-top: 6px;
}
.calc-pair .u { font-size: 14px; color: var(--cuerpo); }

.calc-anos-k {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.calc-grid-anos {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.calc-celda {
  width: 15px;
  height: 15px;
  border: 1px solid color-mix(in oklab, var(--line) 40%, var(--muted));
  background: linear-gradient(
    to top,
    var(--calc-fill) calc(var(--p, 0) * 100%),
    var(--bg) calc(var(--p, 0) * 100%)
  );
}
.calc-leyenda {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
  padding-top: 8px;
}
.calc-leyenda i {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  vertical-align: -1px;
  border: 1px solid color-mix(in oklab, var(--line) 40%, var(--muted));
}
.calc-leyenda i.pantalla { background: var(--calc-fill); border-color: var(--calc-fill); }

.calc-pie {
  display: flex;
  gap: 32px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 28px 0 8px;
  border-top: 1px solid var(--line);
}
.calc-pie p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  max-width: 28ch;
  text-wrap: pretty;
}
.calc-dl {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-underline-offset .25s var(--ease), color .25s var(--ease);
}
.calc-dl:hover {
  color: var(--calc-fill);
  text-underline-offset: 9px;
}

.k-firma {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 1.125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

@media (max-width: 780px) {
  .calc { width: calc(100% - 44px); }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-col + .calc-col {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .calc-col:first-child { padding-right: 0; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  /* WP · `.inner` a secas se comia el span.inner del split-heading de Salient
     (el "Anticipacion frente al cambio." del pie): le metia 40px/20px de
     padding y lo estiraba de 56 a 263 px de alto. :where(.pg) lo acota sin
     cambiar la especificidad, que sigue siendo (0,1,0) como el original. */
  :where(.pg) .inner { padding: 40px 22px 20px; }
  #pg-indice .inner { padding-bottom: 0; }
  .wide { padding: 0 22px; }
  .cs-rejilla { gap: 38px 28px; padding-bottom: 64px; }
  .k-hero { aspect-ratio: 4 / 3; }
  .k-fig-c { aspect-ratio: 4 / 3; }
  .k-fig.sangre { margin-top: 48px; }
  .k-fig.sangre .k-fig-c { aspect-ratio: auto; }
  .k-fig.dato .k-fig-c { aspect-ratio: auto; }
  .k-fig.lamina .k-fig-c { aspect-ratio: auto; }
  .articulo .k-head h1 { max-width: none; }
  .articulo .k-hero {
    width: calc(100% - 44px);
    max-height: none;
    aspect-ratio: 3 / 2;
  }
  .articulo.articulo-portada .k-hero {
    width: 100%;
    max-height: min(38vh, 340px);
    aspect-ratio: 16 / 9;
  }
  .k-hechos > div { grid-template-columns: 1fr; gap: 5px; }
  .gl-row,
  .gl-afines .gl-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 8px;
    padding: 22px 0 20px;
  }
  .gl-nombre,
  .gl-ramas,
  .gl-def { grid-column: 1; grid-row: auto; }
  .gl-def {
    padding-top: 2px;
    max-width: 52ch;
  }
  .gl-az { gap: 4px 10px; top: var(--casa-h, 0px); }
  .gl-vecinos { grid-template-columns: 1fr; }
  .gl-vecinos a:last-child { text-align: left; }
  .casa { padding: 0 16px; gap: 12px; }
  .casa nav { gap: 12px; justify-content: flex-end; }
  .casa-marca { font-size: 1rem; }
  .ac-volumen { grid-template-columns: 1fr; }
  .casa-hits a { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cs-rejilla { grid-template-columns: 1fr; gap: 38px; }
  .cs-filtro { gap: 20px; }
  .casa {
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 0;
  }
  .casa-marca { margin-right: 12px; flex: 0 0 auto; }
  .casa nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
  }
  .casa nav a,
  .casa-contacto {
    font-size: 11px;
    letter-spacing: .08em;
    flex: 0 0 auto;
  }
  .casa-contacto { margin-left: 10px; }
  .gl-barra { flex-direction: column; gap: 0; }
  .gl-busca { min-width: 0; flex: 1 1 auto; }
  .gl-busca input[type="search"] { padding: 12px 0 13px; }
}


/* ==========================================================================
   WP · el inset de movil de fji-mapa-v2-layout.css
   ==========================================================================
   Esa hoja mete `padding: 0 30px` y fondo propio en .container.main-content
   por debajo de 767 px. En las paginas con mapa es lo que se quiere; en una
   .pg se suma al gutter de 22 px de .inner/.wide y deja el contenido 60 px
   mas estrecho de lo que pide el diseno.
   El !important le esta ganando a `.container.main-content` (0,2,0) de
   fji-mapa-v2-layout.css; la cadena html body:has(.pg) sube a (0,3,1) para
   ganarle tambien al CSS adicional del Customizer, que se imprime despues.
   Acotado con :has(.pg), asi que /nosotros/, /contacto/ y los hubs no se
   enteran. En /y-manana-que/ es redundante: evento.css ya pone lo mismo. */
@media only screen and (max-width: 767px) {
  html body:has(.pg) .container.main-content {
    background: transparent !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   WP · la ficha de proyecto va a sangre
   ==========================================================================
   .k-fig.sangre es `max-width:none; width:100%` del <article>, y en el
   prototipo ese article es la ventana entera. Dentro de WordPress lo encierra
   .container de Salient con `max-width:1425px; padding:0 40px`, y la foto se
   queda 84 px corta por cada lado.
   El !important le esta ganando a `.container` (0,1,0) de
   salient-dynamic-styles.css dentro de @media (min-width:1000px); la cadena
   html body:has(.pg.caso) sube a (0,3,1) para ganarle tambien al CSS adicional
   del Customizer, que se imprime despues.
   No hace falta tocar .row: no tiene restriccion de ancho, se estrechaba solo
   por el padding del padre.
   Solo crece lo que tiene que crecer. Medido en /portfolio/la-rioja/ a 1512 px:
   el article y la foto pasan de 1345 a 1512, y h1 (513), .k-meta (496),
   .k-cap h2 (297), .k-col (760), .k-cifras (900), .k-res (760), .k-hechos
   (760) y .k-sig (852) no se mueven ni un pixel, porque todos llevan su propio
   max-width con margin auto. */
html body:has(.pg.caso) .container.main-content {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   WP · la ficha, contra dos herencias que no son del diseno
   ==========================================================================
   1 · LA CITA. skin-material.css de Salient trae
   `blockquote::before { display:block; position:absolute; left:0; top:0;
   height:100%; width:4px; border-left:4px solid }` para la barra de sus citas,
   y `blockquote { position:relative; padding-left:1.8em }`. Esta hoja solo
   declaraba `content:"«"` en ese mismo pseudo, asi que la comilla heredaba lo
   demas: caja absoluta de 4 px con borde —la barra dorada, que coge el color de
   acento del sitio— y 39,6 px de sangrado que descentraban el texto.
   Sin !important: `.k-voz blockquote::before` es (0,1,2) y le gana a
   `blockquote::before` (0,0,2). */
.k-voz blockquote {
  position: static;
  padding-left: 0;
}
.k-voz blockquote::before,
.k-voz blockquote::after {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  border: 0;
}

/* 2 · LOS PARRAFOS. El CSS adicional del Customizer imprime
   `body.single p, body.single ul li, body.single ol li
   { font-size:16px; line-height:1.4em }`. Eso es (0,1,2) y se imprime en
   wp_head:101, despues de esta hoja, asi que le gana a `.k-p` (0,1,0) y a
   `.k-res p` y `.k-cta p` (0,1,1). El prefijo .pg sube a (0,2,0) y gana por
   numero de clases, sin !important.
   Acotado a .pg y no a .pg.caso a proposito: la fase 2 son entradas, tambien
   body.single, y heredarian el mismo problema. */
.pg .k-meta { font-size: 13px; line-height: normal; }
.pg .k-p { font-size: 16px; line-height: 26px; }
.pg .k-res p { font-size: 15px; line-height: 24px; }
.pg .k-cta p {
  font-size: clamp(1.25rem, 1.13rem + .45vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink);
}