/*Reinicia los estilos por defecto del navegador*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');


*{
  font-family: "Poppins", sans-serif;
}
html {
    scroll-behavior: smooth;
}

p,label,span,a {
  text-wrap: pretty;
}

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}



#bienvenida {
    position: relative;
    --opacity: 0;
    --x: 50%;
    --y: 50%;
    transition: background-color 0.3s ease-in-out;
}

.bienvenida-overlay {
    position: absolute;
    inset: 0;
    opacity: var(--opacity, 0);
    pointer-events: none;
    -webkit-mask: radial-gradient(25rem 25rem at var(--x) var(--y),
            rgba(0, 0, 0, 0.5) 1%,
            transparent 60%);
    mask: radial-gradient(25rem 25rem at var(--x) var(--y),
            rgba(0, 0, 0, 0.5) 1%,
            transparent 60%);
    background: linear-gradient(135deg,
            rgba(255, 99, 72, 0.6),
            rgba(72, 207, 173, 0.6));
    transition: opacity 0.3s ease, mask 0.4s ease;
    will-change: opacity, mask;
    z-index: 1;
}

#bienvenida:hover .bienvenida-overlay {
    opacity: 1;
    background: linear-gradient(135deg,
            rgba(72, 207, 173, 0.8),
            rgba(255, 255, 255, 0.8),
            rgba(255, 0, 179, 0.8),
            rgba(246, 255, 0, 0.8));
}

.custom-heading {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.custom-paragraph {
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Imagen animada desde arriba */
.animate-image {
    opacity: 0;
    transform: translateY(-50px);
    animation: fadeInUp 1s ease-in-out forwards;
}

/* Título animado desde la izquierda */
.animate-heading {
    opacity: 0;
    transform: translateX(-100px);
    animation: fadeInLeft 1s ease-in-out 0.5s forwards;
}

/* Párrafo animado desde la derecha */
.animate-paragraph {
    opacity: 0;
    transform: translateX(100px);
    animation: fadeInRight 1s ease-in-out 1s forwards;
}

/* Animaciones clave */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


  /* Animación inicial oculta */
  .reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  /* Estado visible al hacer scroll */
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

    /* Scroll de los Sponsors */
    @keyframes scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
    
      .scroll-container {
        position: relative;
        overflow: hidden;
        width: 100%;
        mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
      }
    
      .logos {
        display: flex;
        animation: scroll 10s linear infinite;
      }
    
      .logos img {
        margin-right: 2rem;
        flex-shrink: 0;
      }
    
      .logos-container {
        display: flex;
        width: max-content;
      }
    
      #patrocinadores.reveal {
        opacity: 0;
        transform: translateY(-50px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      }
    
      #patrocinadores.reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
    
      /* Detener la animación cuando se hace hover sobre los logos */
      #logos-contenedor-scroll:hover {
        animation-play-state: paused;
      }
    

      .blink {
        animation: blink 0.5s infinite;
      }
  
      .zoom {
        animation: zoom 0.2s;
        transform: scale(1.1);
      }
  
      @keyframes blink {
        0%, 100% {
          color: #fff;
        }
        50% {
          color: rgba(255, 255, 255, 0);  
        }
      }
  
      @keyframes zoom {
        0%, 100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
      }
      #estadisticas.reveal {
        opacity: 0;
        transform: translateY(-50px); 
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      }
  
      #estadisticas.reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }

    /* corona de oro de las cards */      
    .p-5 {
        background-image: url('data:image/svg+xml;utf8,<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="rgba(250, 183, 73, 0.2)"><path d="M188.28 59.47c-19.086 0-34.56 15.468-34.56 34.56 0 16.077 10.983 29.57 25.843 33.44l-35.344 81.936c15.877 2.885 27.905 16.784 27.905 33.5 0 18.806-15.23 34.063-34.03 34.063-18.802 0-34.032-15.258-34.032-34.064 0-13.37 7.703-24.924 18.906-30.5l-50.814-79.22c8.007-5.82 13.22-15.24 13.22-25.905 0-17.693-14.314-32.06-32-32.06-17.688 0-32.032 14.37-32.032 32.06 0 17.693 14.344 32.032 32.03 32.032.734 0 1.468-.014 2.188-.062l41.907 227h316l41.936-227c.72.048 1.455.063 2.188.063 17.686 0 32.03-14.34 32.03-32.032 0-17.693-14.344-32.06-32.03-32.06-17.687 0-32.03 14.37-32.03 32.06-.002 10.723 5.286 20.187 13.373 26l-50.656 79.532c10.778 5.72 18.126 17.04 18.126 30.094 0 18.806-15.23 34.063-34.03 34.063s-34.032-15.258-34.032-34.064c0-17.11 12.602-31.267 29.03-33.687l-34.75-81.532c15.275-3.577 26.657-17.287 26.657-33.657 0-19.094-15.474-34.56-34.56-34.56-19.09 0-34.564 15.468-34.564 34.56 0 14.798 9.308 27.415 22.375 32.345L268 202.345c14.62 4.52 25.25 18.112 25.25 34.218 0 19.796-16.053 35.843-35.844 35.843-19.79 0-35.812-16.047-35.812-35.844 0-15.158 9.403-28.102 22.687-33.343l-44.124-76.72c13.234-4.845 22.688-17.552 22.688-32.47 0-19.094-15.475-34.56-34.563-34.56zM97.438 384.936c-23.978 3.763-22.86 39.844 4.188 39.844h6.656l.064.345h294.28l.063-.344h7.625c26.034 0 27.88-35.928 4.313-39.842H97.437z"/></svg>');
        background-repeat: no-repeat;
        background-size: 40%;
        background-position: right top;
      }
  
      /* transicion del boton */
      .vote {
        transition: transform 0.3s ease-in-out; 
      }
  
      /* Estilo difuminado de las cards */
      .fade-bottom {
        mask-image: linear-gradient(to top, transparent, rgb(0, 0, 0) 20%);
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
      }
  
      /* Animación inicial oculta solo para las cards */
      .card-reveal {
        transform: translateX(-50px); 
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      }
  
      /* Estado visible al hacer scroll */
      .card-reveal.visible {
        transform: translateX(0);
      }