:root {
    --bg-1: #14102A;
    --bg-2: #2B0E4E;
    --bg-3: #5A1FAE;
    --bg-4: #7B2CF8;
    --bg-5: #AEEBFF;
    --electric: #79E0FF;
    --magenta: #AD2EF5;
    --white: #ffffff;
    --text: #E9E7FF;
    --muted: #B7B4D6;
    --accent: #7B2CF8;
    --accent-2: #AD2EF5;
    --teal: #79E0FF;
    --radius: 18px;
    --shadow: 0 14px 40px rgba(5, 5, 15, .35);
  }

  * {
    box-sizing: border-box
  }

  html,
  body {
    margin: 0
  }

  body {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--text);
    background: #0C0A1A;
    line-height: 1.6
  }

  img {
    display: block;
    max-width: 100%
  }

  a {
    color: inherit;
    text-decoration: none
  }

  .underline {
    text-decoration: underline
  }

  .container {
    width: min(1200px, 92%);
    margin-inline: auto
  }

  .skip {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
  }

  .skip:focus {
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    background: #000;
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    z-index: 999
  }

  .announce {
    background: #0f0d24;
    border-bottom: 1px solid rgba(174, 235, 255, .15)
  }

  .announce__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0
  }

  .btn-xs {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .85rem
  }

  .progress {
    position: sticky;
    top: 0;
    height: 3px;
    background: transparent;
    z-index: 70
  }

  .progress__bar {
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--magenta));
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: linear-gradient(180deg, rgba(12, 10, 26, .85), rgba(12, 10, 26, .55));
    backdrop-filter: saturate(1.2) blur(8px)
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 0
  }

  .brand {
    font-weight: 800;
    color: #fff;
    letter-spacing: .2px
  }

  .menu {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0
  }

  .menu a {
    color: #D7D3FF;
    font-weight: 500;
    opacity: .95
  }

  .menu a:hover,
  .menu a.active {
    opacity: 1;
    color: #fff
  }

  .btn {
    display: inline-block;
    background: linear-gradient(90deg, var(--accent), var(--magenta));
    color: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(123, 44, 248, .35);
    transition: transform .2s, filter .2s
  }

  .btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.1)
  }

  .btn-lg {
    padding: 14px 22px;
    border-radius: 14px
  }

  .btn-pill {
    border-radius: 999px
  }

  .btn-ghost {
    background: transparent;
    border: 2px solid rgba(174, 235, 255, .4);
    color: #E8E6FF
  }

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

  .hamburger {
    display: none;
    background: transparent;
    border: 0;
    width: 36px;
    height: 34px;
    gap: 5px;
    flex-direction: column;
    justify-content: center
  }

  .hamburger span {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 3px
  }

  .logo {
    height: 8rem;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
  }

  @media (max-width: 768px) {
    .logo {
      height: 3rem;
    }
  }

  @media (max-width: 480px) {
    .logo {
      height: 2.5rem;
    }
  }

  .logo:hover {
    transform: scale(1.05);
  }


  #inicio.hero {
    background-image: url('img/fondos/image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
  }

  .hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(125deg, #0C0A1A 10%, #1A1238 40%, #3A168A 70%, #7B2CF8 95%);
    padding: 86px 0 120px
  }

  .hero__grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    align-items: center
  }

  .eyebrow {
    margin: 0 0 8px;
    opacity: .9;
    letter-spacing: .2px;
    color: #AEEBFF;
    font-size: 25px;
  }

  .hero h1 {
    font-size: 60px;
    line-height: 1.05;
    margin: 0
  }

  .hero h2 {
    margin: 8px 0 12px;
    font-weight: 800;
    color: #AEEBFF;
  }

  .hero .date {
    font-size: 18px;
    margin: 6px 0 18px
  }

  .hero__cta .sub {
    margin-top: 10px;
    opacity: .9
  }

  .hero__qr {
    display: flex;
    justify-content: center
  }

  .qr-box {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(174, 235, 255, .25);
    border-radius: 18px;
    padding: 18px 18px 12px;
    text-align: center;
    backdrop-filter: blur(4px)
  }

  .qr-box.big {
    padding: 24px
  }

  .qr {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    background: linear-gradient(90deg, transparent 45%, #000 45% 55%, transparent 55%), linear-gradient(0deg, transparent 45%, #000 45% 55%, transparent 55%), repeating-linear-gradient(45deg, #000 0 8px, transparent 8px 16px), #fff;
    box-shadow: inset 0 0 0 10px #fff
  }

  .qr img {
    width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .qr-box p {
    margin: 10px 0 0;
    color: #E8E6FF;
    opacity: .9
  }

  .countdown {
    display: flex;
    gap: 12px;
    margin: 12px 0 18px
  }

  .countdown div {
    background: rgba(174, 235, 255, .10);
    border: 1px solid rgba(174, 235, 255, .25);
    padding: 10px 12px;
    border-radius: 12px;
    text-align: center;
    min-width: 70px
  }

  .countdown span {
    display: block;
    font-weight: 800;
    font-size: 22px
  }

  .countdown small {
    opacity: .85
  }


  .section {
    padding: 70px 0;
    background: linear-gradient(180deg, #0C0A1A, #14102A)
  }

  .section-gradient {
    background: linear-gradient(180deg, #1A1238 0, #221545 35%, #2B0E4E 100%)
  }

  .section-sky {
    background: linear-gradient(180deg, #0F0C22 0, #0F112A 50%, #0C0A1A 100%)
  }

  .section__title {
    text-align: center;
    margin: 0 0 26px;
    font-size: 35px;
    color: #E9E7FF
  }

  #special {
    display: block;      /* Asegura que ocupe una línea completa */
    width: 100%;         /* Ocupa todo el ancho del div padre */
    text-align: center;  /* Opcional: centra el texto */
    margin: 0, 15px;           /* Opcional: elimina márgenes si los hay */
  }


  .section__title__subtitle {
    text-align: center;
    margin: 0 0 26px;
    font-size: 25px;
    grid-column: 1 / -1;
    justify-self: center;
    /* Opcional, si el padre es Flexbox: */
    width: 100%;
  }

  .cards {
    display: grid;
    gap: 22px
  }

  .cards.two {
    grid-template-columns: repeat(2, 1fr)
  }

  .cards.three {
    grid-template-columns: repeat(3, 1fr)
  }

  .card {
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(123, 44, 248, .10), rgba(12, 10, 26, .35));
    border: 1px solid rgba(174, 235, 255, .10);
    padding: 24px;
    box-shadow: var(--shadow);
    color: #E9E7FF
  }

  .card.soft {
    background: linear-gradient(180deg, rgba(90, 31, 174, .25), rgba(12, 10, 26, .4))
  }

  .card.sky {
    background: linear-gradient(180deg, rgba(121, 224, 255, .20), rgba(12, 10, 26, .35))
  }

  .card.gradient.purple {
    background: linear-gradient(135deg, #5A1FAE 0, #7B2CF8 60%, #AD2EF5 100%);
    color: #fff;
    border: none
  }

  .card.gradient.teal {
    background: linear-gradient(135deg, #2BB6E2 0, #79E0FF 60%, #AEEBFF 100%);
    color: #0C0A1A;
    border: none
  }

  .muted {
    color: var(--muted)
  }

  .small {
    font-size: .95rem
  }

  .tiny {
    font-size: .85rem
  }

  .mb-8 {
    margin-bottom: 8px
  }

  .mt-8 {
    margin-top: 8px
  }

  .mt-16 {
    margin-top: 16px
  }

  .mt-24 {
    margin-top: 24px
  }

  .mt-40 {
    margin-top: 40px
  }

  .center {
    text-align: center
  }

  .why {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 10px
  }

  .why__item {
    background: linear-gradient(180deg, rgba(123, 44, 248, .12), rgba(12, 10, 26, .45));
    border: 1px solid rgba(174, 235, 255, .12);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    box-shadow: var(--shadow)
  }

  .why__item h5 {
    font-size: 20px;
    margin: 0
  }

  .why__icon {
    margin: 15px 0;
  }

  .why__icon svg {
    width: 60px;
    height: 60px;
    stroke-width: 1.5;
  }

  .why__item p {
    font-size: 18px;
    margin: 10px 0
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 26px
  }

  .stat {
    background: linear-gradient(135deg, #2B0E4E, #5A1FAE 60%, #7B2CF8);
    color: #fff;
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(123, 44, 248, .25)
  }

  .stat span {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    display: inline;
  }

  .filters {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 6px 0 16px;
    flex-wrap: wrap
  }

  .filters input,
  .filters select {
    background: #0F112A;
    color: #E9E7FF;
    border: 1px solid rgba(174, 235, 255, .25);
    border-radius: 999px;
    padding: 10px 12px
  }

  .tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
    flex-wrap: wrap
  }

  .tab {
    background: rgba(174, 235, 255, .1);
    border: 1px solid rgba(174, 235, 255, .2);
    color: #E9E7FF;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer
  }

  .tab.active {
    background: linear-gradient(90deg, var(--accent), var(--magenta));
    border-color: transparent
  }

  .tabpanes {
    display: none
  }

  .tabpanes.active {
    display: block
  }

  .agenda {
    list-style: none;
    margin: 0;
    padding: 0
  }

  .agenda li {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid rgba(174, 235, 255, .12)
  }

  .agenda time {
    font-weight: 800;
    color: #AEEBFF
  }

  .chip {
    background: rgba(174, 235, 255, .12);
    border: 1px solid rgba(174, 235, 255, .25);
    color: #E9E7FF;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer
  }

  #speakers {
    position: relative;
    overflow: hidden;
  }

  #speakers .speakers {
    position: relative;
    z-index: 1;
  }

  #speakers .decor-triangle {
    position: absolute;
    width: 50vw;
    height: 50vh;
    pointer-events: none;
    opacity: 0.3;
    background: linear-gradient(135deg, #5A1FAE 0%, #2B0E4E 100%);
    clip-path: polygon(18% 0%, 100% 0%, 100% 80%, 60% 62%);
    z-index: 0;
    filter: blur(80px);
  }

  #speakers .triangle-1 {
    bottom: -20%;
    left: -15%;
    transform: rotate(-10deg);
    width: 55vw;
    height: 55vh;
    opacity: 0.25;
  }

  #speakers .triangle-2 {
    top: -25%;
    right: -10%;
    transform: rotate(15deg);
    width: 60vw;
    height: 60vh;
    opacity: 0.3;
  }

  #speakers .triangle-3 {
    top: 15%;
    left: 20%;
    width: 45vw;
    height: 45vh;
    transform: rotate(5deg);
    opacity: 0.2;
  }

  #speakers .triangle-4 {
    top: -10%;
    left: -20%;
    width: 35vw;
    height: 35vh;
    transform: rotate(-25deg);
    opacity: 0.2;
  }

  #speakers .triangle-5 {
    bottom: -15%;
    right: 10%;
    width: 40vw;
    height: 40vh;
    transform: rotate(30deg);
    opacity: 0.15;
  }

  /* Nuevo contenedor para hacer posible el posicionamiento absoluto */
  .speaker__btn .avatar-wrap {
    position: relative;
    /* CLAVE: Define el contexto para posicionar la bandera */
    width: 100%;
    max-width: 200px;
    /* Usa el max-width del avatar */
    margin: 0 auto 1rem;
    /* Restaura el margen original del avatar */
  }

  /* Asegura que la imagen no tenga el margen inferior que ahora tendrá el contenedor */
  .speaker__btn .avatar-wrap .avatar {
    margin-bottom: 0;
  }

  /* Estilo y posicionamiento de la bandera */
  /* 🔹 Bandera */
  .speaker__btn .flag-icon {
    position: absolute;
    bottom: -12px;
    right: -5px;
    z-index: 2;
    /* Se mantiene visible sobre la foto */

    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Bandera circular */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* 🔸 Sin borde ni sombra para que quede totalmente al ras */
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;

    /* 🔸 Si quieres eliminar cualquier separación por antialiasing */
    transform: translate(2px, 2px);
  }

  /* Ejemplo de carga de banderas: */

  /* Bandera de Perú */
  .speaker__btn[data-country="pe"] .flag-icon {
    background-image: url('img/banderas/pe.png');
  }

  /* Bandera de Ecuador */
  .speaker__btn[data-country="ec"] .flag-icon {
    background-image: url('img/banderas/ec.png');
  }

  /* Bandera de Colombia */
  .speaker__btn[data-country="co"] .flag-icon {
    background-image: url('img/banderas/co.png');
  }

  /* Bandera de Brasil */
  .speaker__btn[data-country="br"] .flag-icon {
    background-image: url('img/banderas/br.png');
  }

  /* Bandera de Argentina */
  .speaker__btn[data-country="ar"] .flag-icon {
    background-image: url('img/banderas/arg.png');
  }

   /* Bandera de Italia */
  .speaker__btn[data-country="it"] .flag-icon {
    background-image: url('img/banderas/it.png');
  }

  /* Agrega una regla para cada país que necesites */





  .speakers {
    /* **CLAVE:** Cambiamos a Flexbox para permitir el centrado de filas incompletas */
    display: flex;
    flex-wrap: wrap;
    /* Esta propiedad es la que fuerza el centrado horizontal de los ítems */
    justify-content: center;
    gap: 22px;
  }

  .speaker {
    background: linear-gradient(180deg, rgba(90, 31, 174, .18), rgba(12, 10, 26, .55));
    border: 1px solid rgba(174, 235, 255, .12);
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 260px;
    width: 100%;
    max-width: 380px;
  }

  .speaker h6 {
    margin: 14px 0 6px;
    font-size: 18px
  }

  .speaker__btn {
    all: unset;
    cursor: pointer;
    display: block
  }

  .speakers .avatar {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 2 / 2.4;
    display: block;
    margin: 0 auto 1rem;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 0 30px rgba(0, 0, 0, 0.05) inset;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .speakers .avatar:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2),
      0 0 40px rgba(0, 0, 0, 0.08) inset;
  }

  .pricebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px
  }

  .coupon {
    display: flex;
    gap: 8px;
    align-items: center
  }

  .coupon input {
    background: #0F112A;
    color: #E9E7FF;
    border: 1px solid rgba(174, 235, 255, .25);
    border-radius: 999px;
    padding: 8px 12px
  }

  .price .price__value {
    font-size: 34px;
    font-weight: 800;
    color: #AEEBFF;
    margin: 6px 0 6px;
    text-shadow: 0 0 18px rgba(121, 224, 255, .45)
  }

  .price.featured {
    outline: 3px solid rgba(174, 235, 255, .35);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(123, 44, 248, .3)
  }

  .ribbon {
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, #79E0FF, #AEEBFF);
    color: #0C0A1A;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    margin-bottom: 8px
  }

  .slider {
    position: relative
  }

  .slider__viewport {
    overflow: hidden;
    border-radius: 16px
  }

  .slide {
    min-width: 100%;
    padding: 24px
  }

  .slide blockquote {
    background: linear-gradient(180deg, rgba(174, 235, 255, .06), rgba(12, 10, 26, .35));
    border: 1px solid rgba(174, 235, 255, .15);
    border-radius: 16px;
    padding: 22px
  }

  .slide cite {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-style: normal
  }

  .slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #1a133d;
    border: 1px solid rgba(174, 235, 255, .25);
    color: #fff;
    border-radius: 999px;
    width: 40px;
    height: 40px
  }

  .slider__nav.prev {
    left: -8px
  }

  .slider__nav.next {
    right: -8px
  }

  .mapwrap {
    position: relative;
    padding-bottom: 115%;
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--shadow)
  }

  .mapwrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
  }

  .tips h6 {
    margin: 14px 0 6px
  }

  .cards h6 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 18px;
  }

  .accordion details {
    background: rgba(174, 235, 255, .06);
    border: 1px solid rgba(174, 235, 255, .15);
    border-radius: 14px;
    padding: 12px 16px;
    margin: 10px 0
  }

  .accordion summary {
    cursor: pointer;
    font-weight: 700
  }

  .accordion p {
    margin: 10px 0 0
  }

  .newsletter {
    max-width: 700px;
    margin: auto;
    display: flex;
    gap: 10px;
    align-items: center
  }

  .newsletter input {
    flex: 1;
    background: #0F112A;
    color: #E9E7FF;
    border: 1px solid rgba(174, 235, 255, .25);
    border-radius: 12px;
    padding: 12px
  }

  .newsletter .hp,
  .form .hp {
    position: absolute;
    left: -5000px;
    opacity: 0;
    height: 0;
    width: 0
  }

  .form {
    max-width: 900px;
    margin: auto
  }

  .form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
  }

  .form__grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600
  }

  .form input,
  .form select,
  .form textarea {
    background: #0F112A;
    color: #E9E7FF;
    border: 1px solid rgba(174, 235, 255, .25);
    border-radius: 12px;
    padding: 12px
  }

  .form input:focus,
  .form select:focus,
  .form textarea:focus {
    outline: 2px solid #79E0FF
  }

  .check-terms {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px
  }

  .form__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px
  }

  .form__msg {
    margin-top: 10px
  }

  .section-sponsors {
    background: linear-gradient(180deg, #1A1238, #2B0E4E)
  }

  .sponsors {
    /* CLAVE: Cambiamos a Flexbox para permitir el centrado de filas incompletas */
    display: flex;
    /* Permite que los logos se envuelvan a la siguiente fila */
    flex-wrap: wrap;
    /* **CLAVE:** Centra los logos horizontalmente como un grupo */
    justify-content: center;
    gap: 18px;
    margin: 10px 0 16px;

    /* Mantenemos el contenedor principal centrado y con ancho limitado */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .sponsor__name,
  .sponsor__tier {
    text-align: center;
    margin: 2px 0;
  }

  .sponsor__name {
    font-size: 1.5rem;
    color: #fff;
    margin-top: 1.5rem;
  }

  .sponsor__tier {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
  }


  .tier-gold .sponsor {
    border: 1px solid rgba(255, 215, 0, .35)
  }

  .tier-silver .sponsor {
    border: 1px solid rgba(230, 230, 230, .35)
  }

  .tier-bronze .sponsor {
    border: 1px solid rgba(205, 127, 50, .35)
  }

  .sponsor {
    background: linear-gradient(180deg, rgba(174, 235, 255, .12), rgba(12, 10, 26, .6));
    border: 1px solid rgba(174, 235, 255, .18);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    color: #AEEBFF;
    filter: grayscale(.1);
    transition: .2s;
    width: 100%;
    max-width: 380px;
  }

  

  .sponsor img {
    max-width: 100%;
    max-height: 2000px;
    object-fit: contain;
  }


  .sponsor:hover {
    filter: none
  }

  .cta {
    background: radial-gradient(900px 320px at 110% 0%, rgba(121, 224, 255, .18), transparent 60%), linear-gradient(135deg, #0C0A1A, #2B0E4E 60%, #7B2CF8);
    color: #fff;
    padding: 70px 0 80px
  }

  .cta__box {
    text-align: center
  }

  .cta__grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    align-items: center;
    justify-content: center;
    margin-top: 18px
  }

  .cta a.btn {
    box-shadow: 0 10px 30px rgba(123, 44, 248, .45)
  }

  .footer {
    background: #0B091C;
    color: #D7D3FF;
    padding: 38px 0 26px
  }

  .footer__grid {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: 18px
  }

  .footer a {
    color: #D7D3FF
  }

  .contact {
    list-style: none;
    margin: 0;
    padding: 0
  }

  .cta-sticky {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: linear-gradient(180deg, rgba(20, 16, 52, .0), rgba(20, 16, 52, .85));
    backdrop-filter: blur(6px)
  }

  .cta-sticky__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0
  }

  .backtop {
    position: fixed;
    right: 18px;
    bottom: 84px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background: #2B0E4E;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: .2s
  }

  .backtop.show {
    opacity: 1;
    visibility: visible
  }

  .cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 8, 24, .9);
    border-top: 1px solid rgba(174, 235, 255, .2);
    display: none
  }

  .cookies__box {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px
  }

  .cookies__actions {
    display: flex;
    gap: 10px
  }

  /* Modal */
  .modal {
    border: 0;
    padding: 0;
    background: transparent
  }

  .modal::backdrop {
    background: rgba(0, 0, 0, .6)
  }

  .modal__card {
    background: #0F112A;
    border: 1px solid rgba(174, 235, 255, .25);
    border-radius: 18px;
    max-width: 640px;
    margin: auto;
    padding: 18px;
    color: #E9E7FF;
    box-shadow: var(--shadow)
  }

  .modal__close {
    background: #1a133d;
    border: 1px solid rgba(174, 235, 255, .25);
    color: #fff;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    float: right;
    cursor: pointer
  }

  @keyframes floatY {
    0% {
      transform: translateY(0)
    }

    50% {
      transform: translateY(-22px)
    }

    100% {
      transform: translateY(0)
    }
  }

  @keyframes floatXY {
    0% {
      transform: translate3d(0, 0, 0) rotate(0.6deg)
    }

    50% {
      transform: translate3d(20px, -26px, 0) rotate(-0.6deg)
    }

    100% {
      transform: translate3d(0, 0, 0) rotate(0.6deg)
    }
  }

  @keyframes driftDown {
    0% {
      transform: translateY(-20px)
    }

    100% {
      transform: translateY(20px)
    }
  }

  @keyframes glow {

    0%,
    100% {
      filter: drop-shadow(0 8px 26px rgba(123, 44, 248, .45))
    }

    50% {
      filter: drop-shadow(0 16px 38px rgba(121, 224, 255, .55))
    }
  }

  .decor--1 {
    animation: floatXY 18s ease-in-out infinite alternate
  }

  .decor--2 {
    animation: floatXY 22s ease-in-out infinite alternate-reverse
  }

  .hero .shards::before {
    animation: floatY 14s ease-in-out infinite
  }

  .hero .shards::after {
    animation: floatY 16s ease-in-out infinite reverse
  }

  .btn {
    animation: glow 6s ease-in-out infinite
  }

  .price.featured {
    animation: floatY 12s ease-in-out infinite
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important
    }
  }

  @media (max-width: 1100px) {
    .agenda li {
      grid-template-columns: 80px 1fr
    }
  }

  @media (max-width: 980px) {

    .cards.two,
    .cards.three {
      grid-template-columns: 1fr
    }

    .why,
    .stats,
    .speakers,
    .sponsors,
    .footer__grid {
      grid-template-columns: 1fr 1fr
    }

    .hero__grid {
      grid-template-columns: 1fr
    }

    .cta__grid {
      grid-template-columns: 1fr
    }

    .menu {
      display: none;
      position: absolute;
      top: 58px;
      left: 0;
      right: 0;
      background: #1A1238;
      padding: 14px 0
    }

    .menu li {
      padding: 6px 18px
    }

    .hamburger {
      display: flex
    }
  }

  @media (max-width: 620px) {

    .why,
    .stats,
    .speakers,
    .sponsors,
    .footer__grid {
      grid-template-columns: 1fr
    }

    .eyebrow {
      margin: 0 0 8px;
      opacity: .9;
      letter-spacing: .2px;
      color: #AEEBFF;
      font-size: 15px;
    }

    .hero h1 {
      font-size: 40px;
      line-height: 1.05;
      margin: 0
    }

    .qr {
      width: 130px;
      height: 130px
    }

    .hero {
      padding-top: 74px
    }

    .agenda li {
      grid-template-columns: 70px 1fr
    }
  }

  .ejes {
    padding: 70px 0;
    background: linear-gradient(180deg, #0C0A1A, #14102A);
  }

  .ejes h2 {
    text-align: center;
    font-size: 28px;
    color: #E9E7FF;
    margin-bottom: 26px;
  }

  .ejes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .eje-icon {
    font-size: 60px;
  }

  .eje-icon svg {
    width: 60px;
    height: 60px;
    stroke-width: 1.6;
  }

  .eje-card {
    background: linear-gradient(180deg, rgba(123, 44, 248, .12), rgba(12, 10, 26, .45));
    border: 1px solid rgba(174, 235, 255, .12);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
  }

  .eje-card h3 {
    font-size: 18px;
    color: #E9E7FF;
    margin-bottom: 6px;
  }

  .eje-card h5 {
    font-size: 20px;
    margin: 5px 0;
  }

  .eje-card p {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.5;

  }

  .eje-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
  }

  @media (max-width: 980px) {
    .ejes-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 620px) {
    .ejes-grid {
      grid-template-columns: 1fr;
    }
  }





  #precios {
    padding: 80px 0;
    background-color: #0c0a1a;
    text-align: center;
  }



  /* 🔹 GRID PRINCIPAL */
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* 🔸 TARJETAS */
  .price-card.is-multi-price {
    background-color: #1A1238;
    border-radius: 12px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 0 0 1px rgba(123, 44, 248, 0.2), 0 10px 40px rgba(123, 44, 248, 0.3);
    border-top: 6px solid transparent;
    border-image: linear-gradient(90deg, var(--teal), var(--accent), var(--magenta));
    border-image-slice: 1;
  }

  .price-card.is-multi-price:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 1px rgba(123, 44, 248, 0.3), 0 20px 50px rgba(123, 44, 248, 0.4);
  }

  /* CABECERA */
  .price-card__header {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .plan-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--teal);
    margin-top: 5px;
  }

  .badge-accent {
    display: inline-block;
    background: linear-gradient(90deg, var(--accent), var(--magenta));
    color: white;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
  }

  /* LISTA DE PRECIOS */
  .price-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .price-item:last-child {
    border-bottom: none;
  }

  .price-item__label {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
  }

  .price-item__price {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
  }

  .price-item.is-featured .price-item__price {
    color: var(--teal);
  }

  .price-item.is-student {
    background: rgba(121, 224, 255, 0.05);
    padding: 15px 10px;
    margin: 0 -10px;
    border-radius: 4px;
  }

  .price-item.is-student .price-item__label {
    color: var(--teal);
    font-weight: 700;
  }

  /* BENEFICIOS */
  .plan-features {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .plan-features ul {
    list-style: none;
    padding: 0;
  }

  .plan-features li {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 15px;
  }

  .plan-features li .icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--teal);
    color: #1A1238;
    position: relative;
    flex-shrink: 0;
  }

  .plan-features li .icon.check::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 800;
  }

  /* BOTÓN */
  .btn.btn-full {
    display: block;
    margin-top: 25px;
    background: var(--bg-3);
    color: #ffffff;
    padding: 12px 0;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
    border: none;
    box-shadow: none;
    outline: none;
  }

  .btn.btn-full:hover {
    background: linear-gradient(90deg, var(--accent), var(--magenta));
  }

  /* RESPONSIVE */
  @media (max-width: 600px) {
    .price-item__label {
      font-size: 16px;
    }

    .price-item__price {
      font-size: 20px;
    }
  }



  /* === ESTILOS PARA LA SECCIÓN BROCHURE === */

  .brochure-container {
    /* Fondo sutil para enmarcar el PDF, usando los colores de acento */
    background: var(--bg-1);
    border: 1px solid var(--magenta);
    border-radius: var(--radius);
    padding: 10px;
    /* Una sombra que concuerda con el tema oscuro */
    box-shadow: 0 0 40px rgba(173, 46, 245, 0.2);
    overflow: hidden;
    max-width: 1000px;
    /* Limita el ancho del visor para mejor lectura */
    margin: 0 auto;
  }

  .brochure-container iframe {
    /* Asegura que el iframe ocupe todo el espacio del contenedor con los 700px de altura */
    display: block;
    border-radius: calc(var(--radius) - 5px);
    /* Borde redondeado dentro del marco */
  }

  /* === AJUSTES PARA DISPOSITIVOS MÓVILES === */
  @media (max-width: 768px) {
    .brochure-container {
      display: flex;
      /* Activa el modelo flexible */
      justify-content: center;
      /* Centra el contenido horizontalmente */
      align-items: center;
      /* Centra verticalmente si hay espacio adicional */
      flex-direction: column;
      /* Asegura que el contenido se apile verticalmente */

      padding: 5px;
      max-width: 100%;
      margin: 0 auto;
      /* Centrado horizontal general */
      border-left: none;
      border-right: none;
      border-radius: 0;
      box-sizing: border-box;
      /* Asegura que el padding no rompa el ancho */
    }

    .brochure-container iframe {
      height: 500px !important;
      /* Ajuste de altura en móviles */
      width: 95%;
      /* Deja un pequeño margen lateral para no tocar los bordes */
      display: block;
      /* Asegura que el iframe se comporte como bloque */
      margin: 0 auto;
      /* Centrado horizontal adicional por seguridad */
      border-radius: calc(var(--radius) - 4px);
    }
  }

  /* 1. LIMPIEZA INICIAL: Asegura que solo las secciones deseadas tengan fondo */
  section:not(#resumen):not(#faq):not(#speakers):not(.section-sponsors)::before,
  section:not(#resumen):not(#faq):not(#speakers):not(.section-sponsors)::after {
    content: none !important;
    background-image: none !important;
    animation: none !important;
    filter: none !important;
    position: static !important;
  }

  /* === ESTILOS BASE PARA TODAS LAS SECCIONES CON FONDOS === */

  /* SELECTOR CLAVE: Solo aplica a las secciones deseadas */
  section#resumen,
  section#faq,
  section#speakers,
  section.section-sponsors {
    position: relative;
    overflow: hidden;
  }

  section#resumen .container,
  section#faq .container,
  section#speakers .container,
  section.section-sponsors .container {
    position: relative;
    z-index: 1;
    /* Asegura que el contenido quede encima de los fondos */
  }

  /* === ESTILOS BASE PARA TODAS LAS SECCIONES CON FONDOS === */

  /* SELECTOR CLAVE: Solo aplica a las tres secciones deseadas */
  section#resumen,
  section#speakers,
  section.section-sponsors {
    position: relative;
    overflow: hidden;
  }

  section#resumen .container,
  section#speakers .container,
  section.section-sponsors .container {
    position: relative;
    z-index: 1;
    /* Asegura que el contenido quede encima de los fondos */
  }

  /* 2. Definición de la Animación de Flotar (Movimiento Aumentado) */
  @keyframes subtleFloat {
    0% {
      transform: translate(0, 0) scale(1);
    }

    50% {
      transform: translate(30px, 20px) scale(1.02);
    }

    100% {
      transform: translate(0, 0) scale(1);
    }
  }

  /* --------------------------------------------------------------------- */
  /* --- A. ALTA DENSIDAD (32 ÍCONOS) PARA #speakers Y .section-sponsors (DESORDEN HORIZONTAL) --- */
  /* --------------------------------------------------------------------- */

  /* ÍCONOS 1 A 4: Usando ::after (8 Íconos simulados en esta capa) */
  section#speakers::after,
  section.section-sponsors::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Repetimos los primeros 4 íconos para simular 8 en este bloque (mayor densidad) */
    background-image:
      url('img/valores/v1.png'), url('img/valores/v2.png'), url('img/valores/v3.png'), url('img/valores/v4.png'),
      url('img/valores/v1.png'), url('img/valores/v2.png'), url('img/valores/v3.png'), url('img/valores/v4.png');

    background-size: 80px 80px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

    /* 8 Posiciones: Eje X con mayor variación lateral (5%-20% y 80%-95%) */
    background-position:
      5% 5%,
      /* Izquierda (v1) - Top */
      92% 15%,
      /* Derecha (v2) */
      6% 28%,
      /* Izquierda (v3) */
      94% 40%,
      /* Derecha (v4) */

      10% 53%,
      /* Izquierda (v1 repetido) */
      94% 65%,
      /* Derecha (v2 repetido) */
      5% 78%,
      /* Izquierda (v3 repetido) */
      90% 90%;
    /* Derecha (v4 repetido) - Bottom */

    filter: opacity(0.12);
    z-index: 0;
    pointer-events: none;
    animation: subtleFloat 25s infinite ease-in-out;
  }


  /* ÍCONOS 5 A 8: Usando ::before (8 Íconos simulados en esta capa) */
  section#speakers::before,
  section.section-sponsors::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Repetimos los últimos 4 íconos para simular 8 en este bloque (mayor densidad) */
    background-image:
      url('img/valores/v5.png'), url('img/valores/v6.png'), url('img/valores/v7.png'), url('img/valores/v8.png'),
      url('img/valores/v5.png'), url('img/valores/v6.png'), url('img/valores/v7.png'), url('img/valores/v8.png');

    background-size: 80px 80px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

    /* 8 Posiciones: Eje X con mayor variación lateral (5%-20% y 80%-95%), Eje Y Fino */
    background-position:
      90% 5%,
      /* Derecha (v5) - Top */
      12% 15%,
      /* Izquierda (v6) */
      92% 28%,
      /* Derecha (v7) */
      7% 40%,
      /* Izquierda (v8) */

      90% 53%,
      /* Derecha (v5 repetido) */
      8% 65%,
      /* Izquierda (v6 repetido) */
      95% 78%,
      /* Derecha (v7 repetido) */
      9% 90%;
    /* Izquierda (v8 repetido) - Bottom */

    filter: opacity(0.12);
    z-index: 0;
    pointer-events: none;
    animation: subtleFloat 22s infinite ease-in-out;
  }

  /* --------------------------------------------------------------------- */
  /* --- B. BAJA DENSIDAD (8 ÍCONOS) PARA #resumen Y #faq --- */
  /* --------------------------------------------------------------------- */

  /* ÍCONOS 1 A 8: Usando ::after (8 Íconos, NO DUPLICADOS) */
  section#resumen::after,
  section#faq::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* CORRECTO: Los 8 íconos originales, NO DUPLICADOS */
    background-image:
      url('img/valores/v1.png'), url('img/valores/v2.png'), url('img/valores/v3.png'), url('img/valores/v4.png'),
      url('img/valores/v5.png'), url('img/valores/v6.png'), url('img/valores/v7.png'), url('img/valores/v8.png');

    background-size: 80px 80px;

    /* 8 Repeticiones (no-repeat) */
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

    /* 8 Posiciones: Ahora mejor dispersas cubriendo todo el área */
    background-position:
      10% 10%,
      /* Top-Left */
      90% 90%,
      /* Bottom-Right */
      50% 5%,
      /* Center-Top */
      15% 75%,
      /* Left-Bottom */
      85% 25%,
      /* Right-Top */
      5% 50%,
      /* Left-Center */
      50% 95%,
      /* Center-Bottom */
      95% 50%;
    /* Right-Center */

    filter: opacity(0.12);
    z-index: 0;
    pointer-events: none;
    animation: subtleFloat 25s infinite ease-in-out;
  }

  /* ÍCONOS 9+: Aseguramos que ::before NO MUESTRE NADA para #resumen y #faq */
  section#resumen::before,
  section#faq::before {
    content: none !important;
    background-image: none !important;
    animation: none !important;
  }


  /* =============================== */
