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

:root {
    font-size: 10px;
    --blue: #2970CB;
    --red: #8B161E;
    --white: #FFFFFF;
    --black-text: #3E3E3E;
    --black-body: #3f4545;
    --background: #ebefee;
    --green: #0d948e;
    --dark-green: #2e7c87;
    --gray: #7f7e83;
    --gray-hr: #c4c6c5;
    --bg-gray: #EDEDED;
    --gradient-1: #8E9F72;
    --gradient-2: #52998E;
    --gradient-3: #307C89;
    --gradient-bullet-1: #BD674C;
    --gradient-bullet-2: #B39462;
    --gradient-bullet-3: #1C9998;
    --promomats-code: #EBEFEE;
    --azmain: #812652;
    --breast: #D53D78;
    --light-breast: #fbeaf3;
    --enhertu: #ED7621;
    --lynparza: #BBC400;
    --truqap: #3BB1BD;
    --imfinzi: #AA182C;
    --navy: #003262;
    --orange: #F67501;
    --light-orange: #fef1e8;
    --light-gray: #f5f5f5;
    --gotham: "gotham", sans-serif !important;
    --ubuntu: "ubuntu", 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;
    --text-body-xs: 1.2rem;
    --text-body-s: 1.4rem;
    --text-body: 1.6rem;
    --text-body-m: 1.8rem;
    --text-body-l: 2rem;
    --text-body-xl: 2.2rem;
    --text-body-xxl: 3rem;
    --text-footer: 1rem;
    --line-height-footer: 1;
}

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

#main-section-content {
    padding-bottom: 0;

    .htmlAsset {
        display: none;
    }
}

.footer {
    margin-top: 0;
}

.revolucion-cvmi #intro-section {
    background: var(--white);
    background-size: cover;
    height: auto;
    width: 100%;
    padding-bottom: var(--size-spacing);

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

    p {
        text-align: center;
    }
}

.revolucion-cvmi h2 {
    font-size: var(--size-subheading);
    font-family: var(--ubuntu);
    font-weight: var(--bold);
    line-height: var(--line-height);
    color: var(--black-text);
    text-align: center;
}


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

.revolucion-cvmi #videos-section h2,
.revolucion-cvmi #videos-section h3,
.revolucion-cvmi #contenido-dest-text h2,
.revolucion-cvmi #contenido-dest-text h3,
.revolucion-cvmi #info-section h2,
.revolucion-cvmi #fotos-section h2 {
    font-family: var(--gotham);
}


.revolucion-cvmi #intro-section p,
.revolucion-cvmi #intro-section span,
.revolucion-cvmi #references-content p,
.revolucion-cvmi #references-content li,
.revolucion-cvmi #promomats-code p,
.revolucion-cvmi #videos-section li,
.revolucion-cvmi #videos-section p,
.revolucion-cvmi #videos-section span,
.revolucion-cvmi #product-section p, 
.revolucion-cvmi #product-section span,
.revolucion-cvmi #info-section p,
.revolucion-cvmi #info-section span,
.revolucion-cvmi #fotos-section p, 
.revolucion-cvmi #fotos-section span {
    font-family: var(--gotham);
}

.revolucion-cvmi #intro-section p,
.revolucion-cvmi #videos-section li,
.revolucion-cvmi #videos-section p, 
.revolucion-cvmi #product-section p,
.revolucion-cvmi #info-section p {
    font-size: var(--text-body-m);
}

.revolucion-cvmi #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;
    }
}

.revolucion-cvmi #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(--gotham);
        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(--gotham);

            &.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);
        }
    }
}

.revolucion-cvmi #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);
        }
    }
}

.revolucion-cvmi #main-banner p {
    font-family: var(--gotham);
    line-height: var(--line-height);
}

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

