:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey-100: #f2f2f2;
  --color-grey-200: #c3c3c3;
  --color-grey-300: #494847;

  --code-arrow: '\2799';

  --size-text: 1.8rem;
  --size-text-ref: 1.3rem;
  --spacer-text: 2.4rem;

  --container-text: 85rem;
}

html,
body {
  scroll-behavior: smooth;
}

:target:not([id^='1-']),
:target:not([id^='2-']),
:target:not([id^='3-']),
:target:not([id^='4-']),
:target:not([id^='5-']),
:target:not([id^='6-']),
:target:not([id^='7-']) {
  scroll-margin-top: 6.5rem;
}

:root {
  .mainheader.minify {
    box-shadow: none;

    & ~ .mainbodier {
      .fake-subnav {
        position: fixed;
        top: 6.3rem;
        box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.25);
      }
    }
  }

  .wrapper.fixer.auxheader {
    @media (width >= 768px) {
      position: absolute;
    }
  }

  .maintabs {
    li > .be_on + .blindBox ul {
      @media (width > 768px) {
        max-height: 4.2em;
      }
    }
  }

  .subheader {
    .navBox {
      @media (768px < width < 1024px) {
        min-height: auto;
      }
    }
  }

  .fake-subnav {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    background-color: var(--color-grey-100);
    position: fixed;
    z-index: 3;

    + [data-tipo='mod_rich_text'] {
      padding-top: 4.7rem;
    }

    @media (width >= 768px) {
      position: sticky;
      top: 0;

      + [data-tipo='mod_rich_text'] {
        padding-top: 0;
      }
    }

    .grid {
      max-width: 121.2rem;
      width: 100%;
      margin: 0 auto;
      background-color: inherit;
      display: block;
    }

    .gridBox {
      padding-top: 0;
      padding-bottom: 0;
    }

    .cellContent {
      overflow: auto;

      @media (width > 768px) {
        display: flex;
        justify-content: center;
      }
    }

    ul {
      display: flex;
      flex-wrap: nowrap;
      white-space: nowrap;
      align-items: center;
      gap: 1.6rem;
      margin: 0 !important;

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

      li::before {
        content: none;
      }

      li a {
        color: var(--color-grey-300);
        padding-bottom: 0.2rem;
        font-size: 1.8rem;
        border-width: 0 0 0.3rem 0;
        border-style: solid;
        border-color: transparent;
      }

      li #link-crtve + a,
      li #link-tve + a,
      li #link-rne + a,
      li #link-medios-interactivos + a,
      li #link-cuestiones-sensibles + a,
      li #link-el-lenguaje + a,
      li #link-anexos + a {
        border-color: var(--color-grey-300);
      }
    }
  }

  .fake-subnav--title-page {
    ul {
      li {
        display: flex;
      }

      li a {
        background-color: rgba(0, 0, 0, 0.1);
        padding: 0.4rem 1.2rem;
        border-radius: 0.3rem;
      }

      li a:hover {
        background-color: var(--color-black);
        color: var(--color-white);
        border-color: transparent;
      }
    }
  }

  .anchors {
    width: var(--container-text) !important;
    max-width: 100%;
    padding: 1.6rem;

    ul {
      text-align: left;
      list-style: disc;
      padding-left: 1.6rem;
      font-size: 1.6rem;
      line-height: 1.5;

      li {
        margin-bottom: 0.8rem;
        list-style: inherit;
      }

      li a {
        text-decoration: underline;
      }

      li a:hover {
        text-decoration: none;
      }

      li ul {
        margin-top: 0.8rem;
      }
    }
  }

  [data-tipo='mod_rich_text'] {
    max-width: var(--container-text);

    h2 {
      a[href^='#'] {
        display: inline-block;
        width: 2rem;
        height: 2.7rem;
        white-space: nowrap;
        overflow: hidden;
        text-indent: 4rem;
        position: relative;
        top: 0.5rem;
      }

      a::before {
        content: var(--code-arrow);
        font-size: 2.4rem;
        transform: rotate(-90deg);
        text-indent: 0;
        float: left;
        position: relative;
      }
    }

    .html:has(hr) {
      margin-top: var(--spacer-text);

      & ~ p {
        font-size: var(--size-text-ref);
        margin-top: 0 !important;

        @media (width >= 768px) {
          margin-top: 0.8rem !important;
        }
      }
    }

    .cellContent {
      > p,
      > ul > li,
      > ol > li {
        @media (width >= 768px) {
          font-size: var(--size-text);
          line-height: 1.5;
        }
      }

      > *:not(.mediaBox),
      > ul > li,
      > ol > li {
        margin-top: var(--spacer-text);
      }

      > ul {
        padding: 0;
      }

      > p a {
        word-break: break-word;
      }
    }
  }

  .tabla-anexo {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.45;

    @media (width >= 768px) {
      font-size: var(--size-text);
      line-height: 1.5;
      font-weight: 400;
    }
  }

  .tabla-anexo td {
    border-top: 0.1rem solid var(--color-grey-200);
    padding: 0.8rem 0;
  }
}