/* SPONSORS STYLES (CON TEXTO) */
/* =============================== */

/* Tarjeta individual del Sponsor (Ajustada para que el texto quede abajo) */
.sponsor {
    /* Mantiene los estilos de tarjeta */
    background: linear-gradient(180deg, rgba(90, 31, 174, .18), rgba(12, 10, 26, .55));
    border: 1px solid rgba(174, 235, 255, .12);
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column; /* Coloca los elementos verticalmente */
    justify-content: flex-start; /* Alinea el contenido al inicio (arriba) */
    align-items: center;
    min-height: 200px; /* Incrementamos la altura para acomodar el texto */
    width: 100%;
}

/* Botón que envuelve SOLO el logo (para hacerlo clicable y agregar efectos) */
.sponsor__btn {
    all: unset;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Limita la altura para el área clicable del logo */
    min-height: 80px; 
    transition: transform 0.2s;
    margin-bottom: 10px; /* Espacio entre el logo y el texto */
}

/* Efecto hover/focus solo en el botón (logo) */
.sponsor__btn:hover,
.sponsor__btn:focus {
    transform: scale(1.05); /* Zoom sutil en el logo */
}

/* Estilo del logo del sponsor */
.sponsor__logo {
    max-width: 100%;
    height: auto;
    max-height: 70px; /* Limita la altura del logo */
    object-fit: contain;
}