.revolucion-cvmi h1 {
    font-size: var(--size-heading);
    font-family: var(--gotham);
    font-weight: var(--bold);
    line-height: var(--line-height-header);
    display: flex;
    flex-direction: column;

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

.revolucion-cvmi h2 {
    font-size: var(--size-subheading);
    font-family: var(--gotham);
    font-weight: var(--bold);
    line-height: var(--line-height);
}

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

.revolucion-cvmi .em-red {
    color: var(--red);
    font-weight: var(--bold);
}

.revolucion-cvmi .az-main {
    color: var(--azmain);
    font-weight: var(--bold);
}

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

.revolucion-cvmi .pt-spacing {
    padding-top: var(--size-spacing);
}

.revolucion-cvmi .pblock-spacing,
.revolucion-cvmi .mblock-spacing{
    padding-block: var(--size-spacing);
}

.revolucion-cvmi .mb-spacing {
    margin-bottom: var(--size-spacing);
}

.revolucion-cvmi .br-50 {
    border-radius: 5rem;
    overflow: hidden;
}

.revolucion-cvmi .br-40 {
    border-radius: 4rem;
    overflow: hidden;
}

.revolucion-cvmi .br-30 {
    border-radius: 3rem;
    overflow: hidden;
}

.revolucion-cvmi .bg-gray {
    background-color: var(--bg-gray);
}

.revolucion-cvmi .em-orange {
    color: var(--orange);
}

.revolucion-cvmi .em-navy {
    color: var(--navy);
}


.revolucion-cvmi .semibold {
    font-weight: var(--semibold);
}

.revolucion-cvmi .bold {
    font-weight: var(--bold);
}


.revolucion-cvmi .regular {
    font-weight: var(--regular);
}

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

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

    img {
        max-width: 200px;
    }
}

.revolucion-cvmi #references-content li {
    padding: 0
}

.revolucion-cvmi .promomats,
.revolucion-cvmi #promomats-code {
    text-align: center;
}

.revolucion-cvmi #promomats-code p {
    margin: 0;
}

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

.revolucion-cvmi main {
    max-width: 1370px;
    margin: 0 auto;
}

.revolucion-cvmi #main-banner {
    background-size: cover;
    height: auto;
    aspect-ratio: 120 / 31;
    width: 100%;
    margin-top: 127px;
    /* margin-top: 80px; */
    /* max-height: 600px;
    background-repeat: no-repeat;
    background-position: center center; */
}

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

.revolucion-cvmi .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;
}

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

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;
}

.revolucion-cvmi #references-content .promomats p a {
    font-family: var(--gotham);
}

.revolucion-cvmi #intro-section,
.revolucion-cvmi #intro-section h2,
.revolucion-cvmi #intro-section p,
.revolucion-cvmi #references-content .referencias,
.revolucion-cvmi #references-content .promomats,
.revolucion-cvmi #videos-section ul {
    /* padding-top: var(--size-spacing); */
}

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

@media only screen and (min-width: 1500px) {
    .revolucion-cvmi #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;
    }

    .revolucion-cvmi h2 {
        font-size: var(--size-subheading-s);
    }

    .revolucion-cvmi #intro-section p,
    .revolucion-cvmi #videos-section li,
    .revolucion-cvmi #videos-section p, 
    .revolucion-cvmi #product-section p,
    .revolucion-cvmi #info-section p {
        font-size: var(--text-body);
    }

    .revolucion-cvmi h1 {
        font-size: var(--size-heading-s);

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

    .revolucion-cvmi .text-video {
        font-size: var(--size-textvideo-s);
    }

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

    .revolucion-cvmi #main-banner {
        aspect-ratio: 375 / 536;
    }

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

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

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

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

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

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

    .revolucion-cvmi #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%;
  }

/* Grid */
#az-footer-claims {
    background-color: var(--light-gray);
}

.az-grid-legales {
    display: grid;
    grid-template-columns: 25% 60% 15%;
    grid-template-rows: auto;
    grid-template-areas:
        "logo texto-legal codigo-qr";
    align-items: center;
    padding-block: 2rem;
}

.p-2 {
    padding: 1rem;
}

.m-0 {
    margin: 0;
}

.text-extra-small {
    font-size: 1.2rem;
}

.text-center {
    text-align: center;
}

