/* Portada «hero A · variante c (tarjeta de invitación a los 2,5 s)» del
   21-09-2026, portada a HTML/CSS/JS estáticos desde el commit fac7c4c de
   laralawn-copy-soft-ceo (client/src/styles/home-editorial.css,
   client/src/styles/home-hero-cta.css y client/src/styles/editorial.css).
   Único cambio respecto al original: el rosa (--rosa: #b9194c) pasa a ser el
   burdeos de la tarjeta Hanya (--burdeos: #4b1014) en todas sus apariciones
   (botón, tarjeta, foco, hover). Todo lo demás —composición, cuerpos, fuentes,
   foto, tiempos— es el del original. Ver ORIGEN.md.
   Ronda 2 (18-10): se restituye la cara cursiva de Lawn Aida 300 que el porte
   de la ronda 1 había dejado fuera (hallazgo H1 de la QA r1); el 21-09 la
   servía editorial.css y la usa la entradilla de la tarjeta de invitación. */

/* ------------------------------------------------------------ fuentes -- */
/* editorial.css (fac7c4c): Lawn Aida 300 redonda y cursiva, y Lawn Figura
   400–700. La cursiva de Aida sí se usa: la entradilla de la tarjeta de
   invitación (.hero-card .deck) hereda font-style: italic de .hero--a .deck y,
   con font-synthesis: none, sin esta cara el navegador pintaba la redonda
   (QA r1, H1). Hazel no se usa en la portada: no se sirve. */