/* Efecto en el logo al pasar el mouse */


/* Estilos para el texto */
.sponsor__name {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 4px;
    color: var(--white);
    margin-top: 1rem;
}

.sponsor__category {
    font-size: 18px;
    font-weight: 500;
}

/* ... Mantener el resto de estilos para el modal y las grillas ... */


/* =============================== */
/* AJUSTES PARA LOGO DENTRO DEL MODAL DE SPEAKER */
/* =============================== */

/* Para el logo del patrocinador dentro del modal. */
.sponsor-logo-modal-fit {
    /* El logo debe ajustarse al contenedor sin ser cortado */
    object-fit: contain; 
    
    /* Le damos un tamaño máximo para que no parezca desproporcionado */
    max-height: 180px; 
    max-width: 100%;
    
    /* Remueve cualquier filtro de opacidad o escala de grises que pudiera tener el botón */
    filter: none !important; 
    
    /* Fondo que ayuda a que resalten los logos blancos o transparentes */
    background: rgba(0, 0, 0, 0.1); 
    padding: 10px;
    border-radius: 8px;
}

/* Ajuste opcional para centrar verticalmente el logo dentro del wrapper del speaker */
.speaker__modal__img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===================================
   ESCALONADO DE TAMAÑOS - MODAL SPONSORS
   =================================== */

