:root {
      --color-primary: #FF7A00;
      --color-primary-dark: #de6a00;
      --color-tertiary: #FFD630;
      --color-grey: #DEDEDE;
      --color-light: #FFFFFF;
      --color-dark: #000000;
    }

    .color--primary {
      color: var(--color-primary);
    }

    .color--primary-dark {
      color: var(--color-primary-dark);
    }

    .color--secondary {
      color: var(--color-secondary);
    }

    .color--secondary-dark {
      color: var(--color-secondary-dark);
    }

    .color--tertiary {
      color: var(--color-tertiary);
    }

    .color--grey {
      color: var(--color-grey);
    }

    .color--light {
      color: var(--color-light);
    }

    .color--dark {
      color: var(--color-dark);
    }

    .hero-banner {
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-size: 100%;
      height: fit-content;
      position: relative;
    }

    .hero-banner * {
      box-sizing: border-box;
    }

    .hero-banner .modal-opener {
      text-decoration: underline;
    }

    .hero-banner .modal-opener:hover {
      cursor: pointer;
    }

    .hero-banner__inner {
      margin: 0 auto;
      max-width: 1280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
    }

    @media screen and (min-width: 800px) {
      .hero-banner__inner {
        flex-direction: row;
        align-items: flex-end;
      }
    }


    .hero-banner__main-content {
      position: relative;
      padding: 35px 12px;
      height: 100%;
      display: flex;
      flex-direction: column;
      z-index: 10;
    }

    @media screen and (min-width: 600px) {
      .hero-banner__main-content {
        padding: 35px;
      }
    }

    .hero-banner__title {
      margin: 0;
      display: block !important;
      position: static;
      text-align: left;
      margin-left: 0;
      display: block;
    }

    .hero-banner__subtitle {
      margin-bottom: 0;
      color: #FFF;
      font-family: "Helvetica--Neue--75";
      font-weight: 700;
      font-size: 32px;
      line-height: 100%;
      letter-spacing: -0.4px;
      font-style: normal;
      text-align: left;
      display: block;
      margin-top: 12px;
    }
    .hero-banner__subtitle.primary-bold--55 {font-family: "Helvetica--Neue--55";font-size: 26px;}
    @media screen and (min-width: 600px) {
      .hero-banner__subtitle.primary-bold--55 {font-size: 32px;}
    }

    .hero-banner__features {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0;
      list-style-type: none;
      margin-top: 25px;
    }

    .hero-banner__feature {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .hero-banner__feature img {}

    .hero-banner__feature span {}

    .hero-banner__logos {
      display: flex;
      flex-direction: column;
    }

    .hero-banner__logos p {margin-top: 7px;}

    .hero-banner__logos-inner {
      display: flex;
      gap: 20px;
    }

    .hero-banner__logos-inner .logo-svg svg {
      height: 100%;
      width: 100%;
    }
    .hero-banner__logos-inner .logo-svg img {
      height: 100%;
      width: 100%;
    }

    .hero-banner__logos-inner .logo-svg svg>path {
      color: var(--color-light);
      fill: var(--color-light);
    }

    .hero-banner__logos img {}

    .hero-banner__extra {}

    .hero-banner__bottom {
      display: flex;
      flex-direction: column;
      margin-top: auto;
    }

    @media screen and (min-width: 800px) {
      .hero-banner__bottom.hero-banner__bottom--row {
        flex-direction: row;
        gap: 24px;
        align-items: flex-end;
      }
    }


    .hero-banner__bottom--row {
      gap: 24px;
    }

    .hero-banner__bottom--column {
      gap: 24px;
    }



    .hero-banner__price {margin-top:20px;}

    .hero-banner__price-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .hero-banner__price-before {
      margin: 0;
      margin-top: 24px;
    }

    .hero-banner__price-inner {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .hero-banner__price-inner p {
      margin: 0;
    }

    .hero-banner__price-duration {
      margin: 0;
      margin-top: 8px;
    }

    .hero-banner__actions {
      display: flex;
      gap: 12px;
      height: fit-content;
    }

    .hero-banner__actions.hero-banner__actions--row {
      flex-direction: row;
    }

    .hero-banner__actions.hero-banner__actions--column {
      flex-direction: column;
    }

    .hero-banner__btn {
      border: none;
      width: fit-content;
      box-sizing: border-box;
      padding: 14px 24px;
      font-family: "Helvetica--Neue--75";
      font-weight: 700;
      font-size: 18px;
      line-height: 17px;
      letter-spacing: -0.11px;
      display: block;
      text-decoration: none;
    }

    .hero-banner__btn:hover {
      cursor: pointer;
    }

    .hero-banner__btn.btn-color--primary,
    .hero-banner__btn.btn-color--default {
      background-color: var(--color-primary);
      color: var(--color-dark);
      border: 2px solid var(--color-primary);
    }

    .hero-banner__btn.btn-color--outline {
      border: 2px solid var(--color-light);
      color: var(--color-light);
      background-color: transparent;
      box-shadow: 0 2px 2px 0 rgba(62, 62, 62, 0.5);
      text-shadow: 2px 2px 0 rgba(62, 62, 62, 0.5);
    }

    .hero-banner--base {}

    .hero-banner__product {
      /* max-width: 30%; */
    }

    @media screen and (min-width: 800px) {
      .hero-banner__product {
        max-width: 30%;
      }
    }

    .hero-banner__product>img {
      height: 100%;
      width: 100%;
    }

    /* ----------- hero-banner--oferta-fibra-movil-tv-soluciones-digitales ------------ */
    .hero-banner.hero-banner--oferta-fibra-movil-tv-soluciones-digitales .hero-banner__title {
      max-width: 499px;
    }

    .hero-banner.hero-banner--oferta-fibra-movil-tv-soluciones-digitales .hero-banner__subtitle {
      max-width: 499px;
    }

    .hero-modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 900;
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
    }

    .hero-modal *{
      box-sizing: border-box;
    }

    .hero-modal.open {
      display: block;
    }

    .hero-modal__inner{
      display: flex;
      flex-direction: column;
      background-color: var(--color-dark);
      border: 1px solid var(--color-primary);
      padding: 10px 20px 20px 20px;
      max-width: 360px;
      height: fit-content;
      min-height: 485px;
      margin: 0 auto;
    }

    .hero-modal__header{
      margin-bottom: 25px;
    }

    .hero-modal__header h3{
      margin: 0;
    }

    .hero-modal__close-button{
      margin-left: auto;
      display: block;
    }

    .hero-modal__content .txtpopup > ul > li:not(:last-child){
      margin-bottom: 8px;
    }

    .hero-modal__content  ul:first-child {
      list-style-type: none; 
      padding-left: 1.2em;   
    }

    .hero-modal__content ul:first-child li::before {
      content: "•";          
      color: var(--color-primary);           
      display: inline-block;
      width: 1em;            
      margin-left: -1em; 
    }

    .hero-modal__content img{
      margin: 8px 0;
    }

    .hero-modal__content ul li ul{
      list-style-type: none; 
      padding-left: 1.2em;
      margin-top: 8px;
    }

    .hero-modal__content ul:first-child li ul li::before {
      content: "•";          
      color: var(--color-light);           
      display: inline-block;
      width: 1em;            
      margin-left: -1em; 
    }