@import url("https://use.typekit.net/yvp0lma.css");

:root {
    font-size: 10px;
    --blue: #2970CB;
    --red: #8B161E;
    --white: #FFFFFF;
    --black-titles: #3E3E3E;
    --black-body: #3f4545;
    --background: #ebefee;
    --green: #0d948e;
    --dark-green: #2e7c87;
    --gray: #7f7e83;
    --gray-hr: #c4c6c5;
    --gradient-1: #8E9F72;
    --gradient-2: #52998E;
    --gradient-3: #307C89;
    --gradient-bullet-1: #BD674C;
    --gradient-bullet-2: #B39462;
    --gradient-bullet-3: #1C9998;
    --promomats-code: #EBEFEE;
    --navy: #270759;
    --orange: #EE7622;
    --light-orange: #fef1e8;
    --light-gray: #f5f5f5;
    --nova: "proxima-nova", sans-serif !important;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --size-body: 1.6rem;
    --size-body-s: 1.4rem;
    --size-heading: 2.2rem;
    --size-heading-s: 2rem;
    --size-subheading: 2.2rem;
    --size-subheading-s: 1.8rem;
    --size-textvideo: 1.8rem;
    --size-textvideo-s: 1.6rem;
    --size-extras: 1.4rem;
    --size-extras-s: 1.2rem;
    --size-spacing: 2.5rem;
    --size-spacing-s: 2rem;
    --line-height: 1.3;
    --line-height-header: 1;
}

body.proximo-paso {
    width: 100%;
    margin: 0;
    font-family: var(--nova);
    color: var(--black-body);
    font-weight: var(--regular);
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-height: var(--line-height);
}

.proximo-paso #intro-section {
    background: var(--white);
    background: url(/content/dam/multibrand/ar/es/azeventos/oncologia/proximo-paso/img/cuadros-bg.jpg);
    background-size: cover;
    height: auto;
    width: 100%;
    padding-bottom: var(--size-spacing);

    .logo-header {
        max-width: 600px;
        padding-top: 25rem;
    }

    p {
        text-align: center;
    }

    .terapias-container {
        border: 3px solid var(--orange);
        margin-top: var(--size-spacing);
        border-radius: 5rem;

        h2 {
            color: var(--white);
            margin: 0 auto;
            text-align: center;
            font-size: var(--size-heading);
            background-color: var(--navy);
            width: fit-content;
            border-radius: 200px;
            padding: 1rem 5rem;
            margin-top: -28.5px;

            @media screen and (max-width: 767px) {
                font-size: var(--size-heading-s);
            }
        }

        .terapias-container-col {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            /* padding: 3rem 2rem; */
            padding: 1rem;
            margin: 0 auto;
            justify-content: space-evenly;

            .terapias-container-col-item {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                flex-direction: column;

                .terapias-container-col-item-img {
                    margin: 0;
                    z-index: 2;
                    img {
                        width: 100%;
                        height: auto;
                        object-fit: contain;
                        max-width: 100px;
                    }
                }

                .terapias-container-col-item-pill {
                    width: fit-content;
                    border-radius: 30px;
                    position: relative;
                    z-index: 1;
                    flex-shrink: 0;
                    margin: 0;
                    color: var(--navy);
                    font-family: var(--nova);
                    font-size: var(--size-subheading);
                    font-weight: var(--bold);
                    text-decoration: none;
                    transition: background-color 0.2s ease-in;
                    text-align: center;
                    padding-top: 1rem;
                }
            }

            @media screen and (max-width: 767px) {
                flex-direction: column;
                padding: 2rem 1rem;

                .terapias-container-col-item {
                    /* flex: 1 1 100%;
                    justify-content: flex-end; */
                    /* Center on mobile */
                }
            }
        }
    }
}


.proximo-paso #main-banner p {
    font-size: var(--size-body);
}

.proximo-paso #videos-section h2,
.proximo-paso #videos-section h3,
.proximo-paso #contenido-dest-text h2,
.proximo-paso #contenido-dest-text h3 {
    font-family: var(--nova);
}


.proximo-paso #intro-section p,
.proximo-paso #intro-section span,
.proximo-paso #references-content p,
.proximo-paso #references-content li,
.proximo-paso #disertantes-section button,
.proximo-paso #disertantes-section p,
.proximo-paso #disertantes-section span,
.proximo-paso #promomats-code p,
.proximo-paso #videos-section li,
.proximo-paso #videos-section p,
.proximo-paso #videos-section span {
    font-family: var(--nova);
}