.speaker__modal__name {
  font-size: 20px;
  font-weight: 700;
}

.speaker__modal__title {
  font-size: 18px;
  font-weight: 600;
}

.speaker__modal__text p {
  font-size: 16px;
  line-height: 1.6;
}

.speaker__modal__text a,
.speaker__modal__text .btn {
  font-size: 14px;
}



/* ========================================
   CATEGORÍAS DE SPONSORS CON CINTAS DECORATIVAS
   ======================================== */

.sponsor-tier {
    margin-bottom: 48px;
}

.sponsor-tier__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 40px 0 32px;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.sponsor-tier__line {
    flex: 1;
    height: 3px;
    max-width: 150px;
    border-radius: 2px;
}

.sponsor-tier__text {
    padding: 0 10px;
}

/* ===== COLORES POR CATEGORÍA ===== */

/* BLACK - Negro con brillo plateado */
.sponsor-tier__title[data-category="Black"] {
    color: #c0c0c0;
}

.sponsor-tier__title[data-category="Black"] .sponsor-tier__line {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 20%, 
        rgba(255, 255, 255, 1) 50%, 
        rgba(255, 255, 255, 0.3) 80%, 
        transparent 100%);
    box-shadow: 
        0 0 25px rgba(255, 255, 255, 1),
        0 0 40px rgba(255, 255, 255, 0.6);
}