@font-face {
  font-family: "Lawn Aida";
  src: url("../fonts/aida-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lawn Aida";
  src: url("../fonts/aida-light-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lawn Figura";
  src: url("../fonts/figura-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lawn Figura";
  src: url("../fonts/figura-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lawn Figura";
  src: url("../fonts/figura-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lawn Figura";
  src: url("../fonts/figura-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* home-editorial.css: Bodoni Moda variable, recortes latín, solo portada. */
@font-face {
  font-family: "Lawn Bodoni";
  src: url("../fonts/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 450 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lawn Bodoni";
  src: url("../fonts/bodoni-moda-italic-latin.woff2") format("woff2");
  font-weight: 450 500;
  font-style: italic;
  font-display: swap;
}

/* Lo que en la app ponía el preflight de Tailwind y aquí hace falta a mano. */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #fffdfb;
}
.editorial-skip-link {
  font: 500 1rem/1.5 "Lawn Figura", Arial, sans-serif;
  position: fixed;
  z-index: 100;
  top: -10rem;
  left: 1rem;
  padding: 0.75rem 1.25rem;
  background: #181617;
  color: white;
}
.editorial-skip-link:focus {
  top: 1rem;
}

/* ---------------------------------------------------------------- base -- */
.home-editorial {
  --paper: #fffdfb;
  --paper-2: #f3f0ee;
  --ink: #141213;
  --burdeos: #4b1014; /* antes --rosa: #b9194c */
  --sec: #5a5254;
  --rule: #d9d2d4;
  --gutter: clamp(20px, 4.4vw, 64px);
  --max: 1312px;
  --aida: "Lawn Aida", "Times New Roman", serif;
  --figura: "Lawn Figura", Arial, sans-serif;
  --didone: "Lawn Bodoni", "Didot", "Bodoni 72", serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--figura);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.home-editorial *,
.home-editorial *::before,
.home-editorial *::after {
  box-sizing: border-box;
}
.home-editorial :where(h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote) {
  margin: 0;
  padding: 0;
}
.home-editorial :where(h1, h2, h3, h4) {
  font: inherit;
  text-wrap: wrap;
}
.home-editorial :where(ul) {
  list-style: none;
}
.home-editorial :where(img) {
  display: block;
  max-width: 100%;
}
.home-editorial :where(a) {
  color: inherit;
  text-decoration: none;
}
.home-editorial :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: pointer;
}
.home-editorial :where(a, button):focus-visible {
  outline: 2px solid var(--burdeos);
  outline-offset: 4px;
}
.home-editorial .editorial-skip-link {
  background: var(--ink);
  color: var(--paper);
}
.home-editorial .editorial-skip-link:focus-visible {
  outline-color: var(--paper);
  outline-offset: 2px;
}
.home-editorial .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.home-editorial .bw {
  filter: grayscale(1) contrast(1.06);
}
.home-editorial .wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.home-editorial .aida {
  font-family: var(--aida);
  font-weight: 300;
}
.home-editorial .caps {
  font: 600 11px/1 var(--figura);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Entradilla: Aida cursiva con el fragmento clave en versales. */
.home-editorial .deck {
  font: 300 italic 24px/1.32 var(--aida);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.home-editorial .deck b {
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.86em;
}
/* Un solo botón (antes rosa, ahora burdeos) por pantalla. */
.home-editorial .btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 28px;
  background: var(--burdeos);
  color: #fff;
  font: 600 14px/1 var(--figura);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.home-editorial .btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.35s var(--ease);
}
.home-editorial .btn:hover svg {
  transform: translateX(4px);
}
/* `hidden` debe ganar al display propio de .btn y de los li. */
.home-editorial .nav .nav-cta[hidden],
.home-editorial .nav li[hidden],
.home-editorial .hero--a .hero-card[hidden] {
  display: none;
}

/* --------------------------------------------------------------- barra -- */
/* Transparente sobre el papel de la portada; en móvil, logo + «Menú». */
.home-editorial .nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 9;
}
.home-editorial .nav .wrap {
  display: flex;
  align-items: center;
  height: 84px;
  max-width: none;
}
.home-editorial .nav .logo img {
  height: 50px;
  width: auto;
}
.home-editorial .nav ul {
  display: flex;
  gap: 34px;
  margin-left: auto;
  margin-right: 44px;
  font: 500 12px/1 var(--figura);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-editorial .nav a {
  text-decoration: none;
}
.home-editorial .nav .access {
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font: 600 12px/1 var(--figura);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-editorial .nav ul a,
.home-editorial .nav .wrap > .access {
  position: relative;
}
.home-editorial .nav ul a::after,
.home-editorial .nav .wrap > .access::after {
  content: "";
  position: absolute;
  inset: -15px -8px;
}
.home-editorial .nav .menu {
  display: none;
  margin-left: auto;
  font: 600 12px/1 var(--figura);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Menú móvil abierto (patrón de RefNav): la barra se fija sobre papel. */
.home-editorial .nav[data-open="true"] {
  position: fixed;
  z-index: 56;
  background: var(--paper);
}
.home-editorial .nav[data-open="true"] .menu {
  display: inline-flex;
  align-items: center;
}
.home-editorial .nav-panel {
  position: fixed;
  inset: 64px 0 0;
  z-index: 55;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 8px var(--gutter) 48px;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.home-editorial .nav-panel[hidden] {
  display: none;
}
.home-editorial .nav-panel a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  font: 300 32px/1.05 var(--aida);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.home-editorial .nav-panel .access {
  display: inline-block;
  justify-self: start;
  margin-top: 26px;
  padding: 0 0 5px;
  border-bottom: 1px solid currentColor;
  font: 600 12px/1 var(--figura);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-editorial .nav-panel .access {
  position: relative;
}
.home-editorial .nav-panel .access::after {
  content: "";
  position: absolute;
  inset: -14px -8px -13px;
}
.home-editorial .nav-panel .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding: 0 22px;
  border: 0;
  font: 600 14px/1 var(--figura);
  letter-spacing: 0.06em;
}
@media (max-height: 680px) {
  .home-editorial .nav-panel {
    padding-bottom: 24px;
  }
  .home-editorial .nav-panel a {
    padding: 12px 0;
    font-size: 28px;
  }
  .home-editorial .nav-panel .access {
    margin-top: 20px;
  }
  .home-editorial .nav-panel .btn {
    margin-top: 22px;
  }
}

/* ------------------------------------------------------------- portada -- */
/* «HOW TO BECOME» (Aida versales) / «that» (Bodoni cursiva 500) / «GIRL»
   monumental (Bodoni 600): la figura ocupa el hueco de la «I» y va por
   delante de la letra. Unidad --u en apaisado, --m en vertical. */
.home-editorial .hero--a {
  --u: min(1vw, 1.6vh);
  position: relative;
  display: block;
  overflow: hidden;
  height: calc(var(--u) * 62.5);
  min-height: 0;
  background: var(--paper);
}
.home-editorial .hero--a .stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(var(--u) * 100);
  transform: translateX(-50%);
}
.home-editorial .hero--a .dd {
  font-family: var(--didone);
  font-optical-sizing: auto;
  font-weight: 600;
}
.home-editorial .hero--a .deck {
  font-family: var(--didone);
  font-style: italic;
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.34;
}
.home-editorial .hero--a .deck b {
  font-family: var(--aida);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.05em;
  font-size: 0.9em;
}
.home-editorial .hero--a .k1 {
  position: absolute;
  left: calc(var(--u) * 4.4);
  top: calc(var(--u) * 9.4);
  font-size: calc(var(--u) * 6.2);
  line-height: 1;
  letter-spacing: -0.075em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 3;
}
.home-editorial .hero--a .k2 {
  position: absolute;
  left: calc(var(--u) * 4.2);
  top: calc(var(--u) * 12.6);
  font-size: calc(var(--u) * 15.4);
  line-height: 1;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.035em;
  z-index: 3;
}
.home-editorial .hero--a .k3 {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(var(--u) * 1.3);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: calc(var(--u) * 35.5);
  line-height: 0.74;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}
.home-editorial .hero--a .k3 i {
  font-style: normal;
  display: block;
}
/* La «I»: su hueco lo ocupa la figura, que va por delante. */
.home-editorial .hero--a .k3 .gap {
  width: calc(var(--u) * 17);
  text-align: center;
  letter-spacing: 0;
}
.home-editorial .hero--a .fig {
  position: absolute;
  z-index: 2;
  left: calc(var(--u) * 38.2);
  bottom: 0;
  transform: translateX(-50%);
  height: calc(var(--u) * 52.5);
  width: auto;
  max-width: none;
}
.home-editorial .hero--a .inL {
  position: absolute;
  z-index: 4;
  left: auto;
  right: calc(var(--u) * 3.4);
  top: calc(var(--u) * 10.4);
  bottom: auto;
  width: calc(var(--u) * 18);
  max-width: none;
  text-align: center;
}
.home-editorial .hero--a .inL .deck {
  display: block;
  font-size: max(15px, calc(var(--u) * 1.36));
}
.home-editorial .hero--a .inL .btn {
  width: auto;
  margin-top: calc(var(--u) * 1.4);
  height: max(46px, calc(var(--u) * 3.5));
  padding: 0 max(16px, calc(var(--u) * 1.3));
  font-size: max(11px, calc(var(--u) * 0.84));
  gap: 10px;
  white-space: nowrap;
}

/* Portada en vertical (móvil y tableta en vertical): «GIRL» girada 90° por el
   borde izquierdo; «HOW TO BECOME / that» arriba; la figura a la derecha por
   delante del final de la palabra; entradilla en la columna derecha y un solo
   botón abajo (v9). */
@media (max-aspect-ratio: 1/1) {
  .home-editorial .hero--a {
    --m: min(1vw, 0.462svh);
    --t0: calc(64px + var(--m) * 3.6);
    --g: max(16px, calc(var(--m) * 4.6));
    --btn-h: max(56px, calc(var(--m) * 14.4));
    --btn-b: calc(var(--m) * 4.6 + env(safe-area-inset-bottom, 0px));
    --word-top: calc(var(--t0) + var(--m) * 31);
    --fs: calc((100svh - var(--word-top) - var(--btn-h) - var(--btn-b) - var(--m) * 7) / 2.46);
    --cap: calc(var(--fs) * 0.755);
    height: 100svh;
    min-height: 0;
  }
  .home-editorial .hero--a .stage {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
  }
  .home-editorial .hero--a .k1 {
    left: var(--g);
    top: var(--t0);
    font-size: calc(var(--m) * 9.2);
    letter-spacing: -0.07em;
    z-index: 3;
  }
  .home-editorial .hero--a .k2 {
    left: calc(var(--g) - var(--m) * 1.2);
    top: calc(var(--t0) + var(--m) * 3.4);
    font-size: calc(var(--m) * 26);
    font-weight: 500;
    letter-spacing: -0.035em;
    z-index: 3;
  }
  .home-editorial .hero--a .k3 {
    display: block;
    left: calc(var(--g) - var(--fs) * 0.124);
    right: auto;
    top: var(--word-top);
    bottom: auto;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    font-size: var(--fs);
    line-height: 1;
    letter-spacing: 0.01em;
    font-weight: 450;
    white-space: nowrap;
    z-index: 1;
  }
  .home-editorial .hero--a .k3 i {
    display: inline;
  }
  .home-editorial .hero--a .k3 .gap {
    width: auto;
    inline-size: auto;
    visibility: visible;
    letter-spacing: inherit;
    text-align: start;
  }
  .home-editorial .hero--a .fig {
    left: auto;
    right: calc(var(--m) * -22);
    top: auto;
    bottom: 0;
    height: calc(var(--m) * 150);
    width: auto;
    transform: none;
    z-index: 2;
  }
  .home-editorial .hero--a .inL {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    text-align: left;
    pointer-events: none;
    z-index: 4;
  }
  .home-editorial .hero--a .inL .deck {
    display: block;
    position: absolute;
    left: calc(var(--g) + var(--cap) + var(--m) * 5);
    right: var(--g);
    top: calc(var(--word-top) + var(--m) * 1);
    margin: 0;
    max-width: 22em;
    font-size: max(15px, calc(var(--m) * 4.1));
    line-height: 1.32;
    color: var(--ink);
    text-shadow:
      0 0 2px var(--paper),
      0 0 5px var(--paper),
      0 0 10px var(--paper);
    pointer-events: auto;
  }
  .home-editorial .hero--a .inL .deck b {
    color: var(--ink);
    font-size: 0.94em;
  }
  .home-editorial .hero--a .inL .btn {
    position: absolute;
    left: var(--g);
    right: var(--g);
    bottom: var(--btn-b);
    width: auto;
    margin: 0;
    height: var(--btn-h);
    font-size: max(13px, calc(var(--m) * 3.5));
    padding: 0 calc(var(--m) * 5.6);
    justify-content: space-between;
    pointer-events: auto;
  }
}

/* ------------------------------ variante c · tarjeta de invitación (escritorio) */
/* home-hero-cta.css (fac7c4c), solo la rama «c» y la barra. Todo dentro de
   apaisado estricto: la portada en vertical/móvil no se toca. */
@media (min-aspect-ratio: 1/1) {
  @media not all and (max-aspect-ratio: 1/1) {
    .home-editorial .hero--a[data-cta="c"] .inL {
      display: none;
    }
    /* En el aire de arriba a la derecha y tan ancha como la «L» (de 74,2 u a
       93,9 u), con su base 2,7 u por encima del remate superior. */
    .home-editorial .hero--a .hero-card {
      position: absolute;
      z-index: 5;
      right: calc(var(--u) * 6.1);
      bottom: calc(var(--u) * 30.9);
      width: max(252px, calc(var(--u) * 19.7));
      padding: max(16px, calc(var(--u) * 1.3)) max(18px, calc(var(--u) * 1.5))
        max(18px, calc(var(--u) * 1.5));
      background: var(--paper);
      border: 1px solid var(--ink);
      text-align: left;
    }
    .home-editorial .hero--a .hero-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: -13px -13px max(8px, calc(var(--u) * 0.7)) 0;
    }
    .home-editorial .hero--a .hero-card-head .caps {
      font-size: max(10px, calc(var(--u) * 0.72));
      letter-spacing: 0.16em;
      white-space: nowrap;
    }
    .home-editorial .hero--a .hero-card-close {
      display: grid;
      flex: none;
      place-items: center;
      width: 44px;
      height: 44px;
      transition: color 0.25s var(--ease);
    }
    .home-editorial .hero--a .hero-card-close svg {
      width: 16px;
      height: 16px;
    }
    .home-editorial .hero--a .hero-card-close:hover {
      color: var(--burdeos);
    }
    .home-editorial .hero--a .hero-card-close:focus-visible {
      outline-offset: -8px;
    }
    .home-editorial .hero--a .hero-card .deck {
      font-family: var(--aida);
      font-weight: 300;
      font-size: max(17px, calc(var(--u) * 1.3));
      line-height: 1.3;
      text-wrap: pretty;
    }
    .home-editorial .hero--a .hero-card .deck b {
      font-size: 0.84em;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .home-editorial .hero--a .hero-card .btn {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: max(46px, calc(var(--u) * 3.2));
      margin-top: max(16px, calc(var(--u) * 1.3));
      padding: 0 max(16px, calc(var(--u) * 1.1));
      font-size: max(11px, calc(var(--u) * 0.8));
      gap: 10px;
    }

    /* Barra: el botón (cuando la tarjeta se ha cerrado o no cabe). */
    @media (min-width: 761px) {
      .home-editorial .nav .nav-cta {
        height: 42px;
        margin-left: 28px;
        padding: 0 16px;
        font-size: 11px;
        gap: 10px;
      }
      .home-editorial .nav .nav-cta svg {
        width: 16px;
        height: 16px;
      }
      @media (max-width: 999px) {
        .home-editorial .nav[data-cta-btn="true"] ul {
          gap: 20px;
          margin-right: 26px;
        }
        .home-editorial .nav .nav-cta {
          margin-left: 20px;
          padding: 0 14px;
        }
        .home-editorial .nav .nav-cta-more {
          display: none;
        }
      }
    }
  }
}

/* --------------------------------------------------------------- móvil -- */
/* Solo lo que afecta a la primera pantalla (≤ 760 px). */
@media (max-width: 760px) {
  .home-editorial {
    font-size: 16px;
  }
  .home-editorial .deck {
    font-size: 20px;
  }
  .home-editorial .btn {
    width: 100%;
    justify-content: space-between;
    height: 56px;
    padding: 0 22px;
  }
  .home-editorial .nav .wrap {
    height: 64px;
  }
  .home-editorial .nav ul,
  .home-editorial .nav .access {
    display: none;
  }
  .home-editorial .nav .menu {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    margin-right: -4px;
  }
  .home-editorial .nav .logo img {
    height: 40px;
  }
  .home-editorial .nav .logo {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------- movimiento -- */
/* Entrada de la portada (homeMotion.ts, heroEnter): opacidad y 24 px,
   escalonada; las piezas de texto esperan a su letra (hero.js, ≤ 800 ms) y
   la figura no. En la app lo hacía framer-motion; aquí, keyframes con
   `both` para que cada pieza siga oculta hasta su retardo. La figura anima
   `bottom`, no `transform`, porque en apaisado se centra con translateX. */
.home-editorial .hero--a .k1,
.home-editorial .hero--a .k2,
.home-editorial .hero--a .k3,
.home-editorial .hero--a .inL {
  opacity: 0;
  transform: translateY(24px);
}
.home-editorial .hero--a .fig {
  opacity: 0;
}
.home-editorial .hero--a.is-text-in .k1 {
  animation: hero-up 0.7s var(--ease) 0s both;
}
.home-editorial .hero--a.is-text-in .k2 {
  animation: hero-up 0.7s var(--ease) 0.1s both;
}
.home-editorial .hero--a.is-text-in .k3 {
  animation: hero-up 0.8s var(--ease) 0.2s both;
}
.home-editorial .hero--a.is-text-in .inL {
  animation: hero-up 0.6s var(--ease) 0.45s both;
}
.home-editorial .hero--a.is-fig-in .fig {
  animation: hero-up-bottom 0.9s var(--ease) 0.3s both;
}
@keyframes hero-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hero-up-bottom {
  from {
    opacity: 0;
    bottom: -24px;
  }
  to {
    opacity: 1;
    bottom: 0;
  }
}
/* Tarjeta (HeroInviteCard.tsx): entra con opacidad 0 y 32 px en 0,7 s; sale
   a opacidad 0 y 12 px. */
.home-editorial .hero--a .hero-card {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.home-editorial .hero--a .hero-card.is-open {
  opacity: 1;
  transform: translateY(0);
}
.home-editorial .hero--a .hero-card.is-leaving {
  opacity: 0;
  transform: translateY(12px);
}

/* --------------------------------------------------- movimiento reducido -- */
@media (prefers-reduced-motion: reduce) {
  .home-editorial,
  .home-editorial *,
  .home-editorial *::before,
  .home-editorial *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  /* Sin estado oculto ni recorrido: todo a la vista desde el primer pintado. */
  .home-editorial .hero--a .k1,
  .home-editorial .hero--a .k2,
  .home-editorial .hero--a .k3,
  .home-editorial .hero--a .inL,
  .home-editorial .hero--a .fig {
    opacity: 1;
    transform: none;
  }
  .home-editorial .hero--a .fig {
    transform: translateX(-50%);
  }
  .home-editorial .hero--a .hero-card {
    opacity: 1;
    transform: none;
  }
  .home-editorial .hero--a .hero-card.is-leaving {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) and (max-aspect-ratio: 1/1) {
  .home-editorial .hero--a .fig {
    transform: none;
  }
}