.proximo-paso #intro-section p,
.proximo-paso #videos-section li {
    font-size: var(--size-subheading);
}

.proximo-paso #videos-section ul {
    list-style: none;
    padding-left: 0;

    li::before {
        content: "";
        display: inline-block;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: var(--green);
        background: linear-gradient(180deg, var(--gradient-bullet-1) 20%, var(--gradient-bullet-2) 50%, var(--gradient-bullet-3) 80%);
        margin-right: 2rem;
    }
}

.proximo-paso #videos-section li {
    line-height: var(--line-height);
    padding-bottom: var(--size-spacing) !important;
}

.proximo-paso #videos-section {

    &.background-gray {
        background-color: var(--light-gray);
    }

    position: relative;
    z-index: 1;

    .videos-section-container {
        /* padding-block: var(--size-spacing); */

        .videos-section-item-container {
            background-color: var(--light-orange);
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-wrap: wrap;
            padding: 2rem;
            gap: 2rem;
            position: relative;
            border-radius: 2rem;
            margin-top: var(--size-spacing);

            .videos-section-item-col {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 2rem;
                width: 100%;

                .videos-section-item-text {
                    flex: 1;
                }

                p {
                    font-size: var(--size-body);
                }

                @media screen and (max-width: 767px){
                    flex-direction: column;

                    p {
                        font-size: var(--size-body-s);
                    }
                }
            }

            .videos-section-item-text-title {
                display: flex;
                gap: 1rem;
                align-items: center;
                font-family: var(--nova);

                h2 {
                    font-size: var(--size-heading);
                    text-align: left;
                    font-weight: var(--bold);
                    color: var(--navy);
                }

                h3 {
                    font-size: var(--size-subheading);
                    text-align: left;
                    font-weight: var(--bold);
                    margin: 0;
                    color: var(--navy);
                }

                &.main {
                    display: none;
                }

                @media screen and (max-width: 767px){
                    h2 {
                        font-size: var(--size-heading-s);
                    }
    
                    h3 {
                        font-size: var(--size-subheading-s);
                    }
                }
            }

            .videos-section-item-img-main {
                margin: 0;

                img {
                    width: 100%;
                    height: auto;
                    object-fit: contain;
                    max-width: 100px;
                }
            }

            .videos-section-item-img {
                margin: 0;

                img {
                    width: 2rem;
                    height: auto;
                    object-fit: contain;
                }
            }

            .videos-section-item-button {
                color: var(--white);
                text-decoration: none;
                background-color: var(--navy);
                font-size: var(--size-textvideo);
                font-weight: var(--medium);
                width: 100%;
                text-align: center;
                position: relative;
                top: 44px;
                width: 50%;
                padding: 1rem 5rem;
                border-radius: 200px;
                transition: background-color 0.2s ease-in;
                font-family: var(--nova);
                display: none;
                &:hover {
                    background-color: var(--orange);
                    transition: background-color 0.2s ease-out;
                }

                @media screen and (max-width: 540px) {
                    width: 80%;
                }
            }

            &::before {
                content: "";
                background-color: #EA721F;
                width: 30%;
                height: 090%;
                position: absolute;
                left: -.4rem;
                top: 100%;
                transform: translateY(calc(-100% + 0.4rem));
                z-index: -1;
                border-bottom-left-radius: 2rem;
            }
        }
    }
}

.proximo-paso #login-section {
    background-color: var(--navy);
    padding-block: var(--size-spacing);

    p {
        text-align: center;
        color: var(--white);
        font-size: var(--size-subheading);
        font-family: var(--nova);
        font-weight: var(--medium);
    }
    .button-login-section-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
        padding-block: var(--size-spacing);
        .button-item {
            text-decoration: none;
            font-size: var(--size-textvideo);
            font-weight: var(--medium);
            text-align: center;
            width: fit-content;
            min-width: 230px;
            padding: 1rem 5rem;
            border-radius: 200px;
            font-family: var(--nova);

            &.white-button {
                color: var(--navy);
                background-color: var(--white);
            }

            &.orange-button {
                color: var(--white);
                background-color: var(--orange);
            }
        }
    }
    @media screen and (max-width: 767px){
        p {
            font-size: var(--size-subheading-s);
        }
    }
}