/* GOLD - Oro brillante */
.sponsor-tier__title[data-category="Gold"] {
    color: #FFD700;
}

.sponsor-tier__title[data-category="Gold"] .sponsor-tier__line {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #DAA520 20%, 
        #FFD700 50%, 
        #DAA520 80%, 
        transparent 100%);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

/* BRONZE - Bronce metálico */
.sponsor-tier__title[data-category="Bronce"] {
    color: #CD7F32;
}

.sponsor-tier__title[data-category="Bronce"] .sponsor-tier__line {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #B87333 20%, 
        #CD7F32 50%, 
        #B87333 80%, 
        transparent 100%);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.7);
}

/* INSTITUCIONAL - Azul corporativo */
.sponsor-tier__title[data-category="Institucional"] {
    color: var(--teal);
}

.sponsor-tier__title[data-category="Institucional"] .sponsor-tier__line {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #4DB8E8 20%, 
        var(--teal) 50%, 
        #4DB8E8 80%, 
        transparent 100%);
    box-shadow: 0 0 15px rgba(121, 224, 255, 0.7);
}

/* ALIADO - Púrpura de marca */
.sponsor-tier__title[data-category="Aliado"] {
    color: var(--magenta);
}

.sponsor-tier__title[data-category="Aliado"] .sponsor-tier__line {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #9626D9 20%, 
        var(--magenta) 50%, 
        #9626D9 80%, 
        transparent 100%);
    box-shadow: 0 0 15px rgba(173, 46, 245, 0.7);
}