.az-grid-legales .az-logo {
    grid-area: logo;
}

.az-grid-legales .az-logo img {
    max-width: 240px;
    width: 100%;
}

.az-grid-legales .az-texto-legal {
    grid-area: texto-legal;
}

.az-grid-legales .az-texto-legal p {
    line-height: var(--line-height-footer) !important;
    font-size: var(--text-body-s);
}

.az-grid-legales .az-texto-legal a {
    color: var(--black);
    font-weight: 700;
    text-decoration: underline !important;
}

.footer {
    margin-top: 0;
}

.az-grid-legales .az-codigo-qr {
    grid-area: codigo-qr;
}

.az-grid-legales .az-codigo-qr img {
    max-width: 120px;
}

.az-grid-legales .az-codigo-qr p {
    line-height: var(--line-height-footer) !important;
    margin-bottom: 0.5rem !important;
    font-size: var(--text-body-xs);
}

.grid-legales .texto-legal,
.grid-legales .texto-legal .legal-link {
    /* font-family: "helvetica-neue-lt-pro",sans-serif; */
}

.az-grid-legales .az-texto-legal .legal-link {
    font-weight: 700;
}

@media (max-width: 992px) {
    .az-grid-legales {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
            "logo"
            "texto-legal"
            "codigo-qr";
        align-items: center;
        justify-content: center;
        justify-items: center;
        gap: 3rem;
    }

    .az-grid-legales .az-texto-legal p {
        font-size: var(--text-body-s);
    }
}

#videos-section p {
    text-align: center;
}


#videos-section .marca-section-item-button-container,
#product-section .marca-section-item-button-container {
    padding-top: var(--size-spacing);
    display: flex;
    justify-content: center;
    align-items: center;
}

#product-section {
    h2.high-heading {
        text-align: left;
        background-color: var(--orange);
        padding: 1rem 3rem;
        color: var(--white);
        width: fit-content;
    }
}

#videos-section .marca-section-item-button,
#product-section .marca-section-item-button{
    text-decoration: none;
    color: var(--white);
    padding: 1rem 3rem;
    font-family: var(--gotham);
    font-size: var(--text-body-l);
    border-radius: 200px;
    display: block;
    background-color: var(--navy);
}

#videos-section .cards-oradores-container {
    max-width: 900px;
    margin: 0 auto;
}

.marcas-section-col {
    .column-2 {
        border-right: 2px solid #9A9A9A;
        border-left: 2px solid #9A9A9A;

        @media screen and (max-width: 767px) {
            border-right: unset;
            border-left: unset;
            border-top: 2px solid #9A9A9A;
            border-bottom: 2px solid #9A9A9A;
        }
    }
    .logo-marca img {
        width: 100%;
        object-fit: contain;
        max-height: 80px;
    }

    .logo-marca.enhertu img {
        padding: 1rem
    }

    @media screen and (max-width: 767px) {
        .col-sm-4 {
            padding-block: 2rem;
        }
    }

    &.cards-container {
        .column-2 {
            border-right: unset;
            border-left: unset;
    
            @media screen and (max-width: 767px) {
                border-right: unset;
                border-left: unset;
                border-top: unset;
                border-bottom: unset;
            }
        }

        .column-1, .column-2, .column-3 {
            background-color: var(--white);
            padding: 2rem;
            border-radius: 3rem;
        }
    }
}

.hr-orange {
    border: 0;
    height: .5rem;
    background-color: var(--orange);
    margin: 0;
}

#info-section {
    h2 {
        text-align: left;
    }
}


#fotos-section {
    h2 {
        text-align: center;
    }
}