.proximo-paso #contenido-dest-text {
    margin-top: var(--size-spacing);

    h2 {
        color: var(--white);
        margin: 0;
        padding-block: var(--size-spacing);
        text-align: center;
        font-size: var(--size-heading);

         @media screen and (max-width: 767px) {
            font-size: var(--size-heading-s);
         }
    }

    &.navy {
        background-color: var(--navy);
    }

    &.orange {
        background-color: var(--orange);

        h2 {
            font-weight: var(--medium);
        }
    }
}

.proximo-paso #main-banner p {
    font-family: var(--nova);
    line-height: var(--line-height);
}

.proximo-paso #main-banner span.dest-h1 {
    font-size: var(--size-subheading)
}

.proximo-paso h1 {
    font-size: var(--size-heading);
    font-family: var(--nova);
    font-weight: var(--bold);
    line-height: var(--line-height-header);
    display: flex;
    flex-direction: column;

    span {
        font-size: var(--size-heading);
        font-family: var(--nova);
        font-weight: var(--bold);
        line-height: var(--line-height-header);
    }
}

.proximo-paso h2 {
    font-size: var(--size-subheading);
    font-family: var(--nova);
    font-weight: var(--bold);
    line-height: var(--line-height);
}

#main-banner .header-text {
    color: var(--white);
}

.proximo-paso .em-red {
    color: var(--red);
    font-weight: var(--bold);
}

.proximo-paso .em-blue {
    color: var(--blue);
    font-weight: var(--bold);
    text-transform: uppercase;
}

.proximo-paso .semibold {
    font-weight: var(--semibold);
}

.proximo-paso .bold {
    font-weight: var(--bold);
}


.proximo-paso .regular {
    font-weight: var(--regular);
}

.proximo-paso #references-content p,
.proximo-paso #references-content li,
.proximo-paso #promomats-code p {
    font-weight: var(--regular);
    font-size: var(--size-extras);
}

.proximo-paso #references-content .qr-product {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    img {
        max-width: 200px;
    }
}

.proximo-paso #disertantes-section p {
    font-size: var(--size-textvideo);
}

.proximo-paso #disertantes-section h2 {
    color: var(--green);
}

.proximo-paso #references-content li {
    padding: 0
}

.proximo-paso .promomats,
.proximo-paso #promomats-code {
    text-align: center;
}

.proximo-paso #promomats-code {
    background-color: var(--promomats-code);
    color: var(--black-body);
    padding-block: 25px
}

.proximo-paso #promomats-code p {
    margin: 0;
}

.proximo-paso .text-video {
    font-size: var(--size-textvideo);
    text-align: center;
}

.proximo-paso main {
    max-width: 1370px;
    margin: 0 auto;
}

.proximo-paso #main-banner {
    background-size: cover;
    height: auto;
    aspect-ratio: 96 / 25;
    width: 100%;
    margin-top: 127px !important;
    /* max-height: 600px;
    background-repeat: no-repeat;
    background-position: center center; */
}

.proximo-paso .modal-figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.proximo-paso .modal-figure img {
    width: 100%;
    border-radius: 55px;
}


#main-banner .header-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    margin: 0 auto;
}

.proximo-paso #disertantes-section .button-cta {
    width: 50%;
    color: var(--white);
    background-color: var(--blue);
    padding-block: 20px;
    border: none;
    border-radius: 800px;
    font-family: var(--nova);
    font-weight: var(--bold);
    font-size: var(--size-textvideo);
    margin-top: -42px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease-in;
}

.hide-button {
    display: none !important;
}

.proximo-paso #disertantes-section .button-container {
    display: flex;
    justify-content: center;
    z-index: 2;
    position: relative;
    padding: 0;
}

div[data-partner-id='432521'] .video-thumb-parent .video-play-icon {
    display: none
}

div[data-partner-id='432521'] .video-thumb-parent .video-thumb-cta {
    border-radius: 50px;
}

.proximo-paso #disertantes-section .button-cta:hover {
    background-color: var(--red);
    transition: background-color 0.3s ease-out;
}

.proximo-paso #disertantes-section,
.proximo-paso #references-content {
    background-color: var(--background);
}

.proximo-paso #references-content .promomats p a {
    font-family: var(--nova);
}

.proximo-paso #intro-section,
.proximo-paso #intro-section h2,
.proximo-paso #intro-section p,
.proximo-paso #disertantes-section figure,
.proximo-paso #references-content .referencias,
.proximo-paso #references-content .promomats,
.proximo-paso #videos-section ul {
    padding-top: var(--size-spacing);
}