/* Responsive */
@media (max-width: 768px) {
    .sponsor-tier__title {
        font-size: 22px;
        gap: 15px;
    }

    .sponsor-tier__line {
        max-width: 80px;
        height: 2px;
    }
}

@media (max-width: 480px) {
    .sponsor-tier__title {
        font-size: 18px;
        gap: 10px;
    }

    .sponsor-tier__line {
        max-width: 50px;
    }
}


/* ===================================
   MODAL PROGRAMA - DISEÑO PREMIUM
   =================================== */

/* Backdrop con efecto blur mejorado */
#modalPrograma::backdrop {
  background: rgba(12, 10, 26, 0.92);
  backdrop-filter: blur(12px) saturate(1.3);
  animation: fadeInBackdrop 0.4s ease-out;
}

@keyframes fadeInBackdrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animación de entrada del modal */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Contenedor principal del modal */
.modal__card--programa {
  max-width: 950px;
  width: 92vw;
  max-height: 92vh;
  overflow-y: auto;
  padding: 35px;
  background: linear-gradient(135deg, #1A1238 0%, #2B0E4E 50%, #14102A 100%);
  border: 2px solid rgba(174, 235, 255, 0.25);
  border-radius: 24px;
  box-shadow: 
    0 30px 80px rgba(123, 44, 248, 0.5),
    0 0 0 1px rgba(174, 235, 255, 0.15) inset,
    0 0 120px rgba(173, 46, 245, 0.3);
  animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

/* Efecto de brillo sutil en el fondo */
.modal__card--programa::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(121, 224, 255, 0.08) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
}

/* Contenido sobre el efecto de fondo */
.modal__card--programa > * {
  position: relative;
  z-index: 1;
}

/* Botón cerrar mejorado */
#modalProgramaClose {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #5A1FAE 0%, #7B2CF8 100%);
  border: 2px solid rgba(174, 235, 255, 0.3);
  color: #fff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(123, 44, 248, 0.4);
  z-index: 10;
}

