body{
    margin:0;
    padding-top:100px;
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f4f4;
}
header{
    background:#111111;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 80px;
    box-shadow:0 2px 10px rgba(0,0,0,0.3);

    position:fixed;
    top:0;
    left:0;
    width:100%;
    box-sizing:border-box;
    z-index:1000;
}

nav{
    margin-top:15px;
}

nav a{
    color:white;
    text-decoration:none;
    margin:15px;
    font-weight:bold;
}

.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:80px;
    gap:50px;
}
.hero h2{
    font-size:40px;
}

.hero p{
    max-width:700px;
    margin:auto;
    font-size:20px;
}

button{

    margin-top:30px;
    padding:15px 35px;

    background:#000000;
    color:white;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:18px;

}
.hero-image {
    width: 80%;
    max-width: 700px;
    border-radius: 15px;
    margin-bottom: 30px;
}
.logo img{
    height:100px;
}

nav a{
    color:#ffffff;
    text-decoration:none;
    margin-left:25px;
    font-weight:bold;
    transition:0.3s;
}

nav a:hover{
    color:gray;
}
.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.slogan h2{
    color:white;
    margin:0;
    font-size:35px;
    margin-left: 350px;
}

.slogan p{
    color:#d0d0d0;
    margin:0;
    font-size:14px;
    margin-left: 350px;
}.hero-texto{
    flex:1;
}

.hero-texto h2{
    font-size:50px;
    margin-bottom:20px;
    color:#111111;
}

.hero-texto p{
    font-size:20px;
    line-height:1.6;
}

.hero-imagen{
    flex:1;
    text-align:center;
}

.hero-imagen img{
    width:100%;
    max-width:600px;
    border-radius:20px;
}     
.beneficios{

    padding:80px;

    background:#f8f8f8;

    text-align:center;

}

.beneficios h2{

    font-size:40px;

    margin-bottom:50px;

}

.tarjetas{

    display:flex;

    gap:30px;

    justify-content:center;

}
.tarjeta{

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:0 5px 20px rgba(0,0,0,0.08);

    flex:1;

    transition:0.3s;

}
.tarjeta:hover{

    transform:translateY(-10px);

    box-shadow:0 12px 30px rgba(0,0,0,0.15);

}

.tarjeta h3{

    font-size:28px;

}

.tarjeta p{

    font-size:18px;

    line-height:1.5;

}  .rifa{
    padding:80px;
    text-align:center;
}

.rifa-card{
    max-width:700px;
    margin:auto;
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.barra{

width:100%;

height:20px;

background:#ddd;

border-radius:20px;

overflow:hidden;

margin-bottom:30px;

}

#progreso{

height:100%;

width:0%;

background:black;

transition:0.5s;

}

#contador{

margin:20px 0;

}#buscar{

width:100%;

padding:12px;

border:1px solid #ccc;

border-radius:8px;

margin-bottom:20px;

font-size:16px;

}
@media (max-width:768px){

header{

flex-direction:column;

padding:15px;

}

.logo img{

height:60px;

}

nav{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:10px;

margin-top:10px;

}

nav a{

margin:5px;

font-size:14px;

}

}
button:disabled{

opacity:0.6;

cursor:not-allowed;

}
#resultado{
    display:flex;
    justify-content:center;
    margin-top:30px;
}.pago-exitoso{

    width:700px;
    max-width:95%;
    margin:20px auto;
    padding:40px;

    background:#eef8ef;

    border-radius:18px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.numero-ganador{

    font-size:52px;

    font-weight:bold;

    color:#0a7a3d;

    margin:30px 0;

}

.acciones{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:35px;

}

.acciones button{

    background:black;

    color:white;

    border:none;

    padding:18px 35px;

    border-radius:12px;

    font-size:20px;

    cursor:pointer;

}