@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Jua&family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Monomakh&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Honk&family=Limelight&family=Monomakh&family=Shrikhand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&family=Sigmar&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    
}

a {
    text-decoration: none;
}

img{
    width: 100%;
    display: block;
    
}
h2{
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 1rem;
}


.image{
    position: relative;
    margin: auto;
    max-width: 700px;
    border-radius: .5rem;
    overflow: hidden;
}

.image-link{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
}


.register-button{
    box-shadow: 0 0 0 4px #fff;
    color: #eee;
    width: 100%;
    top: 2rem;
    /* border-radius: .5rem; */
    height: 70px;
    background: #833AB4;
background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(167, 29, 253, 1) 50%, rgba(69, 109, 252, 1) 100%);    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
        transform: scale(1);
    animation: boton infinite 1s ease-out;
    font-size: 1rem;
}

@keyframes boton {
    50%{
        filter: contrast(4);
       
    }
    70%{filter: contrast(2);}
}

/* HEADER */


.slogan,
.intro,
.main-title {
    text-align: center;
}



.whatsapp, .ticket{
    margin: auto;
    padding: 1rem 1.5rem;
    display: flex;
    text-transform: uppercase;
    color: #eee;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
}

.ticket {
    background: #541ed3;

}

.whatsapp {
    background: rgb(4, 195, 77);
    text-align: center;
}

.fa-brands {
    font-size: 1.5rem;
    margin: 0 1rem;
}



/* BIENVENIDA */
.intro {
    margin-top: 2rem;
    font-size: 1.2rem;
}

/* TITULO PREMIOS LORENZO */
.main-title {
    font-size: 4rem;
    margin-top: 1rem;
    line-height: .9;
    margin-bottom: 1.5rem;
}

.winners-button{
    background: #541ED3;
    font-weight: bold;
    color: #eee;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    display: block;
    margin: auto;
    max-width: 200px;
    text-align: center;
    margin-bottom: 2rem;
}

/* REDES SOCIALES */

.social-title {
    text-align: center;
    font-size: 1rem;
    width: 100%;
    color: #eee;
}

.redes {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    background: #541ed3;
    ;
    padding: 2rem 0;
    margin-top: 5em;
}

.redes a {
    color: #222;
    font-size: 1.7rem;
    color: #fff;
    margin: 0 .5rem;
    transition-duration: .1s;
}

.social-links {
    width: 100%;
    background: green;
}

.social-links:hover {
    transform: scale(1.3);
}



/* TABLAS */
h1 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 30px;
      margin-top: 2rem;
      padding-top: 2rem;
    }
    table {
      width: 90%;
      max-width: 900px;
      margin: 0 auto;
      border-collapse: collapse;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border-radius: 8px;
      overflow: hidden;
    }
    th, td {
      padding: 12px 15px;
      border-bottom: 1px solid #ddd;
      text-align: left;
    }
    th {
      background-color: #541ED3;
      color: white;
    }
    tbody tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tbody tr:hover {
      background-color: #e0f3ff;
    }

    tr td:nth-child(3){
      font-weight: bold;
    }

    tr td:nth-child(4){
      text-transform: capitalize;
    }
    
    .header .top .whatsapp{
        text-align: center;
    }

@media (width<600px) {
   /* body{background: red;} */
.whatsapp, .ticket{
    font-size: .9rem;
}
.header .top .whatsapp{
        text-align: center;
    }
.main-title {
    font-size: 2rem;
}
}