#modalProgramaClose:hover {
  background: linear-gradient(135deg, #7B2CF8 0%, #AD2EF5 100%);
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 12px 30px rgba(173, 46, 245, 0.6);
}

/* Título del modal */
.modal__card--programa h2 {
  text-align: center;
  margin-bottom: 28px;
  margin-top: 8px;
  color: #AEEBFF;
  font-size: 32px;
  font-weight: 800;
  text-shadow: 0 0 30px rgba(121, 224, 255, 0.5);
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #79E0FF, #AEEBFF, #79E0FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Galería de imágenes con efecto de tarjetas */
.programa-gallery {
  display: grid;
  gap: 26px;
  margin: 15px 0;
  padding: 0 10px;
}

/* Cada imagen como tarjeta premium */
.programa-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(174, 235, 255, 0.2) inset;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 2px solid rgba(174, 235, 255, 0.15);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Efecto de brillo en hover */
.programa-img::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(121, 224, 255, 0.2) 50%,
    transparent 100%
  );
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

.programa-img:hover::before {
  opacity: 1;
  left: 100%;
}

.programa-img:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 
    0 20px 50px rgba(123, 44, 248, 0.6),
    0 0 0 2px rgba(174, 235, 255, 0.4) inset,
    0 0 40px rgba(121, 224, 255, 0.3);
  border-color: rgba(121, 224, 255, 0.5);
}

