/* ==========================================================
   NISSAN MX - ARTICLE TEMPLATE
   FINAL
   ========================================================== */


/* ==========================================================
   01. VARIABLES / BASE
   ========================================================== */

body:has(#nmx-article-hero) {
  --nmx-black: #111;
  --nmx-black-soft: #292929;

  --nmx-gray: #555;
  --nmx-gray-soft: #707070;

  --nmx-border: #d8d8d8;
  --nmx-border-soft: rgba(17, 17, 17, 0.10);

  --nmx-surface: #f7f7f7;
  --nmx-white: #fff;

  --nmx-text-width: 820px;
  --nmx-media-width: 1000px;
  --nmx-table-width: 1100px;

  overflow-x: hidden;
}

body:has(#nmx-article-hero) *,
body:has(#nmx-article-hero) *::before,
body:has(#nmx-article-hero) *::after {
  box-sizing: border-box;
}


/* ==========================================================
   02. HEADER DEL ARTÍCULO
   ========================================================== */

body:has(#nmx-article-hero)
.pageHeader .c_023 {
  padding: 14px 24px 26px !important;
}

body:has(#nmx-article-hero)
.pageHeader .c_023 .container-inner {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

body:has(#nmx-article-hero)
.pageHeader .c_023-1 {
  text-align: center;
}

body:has(#nmx-article-hero)
.pageHeader .heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body:has(#nmx-article-hero)
.pageHeader .heading-group > p {
  order: -1;
  margin: 0 0 10px;
}


/* Fecha */

body:has(#nmx-article-hero)
.pageHeader .strapline {
  margin: 0;

  color: var(--nmx-black);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;

  text-transform: none !important;
}


/* H1 */

body:has(#nmx-article-hero)
.pageHeader h1 {
  width: 100%;
  max-width: 1000px;

  margin: 0 auto;

  color: var(--nmx-black);

  font-size: clamp(36px, 3vw, 48px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;

  overflow-wrap: break-word;

  text-transform: none !important;
}

body:has(#nmx-article-hero)
.pageHeader h1 .headline {
  color: inherit;
  font: inherit;

  text-transform: none !important;
}


/* Entradilla */

body:has(#nmx-article-hero)
.pageHeader .content-copy {
  width: 100%;
  max-width: 820px;

  margin: 14px auto 0;

  color: var(--nmx-gray);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;

  text-align: center;

  text-transform: none !important;
}


/* ==========================================================
   03. ESPACIO SUPERIOR
   ========================================================== */

@media (min-width: 60em) {

  body:has(#nmx-article-hero)
  #container > .grid-row:has(.pageHeader) {
    margin-top: -58px !important;
  }

}


@media (max-width: 36.3125em) {

  body:has(#nmx-article-hero)
  #container > .grid-row:has(.pageHeader) {
    margin-top: -42px !important;
  }

}


/* ==========================================================
   04. HERO PRINCIPAL
   ========================================================== */

#nmx-article-hero {
  margin: 10px auto 0 !important;
}

#nmx-article-hero
.c_029.edge figure {
  height: clamp(390px, 31vw, 520px);

  margin: 0 !important;

  overflow: hidden;
}

#nmx-article-hero
.c_029.edge picture {
  display: block;

  width: 100%;
  height: 100%;
}

#nmx-article-hero
.c_029.edge img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;

  object-fit: cover;
  object-position: center 52%;

  border-radius: 0 !important;
}


/* ==========================================================
   05. AUDIO NATIVO / GLASS
   ========================================================== */

#nmx-article-audio {
  margin-top: 22px !important;
}

#nmx-article-audio
.c_001 {
  width: 100%;
  max-width: 900px;

  margin-left: auto;
  margin-right: auto;
}

#nmx-article-audio
.nmx-audio {
  width: 100%;

  background: rgba(248, 248, 248, 0.78);

  border: 1px solid var(--nmx-border-soft);
  border-radius: 16px;

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.055);

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  overflow: hidden;
}

#nmx-article-audio
.nmx-audio__inner {
  display: flex;
  align-items: center;

  width: 100%;

  gap: 24px;

  padding: 15px 20px;
}

#nmx-article-audio
.nmx-audio__header {
  flex: 0 0 auto;
}

#nmx-article-audio
.nmx-audio__eyebrow {
  display: block;

  margin: 0;

  color: var(--nmx-black);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.055em;

  white-space: nowrap;

  text-transform: uppercase;
}

#nmx-article-audio
.nmx-audio__native {
  display: block;

  flex: 1;

  width: 100%;
  min-width: 280px;
  max-width: 620px;

  height: 40px;

  margin: 0;

  accent-color: var(--nmx-black);
}

#nmx-article-audio
.nmx-audio__native::-webkit-media-controls-panel {
  background-color: rgba(248, 248, 248, 0.92);
}


/* ==========================================================
   06. BOTONES / CTA
   ========================================================== */

.nmx-article-btn,
#nmx-article-body
.nmx-article-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;

  gap: 10px;

  padding: 0 22px;

  color: #fff !important;
  background: var(--nmx-black) !important;

  border: 1px solid var(--nmx-black);
  border-radius: 999px;

  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.08);

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.045em;

  text-decoration: none !important;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.nmx-article-btn::after,
#nmx-article-body
.nmx-article-cta::after {
  content: "›";

  color: #fff;

  font-size: 19px;
  line-height: 1;

  transform: translateY(-1px);

  transition: transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {

  .nmx-article-btn:hover,
  #nmx-article-body
  .nmx-article-cta:hover {
    background: var(--nmx-black-soft) !important;

    box-shadow:
      0 9px 24px rgba(0, 0, 0, 0.15);

    transform: translateY(-2px);
  }

  .nmx-article-btn:hover::after,
  #nmx-article-body
  .nmx-article-cta:hover::after {
    transform:
      translateX(2px)
      translateY(-1px);
  }

}

.nmx-article-btn:active,
#nmx-article-body
.nmx-article-cta:active {
  transform: scale(0.98);
}

.nmx-article-btn:focus-visible,
#nmx-article-body
.nmx-article-cta:focus-visible {
  outline: 2px solid var(--nmx-black);
  outline-offset: 3px;
}


/* ==========================================================
   07. CUERPO DE LA NOTA
   ========================================================== */

#nmx-article-body {
  margin-top: 24px !important;
}

#nmx-article-body
.c_001:not(:has(.nmx-article-table)) {
  width: 100%;
  max-width: var(--nmx-text-width);

  margin-left: auto;
  margin-right: auto;
}

#nmx-article-body
.c_001 p {
  margin: 0 0 18px;

  color: var(--nmx-gray);

  font-size: 17px;
  font-weight: 400;
  line-height: 1.68;

  overflow-wrap: break-word;

  text-transform: none !important;
}

#nmx-article-body
.c_001 p:last-child {
  margin-bottom: 0;
}


/* Links editoriales */

#nmx-article-body
.c_001 p a:not(.nmx-article-btn):not(.nmx-article-cta) {
  color: var(--nmx-black);

  font-weight: 600;

  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color:
    rgba(17, 17, 17, 0.35);

  text-underline-offset: 3px;
}


/* ==========================================================
   08. H2
   ========================================================== */

#nmx-article-body
.c_001 .heading-group {
  margin:
    32px 0
    14px;
}

#nmx-article-body
.c_001 h2.heading,
#nmx-article-body
.c_001 h2.heading span {
  margin: 0;

  color: var(--nmx-black);

  font-size:
    clamp(24px, 1.8vw, 29px);

  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;

  overflow-wrap: break-word;

  text-transform: none !important;
}


/* ==========================================================
   09. LISTAS
   ========================================================== */

#nmx-article-body
.c_001 ul,
#nmx-article-body
.c_001 ol {
  margin:
    17px 0
    22px;

  padding-left: 24px;

  color: var(--nmx-gray);
}

#nmx-article-body
.c_001 li {
  margin-bottom: 8px;

  font-size: 16px;
  line-height: 1.58;
}


/* ==========================================================
   10. IMÁGENES INTERNAS
   ========================================================== */

#nmx-article-body
.image.parbase {
  width: 100%;
  max-width: var(--nmx-media-width);

  margin:
    22px auto
    24px !important;

  padding: 0 !important;
}

#nmx-article-body
.image.parbase .c_029,
#nmx-article-body
.image.parbase figure,
#nmx-article-body
.image.parbase picture {
  display: block;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  border-radius: 18px;
}

#nmx-article-body
.image.parbase figure {
  aspect-ratio: 16 / 9;
}

#nmx-article-body
.image.parbase picture {
  height: 100%;
}

#nmx-article-body
.image.parbase img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border-radius: 18px;

  transform: scale(1);

  transition:
    transform 450ms
    cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {

  #nmx-article-body
  .image.parbase:hover img {
    transform: scale(1.015);
  }

}

#nmx-article-body
.image.parbase figcaption:not(:empty) {
  margin-top: 8px;

  color: var(--nmx-gray-soft);

  font-size: 12px;
  line-height: 1.5;
}


/* ==========================================================
   11. TABLA / DESKTOP
   ========================================================== */

#nmx-article-body
.c_001:has(.nmx-article-table) {
  width: 100%;
  max-width: var(--nmx-table-width);

  margin:
    30px auto
    38px;
}

.nmx-article-table {
  width: 100%;
}

.nmx-article-table__title {
  width: 100%;

  margin:
    0 0
    13px;

  padding: 0;

  color: var(--nmx-black);

  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: 0;

  text-align: left;

  text-transform: none !important;
}

.nmx-article-table__hint {
  display: none;

  margin: 0;

  color: var(--nmx-gray-soft);

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.nmx-article-table__container {
  width: 100%;
}

.nmx-article-table__table {
  width: 100%;

  border: 1px solid var(--nmx-border);
  border-radius: 16px;

  border-collapse: separate;
  border-spacing: 0;

  table-layout: fixed;

  overflow: hidden;

  background: var(--nmx-white);

  box-shadow:
    0 7px 26px
    rgba(0, 0, 0, 0.035);
}

.nmx-article-table__heading:nth-child(1),
.nmx-article-table__feature {
  width: 24%;
}

.nmx-article-table__heading:nth-child(2) {
  width: 34%;
}

.nmx-article-table__heading:nth-child(3) {
  width: 42%;
}

.nmx-article-table__heading,
.nmx-article-table__feature,
.nmx-article-table__cell {
  padding:
    18px 20px;

  color: var(--nmx-black);

  border-right:
    1px solid var(--nmx-border);

  border-bottom:
    1px solid var(--nmx-border);

  font-size: 14px;
  line-height: 1.5;

  overflow-wrap: break-word;

  text-align: left;
  vertical-align: middle;
}

.nmx-article-table__heading {
  background: #f4f4f4;

  font-weight: 700;
}

.nmx-article-table__feature {
  background: #fafafa;

  font-weight: 700;
}

.nmx-article-table__cell {
  background: #fff;
}

.nmx-article-table__row > *:last-child {
  border-right: 0;
}

.nmx-article-table__body
.nmx-article-table__row:last-child > * {
  border-bottom: 0;
}


/* ==========================================================
   12. FLOATING NAV / BASE
   DARK GLASS
   ========================================================== */

body:has(#nmx-article-hero)
.c_255 {
  position: fixed !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  z-index: 9999 !important;
}

body:has(#nmx-article-hero)
.c_255 .nav-list {
  margin: 0 !important;

  padding: 5px !important;

  background:
    rgba(18, 18, 18, 0.82) !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.14) !important;

  box-shadow:
    0 10px 32px
    rgba(0, 0, 0, 0.22);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(135%);

  backdrop-filter:
    blur(18px)
    saturate(135%);

  overflow: hidden;
}

body:has(#nmx-article-hero)
.c_255 .nav-item {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;

  list-style: none !important;
}

body:has(#nmx-article-hero)
.c_255 .nav-link {
  margin: 0 !important;

  color: #fff !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  text-decoration: none !important;

  transition:
    background-color 180ms ease;
}

body:has(#nmx-article-hero)
.c_255 .nav-link span {
  color: #fff !important;

  font-weight: 600;

  text-transform: uppercase;
}


/* ==========================================================
   13. FLOATING NAV / DESKTOP
   EXPANDIBLE
   ========================================================== */

@media (min-width: 36.3126em) {

  /*
   * Dock cerrado.
   */

  body:has(#nmx-article-hero)
  .c_255 {
    top: 50% !important;

    right: 16px !important;
    bottom: auto !important;
    left: auto !important;

    width: 54px !important;

    transform:
      translateY(-50%) !important;

    transition:
      width 240ms
      cubic-bezier(0.2, 0.7, 0.2, 1);
  }


  body:has(#nmx-article-hero)
  .c_255 .nav-list {
    display: flex !important;
    flex-direction: column;

    width: 100% !important;

    border-radius: 18px;

    transition:
      background-color 220ms ease,
      box-shadow 220ms ease;
  }


  body:has(#nmx-article-hero)
  .c_255 .nav-item {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
  }


  body:has(#nmx-article-hero)
  .c_255 .nav-item + .nav-item {
    margin-top: 3px !important;
  }


  /*
   * Cada link.
   */

  body:has(#nmx-article-hero)
  .c_255 .nav-link {
    position: relative;

    display: block !important;

    width: 100% !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 13px;

    overflow: hidden;
  }


  /*
   * Icono.
   * Siempre queda fijo a la derecha.
   */

  body:has(#nmx-article-hero)
  .c_255 .nav-link::before {
    position: absolute !important;

    top: 50% !important;
    right: 10px !important;

    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
      rgba(255, 255, 255, 0.88) !important;

    background: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-size: 23px !important;
    line-height: 24px !important;

    text-align: center;

    opacity: 1 !important;

    transform:
      translateY(-50%) !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition:
      color 160ms ease,
      opacity 160ms ease;
  }


  /*
   * Texto oculto mientras está cerrado.
   */

  body:has(#nmx-article-hero)
  .c_255 .nav-link span {
    position: absolute;

    top: 50%;
    left: 14px;

    display: block !important;

    width: 118px;

    margin: 0;
    padding: 0;

    color:
      rgba(255, 255, 255, 0.72) !important;

    font-size: 10px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.11em;

    white-space: nowrap;

    text-align: left;

    opacity: 0;

    pointer-events: none;

    transform:
      translate(
        10px,
        -50%
      );

    transition:
      color 160ms ease,
      opacity 160ms ease,
      transform 230ms ease;
  }


  /* ========================================================
     APERTURA DEL DOCK
     ======================================================== */

  body:has(#nmx-article-hero)
  .c_255:hover,

  body:has(#nmx-article-hero)
  .c_255:focus-within {
    width: 190px !important;
  }


  body:has(#nmx-article-hero)
  .c_255:hover .nav-list,

  body:has(#nmx-article-hero)
  .c_255:focus-within .nav-list {
    background:
      rgba(18, 18, 18, 0.88)
      !important;

    box-shadow:
      0 14px 38px
      rgba(0, 0, 0, 0.25);
  }


  /*
   * Aparecen las etiquetas.
   * Ningún icono se mueve.
   */

  body:has(#nmx-article-hero)
  .c_255:hover .nav-link span,

  body:has(#nmx-article-hero)
  .c_255:focus-within .nav-link span {
    opacity: 1;

    transform:
      translate(
        0,
        -50%
      );
  }

}


/* ==========================================================
   14. FLOATING NAV / DESKTOP HOVER INDIVIDUAL
   ========================================================== */

@media (min-width: 36.3126em)
       and (hover: hover)
       and (pointer: fine) {

  /*
   * Estado general abierto:
   * texto e iconos ligeramente atenuados.
   */

  body:has(#nmx-article-hero)
  .c_255:hover .nav-link span {
    color:
      rgba(255, 255, 255, 0.68)
      !important;
  }


  body:has(#nmx-article-hero)
  .c_255:hover .nav-link::before {
    color:
      rgba(255, 255, 255, 0.72)
      !important;

    transform:
      translateY(-50%) !important;
  }


  /*
   * Opción bajo el cursor.
   */

  body:has(#nmx-article-hero)
  .c_255 .nav-link:hover {
    background:
      rgba(255, 255, 255, 0.10)
      !important;

    transform:
      none !important;
  }


  body:has(#nmx-article-hero)
  .c_255 .nav-link:hover span {
    color:
      #fff !important;
  }


  body:has(#nmx-article-hero)
  .c_255 .nav-link:hover::before {
    color:
      #fff !important;

    opacity:
      1 !important;

    transform:
      translateY(-50%) !important;
  }

}


/* ==========================================================
   15. TABLET
   ========================================================== */

@media (
  min-width: 36.3126em
) and (
  max-width: 59.99em
) {

  body:has(#nmx-article-hero)
  .pageHeader .c_023 {
    padding:
      10px 22px
      22px !important;
  }


  body:has(#nmx-article-hero)
  .pageHeader h1 {
    max-width: 760px;

    font-size:
      clamp(32px, 5vw, 42px);
  }


  #nmx-article-hero
  .c_029.edge figure {
    height:
      clamp(300px, 45vw, 390px);
  }

}


/* ==========================================================
   16. MOBILE
   ========================================================== */

@media (max-width: 36.3125em) {

  /* --------------------------------------------------------
     HEADER
     -------------------------------------------------------- */

  body:has(#nmx-article-hero)
  .pageHeader .c_023 {
    padding:
      4px 18px
      18px !important;
  }


  body:has(#nmx-article-hero)
  .pageHeader .c_023-1 {
    text-align: left;
  }


  body:has(#nmx-article-hero)
  .pageHeader .heading-group {
    align-items: flex-start;
  }


  body:has(#nmx-article-hero)
  .pageHeader
  .heading-group > p {
    margin-bottom: 8px;
  }


  body:has(#nmx-article-hero)
  .pageHeader .strapline {
    font-size: 10px;
  }


  body:has(#nmx-article-hero)
  .pageHeader h1 {
    width: 100%;
    max-width: 100%;

    margin: 0;

    font-size:
      clamp(28px, 7.5vw, 34px);

    line-height: 1.08;

    letter-spacing: -0.02em;

    text-align: left;
  }


  body:has(#nmx-article-hero)
  .pageHeader .content-copy {
    width: 100%;
    max-width: 100%;

    margin-top: 12px;

    font-size: 15px;
    line-height: 1.5;

    text-align: left;
  }


  /* --------------------------------------------------------
     HERO MOBILE
     -------------------------------------------------------- */

  #nmx-article-hero {
    margin-top: 8px !important;
  }


  #nmx-article-hero
  .c_029.edge {
    width:
      calc(100% - 28px);

    margin-left: auto;
    margin-right: auto;

    overflow: hidden;

    border-radius: 16px;
  }


  #nmx-article-hero
  .c_029.edge figure {
    height: auto;

    margin: 0 !important;

    aspect-ratio: 16 / 9;

    border-radius: 16px;
  }


  #nmx-article-hero
  .c_029.edge picture,

  #nmx-article-hero
  .c_029.edge img {
    border-radius: 16px;
  }


  #nmx-article-hero
  .c_029.edge img {
    object-position: center;
  }


  /* --------------------------------------------------------
     AUDIO MOBILE
     -------------------------------------------------------- */

  #nmx-article-audio {
    margin-top: 18px !important;
  }


  #nmx-article-audio
  .nmx-audio {
    border-radius: 14px;

    box-shadow:
      0 6px 22px
      rgba(0, 0, 0, 0.045);
  }


  #nmx-article-audio
  .nmx-audio__inner {
    display: block;

    padding: 16px;
  }


  #nmx-article-audio
  .nmx-audio__header {
    margin-bottom: 12px;
  }


  #nmx-article-audio
  .nmx-audio__eyebrow {
    font-size: 10px;
  }


  #nmx-article-audio
  .nmx-audio__native {
    width: 100%;
    max-width: none;
    min-width: 0;

    height: 42px;
  }


  /* --------------------------------------------------------
     BODY MOBILE
     -------------------------------------------------------- */

  #nmx-article-body {
    margin-top: 20px !important;
  }


  #nmx-article-body
  .c_001:not(:has(.nmx-article-table)) {
    max-width: 100%;
  }


  #nmx-article-body
  .c_001 p {
    margin-bottom: 17px;

    font-size: 16px;
    line-height: 1.62;
  }


  /* H2 */

  #nmx-article-body
  .c_001 .heading-group {
    margin:
      28px 0
      12px;
  }


  #nmx-article-body
  .c_001 h2.heading,

  #nmx-article-body
  .c_001 h2.heading span {
    font-size: 22px;
    line-height: 1.2;
  }


  /* Listas */

  #nmx-article-body
  .c_001 ul,

  #nmx-article-body
  .c_001 ol {
    margin:
      15px 0
      20px;

    padding-left: 20px;
  }


  #nmx-article-body
  .c_001 li {
    font-size: 15px;
    line-height: 1.55;
  }


  /* --------------------------------------------------------
     IMÁGENES MOBILE
     -------------------------------------------------------- */

  #nmx-article-body
  .image.parbase {
    width: 100%;
    max-width: 100%;

    margin:
      18px auto
      22px !important;
  }


  #nmx-article-body
  .image.parbase .c_029,

  #nmx-article-body
  .image.parbase figure,

  #nmx-article-body
  .image.parbase picture,

  #nmx-article-body
  .image.parbase img {
    border-radius: 14px;
  }


  /* ========================================================
     TABLA MOBILE
     ======================================================== */

  #nmx-article-body
  .c_001:has(.nmx-article-table) {
    width: 100%;
    max-width: 100%;

    margin:
      28px auto
      34px;
  }


  .nmx-article-table__title {
    margin-bottom: 5px;

    font-size: 17px;
    line-height: 1.35;
  }


  .nmx-article-table__hint {
    display: block;

    margin-bottom: 10px;
  }


  .nmx-article-table__container {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    border:
      1px solid var(--nmx-border);

    border-radius: 14px;

    background: #fff;

    box-shadow:
      0 6px 22px
      rgba(0, 0, 0, 0.04);
  }


  .nmx-article-table__table {
    width: 760px;
    min-width: 760px;

    border: 0;
    border-radius: 0;

    table-layout: fixed;

    overflow: visible;

    box-shadow: none;
  }


  .nmx-article-table__heading:nth-child(1),

  .nmx-article-table__feature {
    width: 180px;
  }


  .nmx-article-table__heading:nth-child(2) {
    width: 260px;
  }


  .nmx-article-table__heading:nth-child(3) {
    width: 320px;
  }


  .nmx-article-table__heading,

  .nmx-article-table__feature,

  .nmx-article-table__cell {
    padding:
      15px 16px;

    font-size: 13px;
    line-height: 1.45;

    vertical-align: top;
  }


  .nmx-article-table__heading:first-child,

  .nmx-article-table__feature {
    position: sticky;

    left: 0;

    z-index: 2;

    background: #f4f4f4;

    box-shadow:
      5px 0 10px -8px
      rgba(0, 0, 0, 0.40);
  }


  .nmx-article-table__heading:first-child {
    z-index: 3;
  }


  /* ========================================================
     FLOATING NAV / MOBILE GLASS
     ======================================================== */

  body:has(#nmx-article-hero)
  .c_255 {
    top: auto !important;

    left: 12px !important;
    right: 12px !important;

    bottom:
      max(
        10px,
        env(safe-area-inset-bottom)
      ) !important;

    width: auto !important;

    transform: none !important;
  }


  body:has(#nmx-article-hero)
  .c_255 .nav-list {
    display: flex !important;

    width: 100%;
    max-width: 520px;

    margin:
      0 auto !important;

    padding: 5px !important;

    background:
      rgba(18, 18, 18, 0.78) !important;

    border:
      1px solid
      rgba(255, 255, 255, 0.16) !important;

    border-radius: 19px;

    box-shadow:
      0 12px 34px
      rgba(0, 0, 0, 0.22);

    -webkit-backdrop-filter:
      blur(20px)
      saturate(140%);

    backdrop-filter:
      blur(20px)
      saturate(140%);
  }


  body:has(#nmx-article-hero)
  .c_255 .nav-item {
    flex:
      1 1 33.333%;

    min-width: 0;
  }


  body:has(#nmx-article-hero)
  .c_255 .nav-link {
    display: flex !important;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 52px !important;

    gap: 4px;

    padding:
      5px 3px
      4px !important;

    border-radius: 14px;
  }


  /*
   * Mobile vuelve a usar el icono en flujo normal.
   */

  body:has(#nmx-article-hero)
  .c_255 .nav-link::before {
    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    background: none !important;

    border: 0 !important;

    font-size: 19px !important;
    line-height: 1 !important;

    opacity: 1 !important;

    transform: none !important;
  }


  body:has(#nmx-article-hero)
  .c_255 .nav-link span {
    position: static;

    display: block !important;

    width: auto;
    max-width: none;

    margin: 0;

    color:
      #fff !important;

    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.1;

    letter-spacing: 0.10em;

    white-space: nowrap;

    text-align: center;

    opacity: 0.92;

    transform: none;

    overflow: visible;

    pointer-events: auto;

    text-transform: uppercase;
  }

}


/* ==========================================================
   17. FLOATING NAV / ACTIVE
   ========================================================== */

body:has(#nmx-article-hero)
.c_255 .nav-link:active {
  background:
    rgba(255, 255, 255, 0.14)
    !important;
}


/* ==========================================================
   18. FLOATING NAV / FOCUS
   ========================================================== */

body:has(#nmx-article-hero)
.c_255 .nav-link:focus-visible {
  outline:
    2px solid
    rgba(255, 255, 255, 0.95);

  outline-offset: -3px;
}


/* ==========================================================
   19. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .nmx-article-btn,

  #nmx-article-body
  .nmx-article-cta,

  #nmx-article-body
  .image.parbase img,

  body:has(#nmx-article-hero)
  .c_255,

  body:has(#nmx-article-hero)
  .c_255 .nav-list,

  body:has(#nmx-article-hero)
  .c_255 .nav-link,

  body:has(#nmx-article-hero)
  .c_255 .nav-link span,

  body:has(#nmx-article-hero)
  .c_255 .nav-link::before {
    transition: none !important;
  }


  .nmx-article-btn:hover,

  #nmx-article-body
  .nmx-article-cta:hover,

  #nmx-article-body
  .image.parbase:hover img {
    transform: none;
  }

}