.M02 {
  height: calc(100dvh - 104px);
  background-color: #FFF;
  padding: 28px;
  border-radius: 24px;
  position: relative;
  overflow: hidden; }
  .M02 .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; }
    @media screen and (max-width: 990px) {
      .M02 .top {
        padding-inline: 16px;
        gap: 10px; } }
  .M02 .filtros {
    position: relative;
    width: fit-content;
    border-radius: 99px;
    border: 1px solid #007F33;
    background-color: #FFF;
    padding: 4px;
    z-index: 1; }
    .M02 .filtros .label {
      display: flex;
      position: absolute;
      left: 4px;
      top: -11px;
      color: #007F33;
      font-family: IberPangea;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 100%;
      /* 12px */
      border-radius: 99px;
      background-color: #FFF;
      padding: 4px 8px; }
    .M02 .filtros .trigger {
      display: flex;
      height: 32px;
      padding: 8px;
      align-items: center;
      gap: 8px;
      background-color: #fff;
      transition: .3s all ease-in-out;
      border: 0;
      border-radius: 99px;
      color: #00402A;
      font-family: IberPangea;
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 100%; }
      .M02 .filtros .trigger:hover, .M02 .filtros .trigger.active {
        background-color: #E6F4EA; }
      .M02 .filtros .trigger:focus-visible {
        outline: 2px solid #007F33; }
      @media screen and (max-width: 990px) {
        .M02 .filtros .trigger {
          width: 100%;
          justify-content: space-between; } }
    .M02 .filtros .filters-dropdown {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 100%;
      margin-top: 5px;
      width: max-content;
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      background-color: #FFF;
      z-index: 1;
      box-shadow: 0 100px 80px 0 rgba(0, 0, 0, 0.07), 0 41.778px 33.422px 0 rgba(0, 0, 0, 0.05), 0 22.336px 17.869px 0 rgba(0, 0, 0, 0.04), 0 12.522px 10.017px 0 rgba(0, 0, 0, 0.04), 0 6.65px 5.32px 0 rgba(0, 0, 0, 0.03), 0 2.767px 2.214px 0 rgba(0, 0, 0, 0.02); }
      .M02 .filtros .filters-dropdown button {
        color: #3A3A3A;
        font-family: IberPangea;
        font-size: 1rem;
        font-weight: 400;
        line-height: normal;
        text-align: left;
        padding: 8px 8px 8px 34px;
        border: 0;
        background-color: transparent; }
        .M02 .filtros .filters-dropdown button:focus-visible {
          outline: 2px solid #007F33; }
      .M02 .filtros .filters-dropdown.active {
        opacity: 1;
        visibility: visible; }
    @media screen and (max-width: 990px) {
      .M02 .filtros {
        max-width: 200px;
        width: 50%; } }
  .M02 .counter {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #615D5A;
    font-family: IberPangea;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.18px;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px; }
    @media screen and (min-width: 1440px) {
      .M02 .counter {
        margin-top: 40px; } }
    .M02 .counter input {
      max-width: 50px;
      border: 0;
      pointer-events: none;
      -moz-appearance: textfield;
      color: #615D5A;
      font-family: IberPangea;
      font-size: 1.125rem;
      font-weight: 400;
      line-height: normal;
      letter-spacing: -0.18px; }
      .M02 .counter input.current {
        text-align: right; }
      .M02 .counter input.total {
        text-align: left; }
      .M02 .counter input::-webkit-outer-spin-button, .M02 .counter input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0; }
    .M02 .counter.active {
      opacity: 1;
      visibility: visible; }
  .M02 .carousel-container {
    position: relative; }
  .M02 .expand-image {
    position: absolute;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 99px;
    opacity: 0;
    visibility: hidden;
    z-index: 9;
    left: 55vw;
    top: 11%; }
    .M02 .expand-image.active {
      animation: showButton 4s ease-in-out forwards; }

@keyframes showButton {
  0% {
    opacity: 0;
    visibility: hidden; }
  80% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }
    .M02 .expand-image:focus-visible {
      outline: 2px solid #007F33;
      outline-offset: 2px; }
    @media (max-width: 450px) {
      .M02 .expand-image {
        left: 60vw; } }
    @media (min-width: 1024px) {
      .M02 .expand-image {
        left: 62vw;
        top: 17%; } }
    @media (min-width: 1267px) {
      .M02 .expand-image {
        left: 57vw; } }
    @media (min-width: 1440px) {
      .M02 .expand-image {
        left: 64vw; } }
    @media (min-width: 1920px) {
      .M02 .expand-image {
        left: 60vw;
        top: 15%; } }
  .M02 .contexto {
    display: flex;
    padding: 4px 4px 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 99px;
    border: 1px solid #007F33;
    background-color: #FFF;
    color: var(--Forest-200, #002015);
    font-family: IberPangea;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    visibility: hidden;
    opacity: 0; }
    .M02 .contexto .icon {
      min-width: 32px;
      max-width: 32px;
      height: 32px;
      border-radius: 99px;
      background-color: #007F33;
      padding: 8px;
      overflow: hidden;
      position: relative; }
    .M02 .contexto svg {
      position: absolute;
      left: 50%;
      width: 16px;
      height: 16px;
      transition: all 0.2s ease-in-out;
      color: #fff; }
      .M02 .contexto svg:first-child {
        animation: arrowBounceReturn 0.6s ease-in-out forwards;
        top: 50%;
        transform: translate(-50%, -50%); }
      .M02 .contexto svg:last-child {
        top: -100%;
        transform: translate(-50%, -50%); }
    .M02 .contexto:hover .icon svg:first-child {
      animation: none;
      top: 150%;
      transform: translate(-50%, -50%); }
    .M02 .contexto:hover .icon svg:last-child {
      animation: arrowBounce 0.6s ease-in-out forwards;
      top: 50%;
      transform: translate(-50%, -50%); }
    .M02 .contexto.active {
      visibility: visible;
      opacity: 1; }
    .M02 .contexto:focus-visible {
      outline: 2px solid #007F33; }
    @media screen and (max-width: 990px) {
      .M02 .contexto {
        width: 50%;
        justify-content: space-between; } }
  .M02 .title-button.openCarousel {
    align-items: center;
    gap: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); }
    .M02 .title-button.openCarousel > * {
      position: static !important;
      transform: none !important; }
  .M02 .titulo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    .M02 .titulo > * {
      color: #007F33;
      text-align: center;
      font-family: IberPangea;
      font-size: 2.25rem;
      font-weight: 600;
      line-height: 90%;
      margin: 0; }
      .M02 .titulo > *.category-name {
        font-size: 1.125rem; }
      @media screen and (max-width: 990px) {
        .M02 .titulo > * {
          font-size: 3rem; } }
    @media screen and (max-width: 990px) {
      .M02 .titulo {
        position: static;
        transform: none;
        margin-bottom: 28px;
        padding-inline: 16px; } }
  .M02 .close-carousel {
    border: 0;
    background-color: transparent;
    display: none;
    visibility: hidden;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 99px; }
    @media screen and (max-width: 990px) {
      .M02 .close-carousel {
        display: none !important; } }
    .M02 .close-carousel .icon {
      width: 32px;
      height: 32px;
      border-radius: 99px;
      background-color: #DCEBE1;
      padding: 8px;
      overflow: hidden;
      position: relative; }
    .M02 .close-carousel svg {
      position: absolute;
      left: 50%;
      width: 16px;
      height: 16px;
      transition: all 0.2s ease-in-out;
      color: #00402A; }
      .M02 .close-carousel svg:first-child {
        animation: arrowBounceReturn 0.6s ease-in-out forwards;
        top: 50%;
        transform: translate(-50%, -50%); }
      .M02 .close-carousel svg:last-child {
        top: -100%;
        transform: translate(-50%, -50%); }
    .M02 .close-carousel:hover .icon svg:first-child {
      animation: none;
      top: 150%;
      transform: translate(-50%, -50%); }
    .M02 .close-carousel:hover .icon svg:last-child {
      animation: arrowBounce 0.6s ease-in-out forwards;
      top: 50%;
      transform: translate(-50%, -50%); }
    .M02 .close-carousel.active {
      display: block;
      visibility: visible; }
    .M02 .close-carousel:focus-visible {
      outline: 2px solid #007F33; }
  .M02 .subtitulo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    bottom: 5%; }
    .M02 .subtitulo > * {
      color: #00402A;
      text-align: center;
      font-family: IberPangea;
      font-size: 1rem;
      font-weight: 400;
      line-height: 120%;
      letter-spacing: 0.056px;
      margin: 0 auto;
      max-width: 60%;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* number of lines to show */
      line-clamp: 2;
      -webkit-box-orient: vertical; }
      @media screen and (max-width: 990px) {
        .M02 .subtitulo > * {
          max-width: 100%; } }
    @media screen and (max-width: 990px) {
      .M02 .subtitulo {
        position: static;
        transform: none;
        margin-bottom: 28px;
        padding-inline: 16px; } }
  .M02 .logo {
    display: none;
    width: 8dvw;
    height: 8dvw;
    position: absolute;
    top: calc(50% - 32px - 3dvw);
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 10; }
    @media screen and (max-width: 990px) {
      .M02 .logo {
        display: none; } }
  .M02 #myDiv {
    left: 50%;
    transform: translateX(-50%);
    animation: fadeIn 0.8s ease-in-out forwards 5s;
    opacity: 0; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
  .M02 .fwdc3Dc .category-caption {
    color: #00402A !important;
    font-family: IberPangea !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: normal !important;
    max-width: 166px !important;
    width: 166px !important;
    text-wrap: wrap !important;
    text-align: center !important; }
  .M02 .fwdc3Dc.item-caption {
    width: 100% !important;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 8px !important;
    pointer-events: all !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    background: #fff !important;
    /* Tablet horizontal / small laptop */
    /* Laptop / desktop */
    /* Desktop grande */
    /* Full HD */ }
    @media screen and (min-width: 990px) {
      .M02 .fwdc3Dc.item-caption {
        width: calc(104% - 40px - 16px) !important;
        bottom: 0px;
        top: auto !important;
        margin-top: 0 !important;
        transform: translateX(-50%) !important;
        left: 50% !important;
        background: #fff;
        border-radius: 24px;
        max-height: 60% !important;
        overflow: auto !important; } }
    @media (min-width: 1024px) {
      .M02 .fwdc3Dc.item-caption {
        width: calc(78% - 40px - 16px) !important; } }
    @media (min-width: 1267px) {
      .M02 .fwdc3Dc.item-caption {
        width: calc(61.5% - 40px - 16px) !important; } }
    @media (min-width: 1280px) {
      .M02 .fwdc3Dc.item-caption {
        width: calc(60.5% - 40px - 16px) !important; } }
    @media (min-width: 1440px) {
      .M02 .fwdc3Dc.item-caption {
        width: calc(53.5% - 40px - 16px) !important; } }
    @media (min-width: 1920px) {
      .M02 .fwdc3Dc.item-caption {
        width: calc(39.5% - 40px - 16px) !important; } }
    @media (min-width: 1921px) {
      .M02 .fwdc3Dc.item-caption {
        width: calc(34% - 40px - 16px) !important; } }
    .M02 .fwdc3Dc.item-caption .fin-periodo-title > * {
      color: #00402A !important;
      text-align: center;
      font-family: IberPangea;
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 500;
      line-height: 120%;
      /* 28.8px */
      letter-spacing: -0.24px; }
      @media screen and (max-width: 990px) {
        .M02 .fwdc3Dc.item-caption .fin-periodo-title > * {
          margin-top: 33px; } }
    .M02 .fwdc3Dc.item-caption .navigation-buttons button {
      border: 0;
      background-color: transparent;
      padding: 0;
      height: 100%;
      display: flex;
      align-items: center;
      color: #007F33;
      gap: 8px;
      color: #007F33;
      font-family: IberPangea;
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 110%;
      /* 17.6px */ }
      .M02 .fwdc3Dc.item-caption .navigation-buttons button svg {
        width: 12px;
        height: 12px; }
      .M02 .fwdc3Dc.item-caption .navigation-buttons button.disabled {
        opacity: 0.3;
        pointer-events: none; }
    .M02 .fwdc3Dc.item-caption.hidden {
      display: none !important; }
  .M02 .hito-fecha {
    color: #00402A;
    font-family: IberPangea;
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.64px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; }
    @media screen and (max-width: 990px) {
      .M02 .hito-fecha {
        font-size: 3rem;
        letter-spacing: -0.48px; } }
    @media screen and (min-width: 1267px) and (max-height: 800px) {
      .M02 .hito-fecha {
        font-size: 2rem; } }
  .M02 .hito-titulo {
    color: #00402A;
    font-family: IberPangea;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.24px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; }
    @media screen and (max-width: 990px) {
      .M02 .hito-titulo {
        font-size: 1.125rem;
        letter-spacing: -0.18px; } }
    @media screen and (max-height: 800px) and (min-width: 658px) {
      .M02 .hito-titulo {
        font-size: 1rem; } }
  .M02 .hito-excerpt {
    color: #615D5A;
    text-align: center;
    font-family: IberPangea;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */ }
  .M02 .open-excerpt,
  .M02 .close-excerpt {
    color: #007F33;
    font-family: IberPangea;
    font-size: 1rem;
    font-weight: 500;
    line-height: 110%;
    align-items: center;
    gap: 4px;
    background-color: transparent;
    border: 0;
    width: fit-content;
    margin: 0 auto; }
    .M02 .open-excerpt:focus-visible,
    .M02 .close-excerpt:focus-visible {
      outline: 2px solid #007F33; }
  .M02 .link_button {
    color: #002015;
    font-family: IberPangea;
    font-size: 1rem;
    font-weight: 500;
    line-height: 110%;
    margin: 0px auto 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content; }
    .M02 .link_button .icon {
      width: 32px;
      height: 32px;
      border-radius: 99px;
      background-color: #007F33;
      padding: 8px;
      overflow: hidden;
      position: relative; }
    .M02 .link_button svg {
      position: absolute;
      left: 50%;
      width: 16px;
      height: 16px;
      transition: all 0.2s ease-in-out;
      color: #fff; }
      .M02 .link_button svg:first-child {
        animation: arrowBounceReturn 0.6s ease-in-out forwards;
        top: 50%;
        transform: translate(-50%, -50%); }
      .M02 .link_button svg:last-child {
        top: -100%;
        transform: translate(-50%, -50%); }
    .M02 .link_button:hover .icon svg:first-child {
      animation: none;
      top: 150%;
      transform: translate(-50%, -50%); }
    .M02 .link_button:hover .icon svg:last-child {
      animation: arrowBounce 0.6s ease-in-out forwards;
      top: 50%;
      transform: translate(-50%, -50%); }
  .M02 .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; }
    @media screen and (max-width: 990px) {
      .M02 .bottom {
        position: absolute;
        bottom: 4px;
        width: 100%; } }
  .M02 .goBack {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background-color: transparent;
    text-decoration: none;
    color: var(--Forest-200, #002015);
    font-size: 1rem;
    font-family: 'IberPangea', Arial, sans-serif;
    font-weight: 500;
    line-height: 120%;
    margin-top: 5px;
    opacity: 0;
    visibility: hidden; }
    .M02 .goBack .icon {
      width: 32px;
      height: 32px;
      border-radius: 99px;
      background-color: #007F33;
      padding: 8px;
      overflow: hidden;
      position: relative; }
    .M02 .goBack svg {
      position: absolute;
      left: 50%;
      width: 16px;
      height: 16px;
      transition: all 0.2s ease-in-out;
      color: #fff; }
      .M02 .goBack svg:first-child {
        animation: arrowBounceReturn 0.6s ease-in-out forwards;
        top: 50%;
        transform: translate(-50%, -50%); }
      .M02 .goBack svg:last-child {
        top: -100%;
        transform: translate(-50%, -50%); }
    .M02 .goBack:hover .icon svg:first-child {
      animation: none;
      top: 150%;
      transform: translate(-50%, -50%); }
    .M02 .goBack:hover .icon svg:last-child {
      animation: arrowBounce 0.6s ease-in-out forwards;
      top: 50%;
      transform: translate(-50%, -50%); }
    .M02 .goBack.active {
      opacity: 1;
      visibility: visible; }
  .M02 .counter-hito {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #615D5A;
    font-family: IberPangea;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.18px;
    justify-content: center;
    margin: 10px auto; }
    .M02 .counter-hito input {
      max-width: 50px;
      border: 0;
      pointer-events: none;
      -moz-appearance: textfield;
      color: #615D5A;
      font-family: IberPangea;
      font-size: 1.125rem;
      font-weight: 400;
      line-height: normal;
      letter-spacing: -0.18px; }
      .M02 .counter-hito input.current {
        text-align: right; }
      .M02 .counter-hito input.total {
        text-align: left; }
      .M02 .counter-hito input::-webkit-outer-spin-button, .M02 .counter-hito input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0; }
    .M02 .counter-hito.active {
      opacity: 1;
      visibility: visible; }
  .M02 .open-controllers {
    border: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    gap: 8px; }
    .M02 .open-controllers .label {
      opacity: 1;
      visibility: visible;
      transition: .3s all ease-in-out;
      color: var(--Neutral-80, #615D5A);
      font-size: 1rem;
      font-family: 'IberPangea', Arial, sans-serif;
      font-weight: 500;
      line-height: 110%;
      margin-top: 5px; }
    .M02 .open-controllers .icon,
    .M02 .open-controllers .icon-close {
      width: 32px;
      height: 32px;
      border-radius: 99px;
      background-color: #00402A;
      padding: 8px;
      overflow: hidden;
      position: relative;
      transition: .3s all ease-in-out; }
    .M02 .open-controllers svg {
      position: absolute;
      left: 50%;
      width: 16px;
      height: 16px;
      transition: all 0.2s ease-in-out;
      color: #fff; }
      .M02 .open-controllers svg:first-child {
        animation: arrowBounceReturn 0.6s ease-in-out forwards;
        top: 50%;
        transform: translate(-50%, -50%); }
      .M02 .open-controllers svg:last-child {
        top: -100%;
        transform: translate(-50%, -50%); }
    .M02 .open-controllers:hover .icon svg:first-child {
      animation: none;
      top: 150%;
      transform: translate(-50%, -50%); }
    .M02 .open-controllers:hover .icon svg:last-child {
      animation: arrowBounce 0.6s ease-in-out forwards;
      top: 50%;
      transform: translate(-50%, -50%); }
  .M02 .nav-controllers {
    min-width: 100px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border: 1px solid #DCEBE1;
    padding: 8px;
    border-radius: 8px;
    top: 0;
    height: 100%;
    right: 45px;
    transform: scaleX(0);
    transform-origin: center right;
    transition: .3s all ease-in-out;
    visibility: hidden;
    pointer-events: none;
    background-color: #fff; }
    .M02 .nav-controllers button {
      border: 0;
      background-color: transparent;
      padding: 0;
      height: 100%;
      display: flex;
      align-items: center;
      color: #007F33; }
      .M02 .nav-controllers button.disabled {
        opacity: 0.3;
        pointer-events: none; }
      .M02 .nav-controllers button:focus-visible {
        outline: 2px solid #007F33;
        outline-offset: 5px; }
    @media screen and (max-width: 990px) {
      .M02 .nav-controllers {
        transform: none;
        visibility: visible;
        pointer-events: all;
        right: 0;
        left: 0;
        width: 80%;
        margin: auto;
        height: auto;
        background: transparent;
        border: 0;
        justify-content: space-between;
        top: 30px; } }
  .M02 .controllers {
    position: relative; }
    .M02 .controllers.expanded .nav-controllers {
      transform: scaleX(1);
      visibility: visible;
      pointer-events: all; }
    .M02 .controllers.expanded .open-controllers .label {
      opacity: 0;
      visibility: hidden;
      display: none; }
    .M02 .controllers.expanded .open-controllers .icon {
      background-color: #007F33; }
    .M02 .controllers.expanded .icon:not(.icon-close) {
      display: none; }
    .M02 .controllers.expanded .icon.icon-close {
      display: block !important; }
      .M02 .controllers.expanded .icon.icon-close svg {
        width: 10px;
        height: 10px; }
    .M02 .controllers.expanded .open-controllers:hover .icon.icon-close, .M02 .controllers.expanded .open-controllers:focus-visible .icon.icon-close {
      background-color: #007F33 !important; }
  .M02 .image-xl {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 60%;
    height: 80%;
    transform: translate(-50%, -50%);
    transition: .3s all ease-in-out;
    border-radius: 24px; }
    @media screen and (max-width: 990px) {
      .M02 .image-xl {
        width: 80%;
        height: 30%;
        border-radius: 12px; } }
    .M02 .image-xl .close-expanded-image {
      position: absolute;
      right: -30px;
      top: -30px;
      padding: 0;
      border: 0;
      background: transparent;
      border-radius: 99px; }
      .M02 .image-xl .close-expanded-image:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px; }
    .M02 .image-xl img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 24px; }
    .M02 .image-xl.active {
      visibility: visible;
      opacity: 1;
      z-index: 30; }
  .M02 .modal-custom {
    position: absolute;
    top: 0;
    right: -50%;
    width: 100%;
    max-width: 596px;
    border-radius: 24px;
    background: var(--Neutral-0, #FFF);
    box-shadow: 8px 4px 32px 8px rgba(0, 0, 0, 0.05);
    padding: 16px 16px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .3s all ease-in-out;
    z-index: 30; }
    .M02 .modal-custom.active {
      right: 0;
      opacity: 1;
      visibility: visible; }
    .M02 .modal-custom .modal-custom-footer {
      margin-top: 40px;
      border-top: 1px solid #D8CFC7;
      padding-top: 40px; }
      .M02 .modal-custom .modal-custom-footer .titulo-footer > * {
        color: #615D5A;
        font-family: IberPangea;
        font-size: 18px;
        font-weight: 600;
        line-height: 120%;
        margin-bottom: 18px; }
      .M02 .modal-custom .modal-custom-footer .texto-footer > * {
        color: var(--Neutral-80, #615D5A);
        font-family: IberPangea;
        font-size: 16px;
        font-weight: 400;
        line-height: 140%; }
    .M02 .modal-custom .close-modal {
      display: flex;
      padding: 4px 4px 4px 16px;
      align-items: center;
      gap: 8px;
      border-radius: 99px;
      border: 1px solid #007F33;
      background-color: #FFF;
      color: var(--Forest-200, #002015);
      font-family: IberPangea;
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 110%;
      margin-right: 0;
      margin-left: auto; }
      .M02 .modal-custom .close-modal .icon {
        width: 32px;
        height: 32px;
        border-radius: 99px;
        background-color: #007F33;
        padding: 8px;
        overflow: hidden;
        position: relative; }
      .M02 .modal-custom .close-modal svg {
        position: absolute;
        left: 50%;
        width: 10px;
        height: 10px;
        transition: all 0.2s ease-in-out;
        color: #fff; }
        .M02 .modal-custom .close-modal svg:first-child {
          animation: arrowBounceReturn 0.6s ease-in-out forwards;
          top: 50%;
          transform: translate(-50%, -50%); }
        .M02 .modal-custom .close-modal svg:last-child {
          top: -100%;
          transform: translate(-50%, -50%); }
      .M02 .modal-custom .close-modal:hover .icon svg:first-child {
        animation: none;
        top: 150%;
        transform: translate(-50%, -50%); }
      .M02 .modal-custom .close-modal:hover .icon svg:last-child {
        animation: arrowBounce 0.6s ease-in-out forwards;
        top: 50%;
        transform: translate(-50%, -50%); }
      .M02 .modal-custom .close-modal:focus-visible {
        outline: 2px solid #007F33; }
      .M02 .modal-custom .close-modal.active {
        visibility: visible;
        opacity: 1; }
    .M02 .modal-custom .modal-content {
      max-height: 90%;
      overflow: auto;
      padding-right: 15%; }
      .M02 .modal-custom .modal-content::-webkit-scrollbar {
        width: 7px; }
      .M02 .modal-custom .modal-content::-webkit-scrollbar-thumb {
        background: #00A443;
        border-radius: 99px; }
      .M02 .modal-custom .modal-content::-webkit-scrollbar-track {
        background: #2F6852;
        border-left: 2px solid transparent;
        border-right: 2px solid transparent;
        background-clip: padding-box; }
    .M02 .modal-custom .titulo-cat {
      color: #00402A;
      font-family: IberPangea;
      font-size: 1.375rem;
      font-weight: 500;
      line-height: 100%; }
    .M02 .modal-custom .fechas-cat {
      color: #007ACB;
      font-family: IberPangea;
      font-size: 3rem;
      font-weight: 300;
      line-height: 100%;
      letter-spacing: -1.44px;
      margin-bottom: 24px; }
    .M02 .modal-custom .texto-intro > * {
      color: #00402A;
      font-family: IberPangea;
      font-size: 1.125rem;
      font-style: normal;
      font-weight: 600;
      line-height: 120%; }
    .M02 .modal-custom .texto > * {
      color: #615D5A;
      font-family: IberPangea;
      font-size: 1rem;
      font-style: normal;
      font-weight: 400;
      line-height: 140%; }
      .M02 .modal-custom .texto > *:last-child {
        margin-bottom: 0; }
    .M02 .modal-custom .years {
      margin-top: 40px;
      border-top: 1px solid #D8CFC7;
      padding-top: 40px; }
    .M02 .modal-custom .year-group {
      padding-left: 60px;
      padding-bottom: 9px;
      border-left: 1px solid #89837E;
      position: relative; }
    .M02 .modal-custom .year-label {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      gap: 4px;
      color: #615D5A;
      font-family: IberPangea;
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 100%; }
      .M02 .modal-custom .year-label::before {
        content: "";
        display: block;
        width: 12px;
        height: 1px;
        background-color: #424242; }
    .M02 .modal-custom .hito-item {
      display: flex;
      padding: 8px;
      flex-direction: column;
      gap: 8px;
      border-radius: 8px;
      border: 1px solid #0DA9FF;
      background: rgba(60, 194, 255, 0.1); }
      .M02 .modal-custom .hito-item.global {
        background-color: var(--Forest-10, #DCEBE1);
        border: 0; }
      .M02 .modal-custom .hito-item .titulo-hito {
        color: #003020;
        font-family: IberPangea;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 130%; }
      .M02 .modal-custom .hito-item .fecha-completa {
        color: #00402A;
        font-family: IberPangea;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 100%;
        text-transform: uppercase;
        display: none; }
      .M02 .modal-custom .hito-item:not(:last-child) {
        margin-bottom: 9px; }
  .M02 .fwdc3Dc-manager {
    transition: 2s all ease-in-out;
    margin-top: -2dvw !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; }
    .M02 .fwdc3Dc-manager.transformed {
      margin-top: -2dvw !important; }
      @media screen and (max-width: 658px) {
        .M02 .fwdc3Dc-manager.transformed {
          margin-top: -55dvw !important; } }
      @media screen and (max-height: 800px) and (min-width: 658px) {
        .M02 .fwdc3Dc-manager.transformed {
          margin-top: -2dvw !important; } }
      @media screen and (min-width: 660px) and (max-width: 990px) {
        .M02 .fwdc3Dc-manager.transformed {
          margin-top: -25dvw !important; } }
      .M02 .fwdc3Dc-manager.transformed .fwdc3Dc.item-caption:not(:has(.fin-periodo)) {
        margin-top: 1dvw !important; }
        @media screen and (max-height: 800px) and (min-width: 658px) {
          .M02 .fwdc3Dc-manager.transformed .fwdc3Dc.item-caption:not(:has(.fin-periodo)) {
            bottom: -2dvw !important; } }
        @media screen and (max-width: 658px) {
          .M02 .fwdc3Dc-manager.transformed .fwdc3Dc.item-caption:not(:has(.fin-periodo)) {
            margin-top: 54dvw !important;
            transform: translateY(85dvw) !important; } }
        @media screen and (min-width: 660px) and (max-width: 990px) {
          .M02 .fwdc3Dc-manager.transformed .fwdc3Dc.item-caption:not(:has(.fin-periodo)) {
            margin-top: 140px !important; } }
    @media screen and (max-width: 658px) {
      .M02 .fwdc3Dc-manager {
        margin-top: -30dvw !important; } }
    @media screen and (min-width: 660px) and (max-width: 990px) {
      .M02 .fwdc3Dc-manager {
        margin-top: -20dvw !important; } }
  @media screen and (max-width: 990px) {
    .M02 {
      padding: 65px 0 20px 0;
      min-height: unset;
      height: 850px; }
      .M02 .fwdc3Dc {
        position: absolute !important; } }

body.modal-opened .M02 #myDiv {
  pointer-events: none !important; }

body.modal-opened .M02 .modal-custom {
  pointer-events: all !important; }