@font-face {
  font-family: "Archivo-Bold";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Archivo-Bold.ttf");
}

@font-face {
  font-family: "Archivo-Medium";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Archivo-Medium.ttf");
}

@font-face {
  font-family: "Archivo-Regular";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Archivo-Regular.ttf");
}
@font-face {
  font-family: "Archivo-SemiBold";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Archivo-SemiBold.ttf");
}

@font-face {
  font-family: "ClashDisplay-Medium";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/ClashDisplay-Medium.otf");
}

@font-face {
  font-family: "ClashDisplay-Bold";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/ClashDisplay-Bold.otf");
}

@font-face {
  font-family: "ClashDisplay-Regular";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/ClashDisplay-Regular.otf");
}

body {
  font-family: "Archivo-Regular" !important;
  background-color: #ffffff;
  color: #000000;
  overflow-x: hidden; /* Evita el scroll */
}
/* newsss */

@media (max-width: 767px) {
  .logo-nav {
    width: 100px;
  }
  .navbg-flibs {
    background-color: #f5f5f5;
    padding: 5% 5%;
  }

  .linksflibs-nav {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #172f6d;
    font-size: 1rem;
    line-height: 1rem;
    margin-top: 0%;
  }

  .banner-sponsors {
    background-image: linear-gradient(#00000000, #0c2941),
      url(../img/header.png);
    background-color: #ffffff;
    min-height: 220px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15% 0px 10% 0px;
  }

  .title-planes {
    font-family: "ClashDisplay-Bold" !important;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 1px black;
    font-size: 2rem;
    line-height: 3rem;
    margin-bottom: 0%;
    text-transform: uppercase;
  }

  .text-planes {
    font-family: "ClashDisplay-Regular" !important;
    text-align: center;
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-top: 1%;
    margin-bottom: 2%;
    text-transform: none;
    letter-spacing: 3px;
  }

  .title-sponsors {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #eaf3ff;
    font-size: 5rem;
    line-height: 3rem;
    margin-top: 0%;
  }

  .text-sponsors {
    font-family: "Archivo-Regular" !important;
    text-align: start;
    color: #0098ff;
    font-size: 1.3rem;
    line-height: 1.5rem;
    margin-top: 0%;
  }

  .planoro-sp {
    background-image: linear-gradient(to bottom, #e5e5e500, #f0f0f0);
    padding: 30px 0px 5% 0px;
  }

  .margin-lnkroro {
    margin-top: 5%;
  }

  .title-sp-oro {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #064e83;
    font-size: 1.5rem;
    line-height: 3rem;
    margin-top: 0%;
    margin-bottom: 5%;
    /* padding-left: 30px; */
    text-transform: uppercase;
  }

  .start-sponsors {
    width: 35px;
    margin-top: -5px;
  }

  .col-tarjet-oro {
    border: 1px solid #f2f2f229;
    padding: 15px 15px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px 0px #00000026;
    transition: all 0.5s;
    background-color: white;
  }
  .col-tarjet-oro:hover {
    border: 1px solid #f2f2f229;
    padding: 15px 15px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px 0px #00000094;
    transition: all 0.5s;
    background-color: white;
  }

  .img-tarjet-oro {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 10px 10px 0px;
    min-height: 550px;
  }

  .logo-oro {
    width: 150px;
  }

  .tag-sporo {
    font-family: "Archivo-Regular";
    background-color: #ebebeb;
    padding: 5px 10px;
    color: #dfb302;
    font-size: 12px;
    border-radius: 10px;
  }

  .btn-video-oro {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #064e83;
    padding: 10px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }
  .btn-video-oro:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #064e83;
    padding: 10px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }
  .btn-web-oro {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d2d2d2;
    padding: 10px 20px;
    width: 100%;
    color: #041541;
    border-radius: 20px;
  }
  .btn-web-oro:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d2d2d2;
    padding: 10px 20px;
    width: 100%;
    color: #041541;
    border-radius: 20px;
  }

  .btn-social-oro {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #ffffff;
    padding: 10px 16px;
    color: #041541;
    border-radius: 30px;
    margin-right: 10px;
    box-shadow: 0px 1px 5px #04295f3b;
  }

  .btn-social-oro:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #ffffff;
    padding: 10px 16px;
    color: #041541;
    border-radius: 30px;
    margin-right: 10px;
    box-shadow: 0px 1px 5px #04295f73;
  }

  .title-carctoro {
    font-family: "ClashDisplay-Medium" !important;
    text-align: start;
    color: #041541;
    font-size: 1rem;
    line-height: 1rem;
    margin-top: 5%;
    margin-bottom: 3%;
    text-transform: uppercase;
  }

  .p-tarjet-oro {
    font-family: "Archivo-Regular" !important;
    text-align: justify;
    color: #1c1c1c;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0%;
    margin-top: 0%;
    text-transform: inherit;
  }

  /* end news */

  /* === ESTILOS NIVEL ORO === */
  .card-gold {
    background-color: #ffffff;
    border-bottom: 10px solid #064e83;
    border-radius: 1rem;
    box-shadow: 0 0 25px rgb(160 160 160);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 500px;
  }

  .card-gold:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgb(80 80 80);
  }

  /* Estilo para el botón principal CTA ORO */
  .btn-gold {
    background-color: #ffd700;
    color: #1a202c;
    /* Texto oscuro en el botón */
    font-weight: bold;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 10px rgba(255, 215, 0, 0.3);
  }

  .btn-gold:hover {
    background-color: #f0c300;
    color: #1a202c;
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.7);
  }

  /* Estilo para el icono interactivo ORO */
  .icon-play {
    width: 4rem;
    height: 4rem;
    background-color: #2067d5;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 10px rgb(32 103 213 / 22%);
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
  }

  .icon-play:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(32, 104, 213, 0.699);
  }

  .icon-play svg {
    fill: #ffffff;
  }

  /* Placeholder Logo ORO */
  .logo-placeholder {
    background-color: #f2f2f2;
    border-radius: 0.5rem;
    width: 100%;
    /* Tamaño del logo Oro */
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .logo-placeholder p {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1a202c;
    line-height: 1.2;
    text-align: center;
  }

  /* === ESTILOS NIVEL PLATA === */
  .card-silver {
    background-color: #ffffff;
    border-bottom: 5px solid #d7d7d7;
    border-radius: 0.75rem;
    box-shadow: 0 3px 7px #0000007a;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: #000000;
  }

  .card-silver:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(169, 169, 169, 0.5);
  }

  /* Placeholder Logo PLATA */
  .logo-placeholder-silver {
    background-color: #2668d400;
    border-radius: 0.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .logo-placeholder-silver p {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }

  .text-silver {
    font-family: "Archivo-Bold";
    color: #1f7684 !important;
  }

  .logo-wall-bronze {
    padding: 1px;
  }

  .card-bronze-logo {
    background-color: #2d374800;
    border-bottom: 5px solid #cd7f32;
    border-radius: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 17px #00000030;
    display: block;
    text-decoration: none;
    cursor: pointer;
    min-height: 250px;
    padding: 15% 0px !important;
  }

  .card-bronze-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(205, 127, 50, 0.6);
  }

  /* Placeholder Logo BRONCE */
  .logo-placeholder-bronze {
    background-color: #cd7f32;
    border-radius: 0.25rem;
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0.5rem;
  }

  .logo-placeholder-bronze p {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a202c;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }

  .text-bronze {
    color: #cd7f32 !important;
  }

  /* === ESTILOS GENERALES DE MODAL === */
  .modal-content {
    background-color: #ffffff;
    /* Fondo oscuro del modal */
    color: #313131;
    border-radius: 1rem;
    max-height: 90vh;
  }

  .modal-header {
    border-bottom: 1px solid #374151;
  }

  .modal-body {
    overflow-y: auto;
  }

  .video-oro-modlas {
    width: 100%;
  }

  /* PLANES ATN PLATA */

  .plan-plata-sp {
    background-image: linear-gradient(0deg, #f0f0f0, transparent);
    padding: 5% 0px;
  }

  .title-sp-plata {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #1f7684;
    font-size: 1.5rem;
    line-height: 3rem;
    margin-top: 5%;
    margin-bottom: -15%;
    /* padding-left: 30px; */
    text-transform: uppercase;
  }

  .btn-web-silver {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #1f7684;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }

  .btn-web-silver:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #1f7684;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }

  .p-tarjet-silver {
    font-family: "Archivo-Regular" !important;
    text-align: center;
    color: #000000;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 5%;
    margin-top: 5%;
    text-transform: inherit;
  }
  .p-tarjet-silver2 {
    font-family: "Archivo-Regular" !important;
    text-align: start;
    color: #000000;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 5%;
    margin-top: 5%;
    text-transform: inherit;
  }

  .icons-footer-social {
    text-align: center;
  }
  .icon-footer {
    font-family: "Archivo-Regular" !important;
    color: #fff;
    font-size: 1.5rem;
    margin-right: 15px;
  }

  .copy {
    background: #000914;
    padding: 20px 0px 0px 0px;
  }
  .copy-title {
    font-family: "Archivo-Regular" !important;
    color: #c1c1c1;
    font-size: 12px;
    text-align: center;
  }

  .link-ia {
    font-family: "Archivo-Regular" !important;
    text-decoration: none;
    color: #ffffff;
  }

  /**************************************************************************************************************************************************************  WHATSAPP ***********************************************************
*******************************************************************************************************************/

  .wssss {
    display: block;
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 68px;
    height: 68px;
    z-index: 1999;
    background-color: #098b4c;
    border-radius: 100%;
    margin-left: 100px;
  }

  .wssss i {
    color: #fff;
    margin: 4px;
    padding: 4px;
    padding-left: 13px;
    padding-top: 8px;
  }

  /* PLANES ATN Bronce */

  .plan-bronce-sp {
    background-image: linear-gradient(0deg, #f0f0f0, transparent);
    padding: 5% 0px;
  }

  .title-sp-bronce {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #cd7f32;
    font-size: 1.5rem;
    line-height: 3rem;
    margin-top: 5%;
    padding-left: 0px;
    text-transform: uppercase;
  }

  .subtitle-sp-bronce {
    font-family: "Archivo-Regular" !important;
    text-align: center;
    color: #242424;
    font-size: 16px;
    line-height: 20px;
    margin-top: 0%;
    margin-bottom: 5%;
    padding-left: 0px;
  }

  .text-sp-bronce {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #cd7f32;
    font-size: 16px;
    line-height: 20px;
    margin-top: 5%;
    margin-bottom: 5%;
    padding-left: 0px;
  }

  .btn-web-bronce {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d18840;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }
  .btn-web-bronce:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d18840;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }

  .altorow {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .altorow2 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media (min-width: 768px) and (max-width: 1919px) {
  .logo-nav {
    width: 150px;
  }
  .navbg-flibs {
    background-color: #f5f5f5;
    padding: 1% 5%;
  }

  .linksflibs-nav {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #172f6d;
    font-size: 1rem;
    line-height: 1rem;
    margin-top: 0%;
  }

  .banner-sponsors {
    background-image: linear-gradient(#00000000, #0c29416e),
      url(../img/header.png);
    background-color: #ffffff;
    min-height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7% 0px 3% 0px;
  }

  .title-planes {
    font-family: "ClashDisplay-Bold" !important;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 1px black;
    font-size: 4rem;
    line-height: 4rem;
    margin-bottom: 0%;
    text-transform: uppercase;
  }

  .text-planes {
    font-family: "ClashDisplay-Regular" !important;
    text-align: center;
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-top: 1%;
    margin-bottom: 2%;
    text-transform: none;
    letter-spacing: 3px;
  }

  .title-sponsors {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #eaf3ff;
    font-size: 5rem;
    line-height: 3rem;
    margin-top: 0%;
  }

  .text-sponsors {
    font-family: "Archivo-Regular" !important;
    text-align: start;
    color: #0098ff;
    font-size: 1.3rem;
    line-height: 1.5rem;
    margin-top: 0%;
  }

  .planoro-sp {
    background-image: linear-gradient(to bottom, #e5e5e500, #f0f0f0);
    padding: 5% 0px 5% 0px;
  }

  .title-sp-oro {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #064e83;
    font-size: 3rem;
    line-height: 3rem;
    margin-top: 0%;
    margin-bottom: 5%;
    /* padding-left: 30px; */
    text-transform: uppercase;
  }

  .start-sponsors {
    width: 35px;
    margin-top: -5px;
  }

  .col-tarjet-oro {
    border: 1px solid #f2f2f229;
    padding: 15px 15px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px 0px #00000026;
    transition: all 0.5s;
    background-color: white;
  }
  .col-tarjet-oro:hover {
    border: 1px solid #f2f2f229;
    padding: 15px 15px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px 0px #00000094;
    transition: all 0.5s;
    background-color: white;
  }

  .img-tarjet-oro {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 10px 10px 0px;
    min-height: 550px;
  }

  .logo-oro {
    width: 150px;
  }

  .tag-sporo {
    font-family: "Archivo-Regular";
    background-color: #ebebeb;
    padding: 5px 10px;
    color: #dfb302;
    font-size: 12px;
    border-radius: 10px;
  }

  .btn-video-oro {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #064e83;
    padding: 10px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }
  .btn-video-oro:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #064e83;
    padding: 10px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }
  .btn-web-oro {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d2d2d2;
    padding: 10px 20px;
    width: 100%;
    color: #041541;
    border-radius: 20px;
  }
  .btn-web-oro:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d2d2d2;
    padding: 10px 20px;
    width: 100%;
    color: #041541;
    border-radius: 20px;
  }

  .btn-social-oro {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #ffffff;
    padding: 10px 16px;
    color: #041541;
    border-radius: 30px;
    margin-right: 10px;
    box-shadow: 0px 1px 5px #04295f3b;
  }

  .btn-social-oro:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #ffffff;
    padding: 10px 16px;
    color: #041541;
    border-radius: 30px;
    margin-right: 10px;
    box-shadow: 0px 1px 5px #04295f73;
  }

  .title-carctoro {
    font-family: "ClashDisplay-Medium" !important;
    text-align: start;
    color: #041541;
    font-size: 1rem;
    line-height: 1rem;
    margin-top: 5%;
    margin-bottom: 3%;
    text-transform: uppercase;
  }

  .p-tarjet-oro {
    font-family: "Archivo-Regular" !important;
    text-align: justify;
    color: #1c1c1c;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0%;
    margin-top: 0%;
    text-transform: inherit;
  }

  /* end news */

  /* === ESTILOS NIVEL ORO === */
  .card-gold {
    background-color: #ffffff;
    border-bottom: 10px solid #064e83;
    border-radius: 1rem;
    box-shadow: 0 0 25px rgb(160 160 160);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 500px;
  }

  .card-gold:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgb(80 80 80);
  }

  /* Estilo para el botón principal CTA ORO */
  .btn-gold {
    background-color: #ffd700;
    color: #1a202c;
    /* Texto oscuro en el botón */
    font-weight: bold;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 10px rgba(255, 215, 0, 0.3);
  }

  .btn-gold:hover {
    background-color: #f0c300;
    color: #1a202c;
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.7);
  }

  /* Estilo para el icono interactivo ORO */
  .icon-play {
    width: 4rem;
    height: 4rem;
    background-color: #2067d5;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 10px rgb(32 103 213 / 22%);
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
  }

  .icon-play:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(32, 104, 213, 0.699);
  }

  .icon-play svg {
    fill: #ffffff;
  }

  /* Placeholder Logo ORO */
  .logo-placeholder {
    background-color: #f2f2f2;
    border-radius: 0.5rem;
    width: 100%;
    /* Tamaño del logo Oro */
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .logo-placeholder p {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1a202c;
    line-height: 1.2;
    text-align: center;
  }

  /* === ESTILOS NIVEL PLATA === */
  .card-silver {
    background-color: #ffffff;
    border-bottom: 5px solid #d7d7d7;
    border-radius: 0.75rem;
    box-shadow: 0 3px 7px #0000007a;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: #000000;
  }

  .card-silver:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(169, 169, 169, 0.5);
  }

  /* Placeholder Logo PLATA */
  .logo-placeholder-silver {
    background-color: #2668d400;
    border-radius: 0.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .logo-placeholder-silver p {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }

  .text-silver {
    font-family: "Archivo-Bold";
    color: #1f7684 !important;
  }

  .logo-wall-bronze {
    padding: 1px;
  }

  .card-bronze-logo {
    background-color: #2d374800;
    border-bottom: 5px solid #cd7f32;
    border-radius: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 17px #00000030;
    display: block;
    text-decoration: none;
    cursor: pointer;
    min-height: 250px;
    padding: 15% 0px !important;
  }

  .card-bronze-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(205, 127, 50, 0.6);
  }

  /* Placeholder Logo BRONCE */
  .logo-placeholder-bronze {
    background-color: #cd7f32;
    border-radius: 0.25rem;
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0.5rem;
  }

  .logo-placeholder-bronze p {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a202c;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }

  .text-bronze {
    color: #cd7f32 !important;
  }

  /* === ESTILOS GENERALES DE MODAL === */
  .modal-content {
    background-color: #ffffff;
    /* Fondo oscuro del modal */
    color: #313131;
    border-radius: 1rem;
    max-height: 90vh;
  }

  .modal-header {
    border-bottom: 1px solid #374151;
  }

  .modal-body {
    overflow-y: auto;
  }

  .video-oro-modlas {
    width: 100%;
  }

  /* PLANES ATN PLATA */

  .plan-plata-sp {
    background-image: linear-gradient(0deg, #f0f0f0, transparent);
    padding: 5% 0px;
  }

  .title-sp-plata {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #1f7684;
    font-size: 3rem;
    line-height: 3rem;
    margin-top: 0%;
    margin-bottom: 5%;
    /* padding-left: 30px; */
    text-transform: uppercase;
  }

  .btn-web-silver {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #1f7684;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }

  .btn-web-silver:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #1f7684;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }

  .p-tarjet-silver {
    font-family: "Archivo-Regular" !important;
    text-align: center;
    color: #000000;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 5%;
    margin-top: 5%;
    text-transform: inherit;
  }
  .p-tarjet-silver2 {
    font-family: "Archivo-Regular" !important;
    text-align: start;
    color: #000000;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 5%;
    margin-top: 5%;
    text-transform: inherit;
  }

  .icons-footer-social {
    text-align: center;
  }
  .icon-footer {
    font-family: "Archivo-Regular" !important;
    color: #fff;
    font-size: 1.5rem;
    margin-right: 15px;
  }

  .copy {
    background: #000914;
    padding: 20px 0px 0px 0px;
  }
  .copy-title {
    font-family: "Archivo-Regular" !important;
    color: #c1c1c1;
    font-size: 12px;
    text-align: center;
  }

  .link-ia {
    font-family: "Archivo-Regular" !important;
    text-decoration: none;
    color: #ffffff;
  }

  /**************************************************************************************************************************************************************  WHATSAPP ***********************************************************
*******************************************************************************************************************/

  .wssss {
    display: block;
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 68px;
    height: 68px;
    z-index: 1999;
    background-color: #098b4c;
    border-radius: 100%;
    margin-left: 100px;
  }

  .wssss i {
    color: #fff;
    margin: 4px;
    padding: 4px;
    padding-left: 13px;
    padding-top: 8px;
  }

  /* PLANES ATN Bronce */

  .plan-bronce-sp {
    background-image: linear-gradient(0deg, #f0f0f0, transparent);
    padding: 5% 0px;
  }

  .title-sp-bronce {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #cd7f32;
    font-size: 2.5rem;
    line-height: 3rem;
    margin-top: 0%;
    padding-left: 0px;
    text-transform: uppercase;
  }

  .subtitle-sp-bronce {
    font-family: "Archivo-Regular" !important;
    text-align: center;
    color: #242424;
    font-size: 16px;
    line-height: 20px;
    margin-top: 0%;
    margin-bottom: 5%;
    padding-left: 0px;
  }

  .text-sp-bronce {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #cd7f32;
    font-size: 16px;
    line-height: 20px;
    margin-top: 5%;
    margin-bottom: 5%;
    padding-left: 0px;
  }

  .btn-web-bronce {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d18840;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }
  .btn-web-bronce:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d18840;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }

  .altorow {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .altorow2 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media (min-width: 1920px) {
  .logo-nav {
    width: 150px;
  }
  .navbg-flibs {
    background-color: #f5f5f5;
    padding: 1% 5%;
  }

  .linksflibs-nav {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #172f6d;
    font-size: 1rem;
    line-height: 1rem;
    margin-top: 0%;
  }

  .banner-sponsors {
    background-image: linear-gradient(#00000000, #0c29416e),
      url(../img/header.png);
    background-color: #ffffff;
    min-height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7% 0px 3% 0px;
  }

  .title-planes {
    font-family: "ClashDisplay-Bold" !important;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 1px black;
    font-size: 4rem;
    line-height: 4rem;
    margin-bottom: 0%;
    text-transform: uppercase;
  }

  .text-planes {
    font-family: "ClashDisplay-Regular" !important;
    text-align: center;
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-top: 1%;
    margin-bottom: 2%;
    text-transform: none;
    letter-spacing: 3px;
  }

  .title-sponsors {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #eaf3ff;
    font-size: 5rem;
    line-height: 3rem;
    margin-top: 0%;
  }

  .text-sponsors {
    font-family: "Archivo-Regular" !important;
    text-align: start;
    color: #0098ff;
    font-size: 1.3rem;
    line-height: 1.5rem;
    margin-top: 0%;
  }

  .planoro-sp {
    background-image: linear-gradient(to bottom, #e5e5e500, #f0f0f0);
    padding: 5% 0px 5% 0px;
  }

  .title-sp-oro {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #064e83;
    font-size: 3rem;
    line-height: 3rem;
    margin-top: 0%;
    margin-bottom: 5%;
    /* padding-left: 30px; */
    text-transform: uppercase;
  }

  .start-sponsors {
    width: 35px;
    margin-top: -5px;
  }

  .col-tarjet-oro {
    border: 1px solid #f2f2f229;
    padding: 15px 15px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px 0px #00000026;
    transition: all 0.5s;
    background-color: white;
  }
  .col-tarjet-oro:hover {
    border: 1px solid #f2f2f229;
    padding: 15px 15px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px 0px #00000094;
    transition: all 0.5s;
    background-color: white;
  }

  .img-tarjet-oro {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 10px 10px 0px;
    min-height: 550px;
  }

  .logo-oro {
    width: 150px;
  }

  .tag-sporo {
    font-family: "Archivo-Regular";
    background-color: #ebebeb;
    padding: 5px 10px;
    color: #dfb302;
    font-size: 12px;
    border-radius: 10px;
  }

  .btn-video-oro {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #064e83;
    padding: 10px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }
  .btn-video-oro:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #064e83;
    padding: 10px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }
  .btn-web-oro {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d2d2d2;
    padding: 10px 20px;
    width: 100%;
    color: #041541;
    border-radius: 20px;
  }
  .btn-web-oro:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d2d2d2;
    padding: 10px 20px;
    width: 100%;
    color: #041541;
    border-radius: 20px;
  }

  .btn-social-oro {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #ffffff;
    padding: 10px 16px;
    color: #041541;
    border-radius: 30px;
    margin-right: 10px;
    box-shadow: 0px 1px 5px #04295f3b;
  }

  .btn-social-oro:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #ffffff;
    padding: 10px 16px;
    color: #041541;
    border-radius: 30px;
    margin-right: 10px;
    box-shadow: 0px 1px 5px #04295f73;
  }

  .title-carctoro {
    font-family: "ClashDisplay-Medium" !important;
    text-align: start;
    color: #041541;
    font-size: 1rem;
    line-height: 1rem;
    margin-top: 5%;
    margin-bottom: 3%;
    text-transform: uppercase;
  }

  .p-tarjet-oro {
    font-family: "Archivo-Regular" !important;
    text-align: justify;
    color: #1c1c1c;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0%;
    margin-top: 0%;
    text-transform: inherit;
  }

  /* end news */

  /* === ESTILOS NIVEL ORO === */
  .card-gold {
    background-color: #ffffff;
    border-bottom: 10px solid #064e83;
    border-radius: 1rem;
    box-shadow: 0 0 25px rgb(160 160 160);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 500px;
  }

  .card-gold:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgb(80 80 80);
  }

  /* Estilo para el botón principal CTA ORO */
  .btn-gold {
    background-color: #ffd700;
    color: #1a202c;
    /* Texto oscuro en el botón */
    font-weight: bold;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 10px rgba(255, 215, 0, 0.3);
  }

  .btn-gold:hover {
    background-color: #f0c300;
    color: #1a202c;
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.7);
  }

  /* Estilo para el icono interactivo ORO */
  .icon-play {
    width: 4rem;
    height: 4rem;
    background-color: #2067d5;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 10px rgb(32 103 213 / 22%);
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
  }

  .icon-play:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(32, 104, 213, 0.699);
  }

  .icon-play svg {
    fill: #ffffff;
  }

  /* Placeholder Logo ORO */
  .logo-placeholder {
    background-color: #f2f2f2;
    border-radius: 0.5rem;
    width: 100%;
    /* Tamaño del logo Oro */
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .logo-placeholder p {
    font-size: 1.5rem;
    font-weight: 900;
    color: #1a202c;
    line-height: 1.2;
    text-align: center;
  }

  /* === ESTILOS NIVEL PLATA === */
  .card-silver {
    background-color: #ffffff;
    border-bottom: 5px solid #d7d7d7;
    border-radius: 0.75rem;
    box-shadow: 0 3px 7px #0000007a;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: #000000;
  }

  .card-silver:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(169, 169, 169, 0.5);
  }

  /* Placeholder Logo PLATA */
  .logo-placeholder-silver {
    background-color: #2668d400;
    border-radius: 0.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .logo-placeholder-silver p {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }

  .text-silver {
    font-family: "Archivo-Bold";
    color: #1f7684 !important;
  }

  .logo-wall-bronze {
    padding: 1px;
  }

  .card-bronze-logo {
    background-color: #2d374800;
    border-bottom: 5px solid #cd7f32;
    border-radius: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 17px #00000030;
    display: block;
    text-decoration: none;
    cursor: pointer;
    min-height: 250px;
    padding: 15% 0px !important;
  }

  .card-bronze-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(205, 127, 50, 0.6);
  }

  /* Placeholder Logo BRONCE */
  .logo-placeholder-bronze {
    background-color: #cd7f32;
    border-radius: 0.25rem;
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0.5rem;
  }

  .logo-placeholder-bronze p {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a202c;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }

  .text-bronze {
    color: #cd7f32 !important;
  }

  /* === ESTILOS GENERALES DE MODAL === */
  .modal-content {
    background-color: #ffffff;
    /* Fondo oscuro del modal */
    color: #313131;
    border-radius: 1rem;
    max-height: 90vh;
  }

  .modal-header {
    border-bottom: 1px solid #374151;
  }

  .modal-body {
    overflow-y: auto;
  }

  .video-oro-modlas {
    width: 100%;
  }

  /* PLANES ATN PLATA */

  .plan-plata-sp {
    background-image: linear-gradient(0deg, #f0f0f0, transparent);
    padding: 5% 0px;
  }

  .title-sp-plata {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #1f7684;
    font-size: 3rem;
    line-height: 3rem;
    margin-top: 0%;
    margin-bottom: 5%;
    /* padding-left: 30px; */
    text-transform: uppercase;
  }

  .btn-web-silver {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #1f7684;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }

  .btn-web-silver:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #1f7684;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }

  .p-tarjet-silver {
    font-family: "Archivo-Regular" !important;
    text-align: center;
    color: #000000;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 5%;
    margin-top: 5%;
    text-transform: inherit;
  }
  .p-tarjet-silver2 {
    font-family: "Archivo-Regular" !important;
    text-align: start;
    color: #000000;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 5%;
    margin-top: 5%;
    text-transform: inherit;
  }

  .icons-footer-social {
    text-align: center;
  }
  .icon-footer {
    font-family: "Archivo-Regular" !important;
    color: #fff;
    font-size: 1.5rem;
    margin-right: 15px;
  }

  .copy {
    background: #000914;
    padding: 20px 0px 0px 0px;
  }
  .copy-title {
    font-family: "Archivo-Regular" !important;
    color: #c1c1c1;
    font-size: 12px;
    text-align: center;
  }

  .link-ia {
    font-family: "Archivo-Regular" !important;
    text-decoration: none;
    color: #ffffff;
  }

  /**************************************************************************************************************************************************************  WHATSAPP ***********************************************************
*******************************************************************************************************************/

  .wssss {
    display: block;
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 68px;
    height: 68px;
    z-index: 1999;
    background-color: #098b4c;
    border-radius: 100%;
    margin-left: 100px;
  }

  .wssss i {
    color: #fff;
    margin: 4px;
    padding: 4px;
    padding-left: 13px;
    padding-top: 8px;
  }

  /* PLANES ATN Bronce */

  .plan-bronce-sp {
    background-image: linear-gradient(0deg, #f0f0f0, transparent);
    padding: 5% 0px;
  }

  .title-sp-bronce {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #cd7f32;
    font-size: 2.5rem;
    line-height: 3rem;
    margin-top: 0%;
    padding-left: 0px;
    text-transform: uppercase;
  }

  .subtitle-sp-bronce {
    font-family: "Archivo-Regular" !important;
    text-align: center;
    color: #242424;
    font-size: 16px;
    line-height: 20px;
    margin-top: 0%;
    margin-bottom: 5%;
    padding-left: 0px;
  }

  .text-sp-bronce {
    font-family: "Archivo-Bold" !important;
    text-align: center;
    color: #cd7f32;
    font-size: 16px;
    line-height: 20px;
    margin-top: 5%;
    margin-bottom: 5%;
    padding-left: 0px;
  }

  .btn-web-bronce {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d18840;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }
  .btn-web-bronce:hover {
    font-family: "Archivo-Bold";
    font-size: 16px;
    background-color: #d18840;
    padding: 5px 20px;
    width: 100%;
    color: white;
    border-radius: 20px;
  }

  .altorow {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .altorow2 {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .broncebronce {
    justify-content: center;
    text-align: center;
  }
}