.column-control-centered {
    .row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  
  .column-control-centered.stretch-column-container {
    .row {
      align-items: stretch;
      gap: 2rem;
      .dynamicText {
        height: 100%;
        .rte-node {
          height: 100%;
          .stretch-item {
            height: 100%;
  
            @media screen and (max-width: 767px) {
              height: auto;
            }
          }
        }
      }
      @media (min-width: 768px) {
            .col-sm-4 {
                width: calc(33.33333% - 2rem);
            }
        }
    }
  }

.hr-dest {
    border: 0;
    height: .5rem;
    background-color: var(--black-body);
    width: 10rem;
    margin: 0 auto;
    margin-bottom: var(--size-spacing)
}

.photos-slider-container {
    .photo-event  img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;

        @media screen and (max-width: 767px) {
            margin-bottom: var(--size-spacing);
        }
    }
}

#fotos-section {
    padding-bottom: 10rem;
}


#fotos-section .zoom-icon {
    display: none;
}

/* Ajustes carrusel */

.carousel-indicators li>div>a {
    background-color: var(--white);
    height: 15px !important;
    width: 15px !important;
    opacity: 1;
    border: 1px solid var(--black-body);
}

.carousel-indicators {
    max-width: 150px !important;
}

.carousel .carousel-indicators {
    top: 100%;
    display: none;
    margin-top: var(--size-spacing);
}

.carousel .carousel-indicators li .carousel-indicator:after {
    border: unset;
}

.carousel .carousel-indicators li.active a {
    background-color: var(--black-body);
    border: 1px solid var(--black-body);
}

.carousel .carousel-control.left,
.carousel .carousel-control.right {
    /* display: none; */
}

@media screen and (max-width: 46.375rem) {
    .carousel .carousel-indicators {
        display: flex !important;
        /* display: none; */
        top: 100%;
        justify-content: space-evenly;
        margin-top: var(--size-spacing);
    }
}

#pre-login-section {
    padding-top: 0;
}

#pre-login-section .not-logged {
    padding-top: 2rem;
    padding-block: 2rem;
}

#pre-login-section .not-logged h2 {
    font-family: var(--gotham);
}

#pre-login-section .not-logged ul li a {
    font-family: var(--gotham);
    font-size: var(--size-body) !important;
    margin-top: var(--size-spacing);
}

.revolucion-cvmi #promomats-code {
    color: var(--black-body);
    padding-block: 25px;

    .claims-text {
        text-align: center;
        padding-block: var(--size-spacing);

        a {
            font-family: var(--gotham);
            font-weight: var(--bold);
            text-decoration: none;
        }
    }

    .promomats-section-col {
        max-width: 900px;
        margin: 0 auto;
        &> .row > .column-1 {
            border-right: 2px solid #9A9A9A;

            @media screen and (max-width: 767px) {
                border-right: unset;
                border-bottom: 2px solid #9A9A9A;
            }
        }
        

        .cert-text {
            padding-bottom: var(--size-spacing);
        }

        p {
            text-align: left;
        }

        .qr-code-col {
            .qr-code-text {
                padding-left: 2rem;
                padding-bottom: var(--size-spacing);
                position: relative;
                &::before {
                    content: '';
                    position: absolute;
                    left: -2rem;
                    top: 0;
                    bottom: 0;
                    width: 0;
                    height: 0;
                    border-top: 2.5rem solid transparent;
                    border-bottom: 2.5rem solid transparent;
                    
                }
                &.enhertu::before {
                    border-right: 2rem solid var(--enhertu);
                }
                &.lynparza::before {
                    border-right: 2rem solid var(--lynparza);
                }
                &.truqap::before {
                    border-right: 2rem solid var(--truqap);
                }
                &.imfinzi::before {
                    border-right: 2rem solid var(--imfinzi);
                }
            }
            .qr-marca {
                img {
                    width: 100%;
                    height: auto;
                    object-fit: contain;
                    max-width: 160px;
                }
            }

            .logo-marca {
                img {
                    max-height: 50px;
                    object-fit: contain;
                    width: 100%;
                }
            }
            @media screen and (max-width: 767px) {
                &> .row {
                    display: flex;
                }
            }
        }
        @media screen and (max-width: 767px) {
            &> .row > .col-sm-4 {
                padding-block: 2rem;
            }
            .cert-text {
                padding-top: var(--size-spacing);
            }
        }
    }
}

.html-asset-container {
    display: none;
}