.proximo-paso #references-content,
.proximo-paso #intro-section,
.proximo-paso #videos-section {
    padding-bottom: var(--size-spacing);
}

@media only screen and (min-width: 1500px) {
    .proximo-paso #main-banner {
        margin-top: 145px;
    }
}

@media only screen and (max-width: 1200px) {
    #main-banner {
        /* min-height: 582px; */
    }
}


@media only screen and (max-width: 767px) {
    #main-banner {
        background-position: 50% !important;
    }

    .proximo-paso h2 {
        font-size: var(--size-subheading-s);
    }

    .proximo-paso h1 {
        font-size: var(--size-heading-s);

        span {
            font-size: var(--size-heading-s);
        }
    }

    .proximo-paso .text-video,
    .proximo-paso #disertantes-section .button-cta {
        font-size: var(--size-textvideo-s);
    }

    .proximo-paso #main-banner p {
        font-size: var(--size-body-s);
    }

    .proximo-paso #main-banner {
        aspect-ratio: 1 / 1;
    }

    .proximo-paso #intro-section p,
    .proximo-paso #disertantes-section p,
    .proximo-paso #videos-section li {
        font-size: var(--size-textvideo-s);
    }

    .proximo-paso #main-banner span.dest-h1 {
        font-size: var(--size-subheading-s)
    }

    .proximo-paso #references-content p,
    .proximo-paso #references-content li,
    .proximo-paso #promomats-code p {
        font-size: var(--size-extras-s);
    }

    .proximo-paso #disertantes-section .button-cta {
        width: 90%
    }

    #main-banner .header-text br {
        /* display: none; */
    }

    .proximo-paso #intro-section,
    .proximo-paso #intro-section h2,
    .proximo-paso #intro-section p,
    .proximo-paso #disertantes-section figure,
    .proximo-paso #references-content .referencias,
    .proximo-paso #references-content .promomats,
    .proximo-paso #videos-section ul {
        padding-top: var(--size-spacing-s);
    }

    .proximo-paso #references-content,
    .proximo-paso #intro-section,
    .proximo-paso #videos-section,
    .proximo-paso #main-banner {
        padding-bottom: var(--size-spacing-s);
    }

    .proximo-paso #videos-section li {
        padding-bottom: var(--size-spacing-s) !important;
    }
}

/* Animaciones */

.btn-scale {
    transform: scale(1);
    transition: all 160ms ease;
  
    will-change: transform;
  }
  .btn-scale:hover,
  .btn-scale:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transition: all 160ms ease-out;
  }
  
  .btn-scale:active {
    transform: scale(0.98);
  transition: all 160ms ease-out;
  }
  
  /* Animaciones */
  
  @keyframes fadeInFromTop {
      from {
          opacity: 0;
          transform: translateY(50px);
      }
  
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  @keyframes fadeInFromLeft {
      from {
          opacity: 0;
          transform: translateX(50px);
      }
  
      to {
          opacity: 1;
          transform: translateX(0);
      }
  }
  
  @keyframes fadeInFromRight {
      from {
          opacity: 0;
          transform: translateX(-50px);
      }
  
      to {
          opacity: 1;
          transform: translateX(0);
      }
  }
  
  @keyframes scaleUp {
      from {
          scale: 0;
      }
  
      to {
          scale: 1;
      }
  }
  
  @keyframes rx-double {
      0% {
          opacity: 0;
      }
  
      5% {
          opacity: 1;
      }
  
      15% {
          opacity: 0;
      }
  
      25% {
          opacity: 1;
      }
  
      35% {
          opacity: 0;
      }
  
      100% {
          opacity: 1;
      }
  }
  
  .fadeInFromTop {
      opacity: 0;
      animation: fadeInFromTop 1s ease-in forwards;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
  }
  .fadeInFromLeft {
      opacity: 0;
      animation: fadeInFromLeft 1s ease-in forwards;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
  }
  .fadeInFromRight {
      opacity: 0;
      animation: fadeInFromRight 1s ease-in forwards;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
  }
  
  .rx-double {
      opacity: 0;
      animation: rx-double 1.6s linear forwards;
      animation-timeline: view();
      animation-range: entry 1% cover 50%;
      animation-delay: 2s;
  }
  
  .scaleUp {
      scale: 0;
      animation: scaleUp 1.6s linear forwards;
      animation-timeline: view();
      animation-range: entry 20% cover 30%;
  }