/* Texto inferior del modal */
.modal__card--programa > p {
  text-align: center;
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
  padding: 12px;
  background: rgba(174, 235, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(174, 235, 255, 0.1);
}

/* Scrollbar personalizada para el modal */
.modal__card--programa::-webkit-scrollbar {
  width: 10px;
}

.modal__card--programa::-webkit-scrollbar-track {
  background: rgba(12, 10, 26, 0.3);
  border-radius: 10px;
}

.modal__card--programa::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7B2CF8, #AD2EF5);
  border-radius: 10px;
  border: 2px solid rgba(174, 235, 255, 0.2);
}

.modal__card--programa::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #AD2EF5, #79E0FF);
}

/* ===================================
   RESPONSIVE - MÓVILES
   =================================== */

@media (max-width: 768px) {
  .modal__card--programa {
    width: 95vw;
    padding: 25px 20px;
    max-height: 95vh;
  }
  
  .modal__card--programa h2 {
    font-size: 26px;
    margin-bottom: 20px;
  }
  
  .programa-gallery {
    gap: 18px;
    padding: 0 5px;
  }
  
  #modalProgramaClose {
    width: 38px;
    height: 38px;
    top: 15px;
    right: 15px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .modal__card--programa {
    padding: 20px 15px;
  }
  
  .modal__card--programa h2 {
    font-size: 22px;
  }
  
  .programa-gallery {
    gap: 15px;
  }
  
  .programa-img:hover {
    transform: translateY(-4px) scale(1.02);
  }
}

.modal__card--programa {
  max-width: 950px;
  width: 92vw;
  max-height: 85vh;
  overflow-y: scroll; /* Siempre muestra la barra */
  scrollbar-gutter: stable; /* Reserva espacio para el scrollbar */
  padding: 35px;
  background: linear-gradient(135deg, #1A1238 0%, #2B0E4E 50%, #14102A 100%);
  border: 2px solid rgba(174, 235, 255, 0.25);
  border-radius: 24px;
  box-shadow: 
    0 30px 80px rgba(123, 44, 248, 0.5),
    0 0 0 1px rgba(174, 235, 255, 0.15) inset,
    0 0 120px rgba(173, 46, 245, 0.3);
  animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}