* {
  box-sizing: border-box;
}

:root {
  --azul: #0057A8;
  --azul-oscuro: #003B73;
  --verde: #56B947;
  --rojo: #D71920;
  --gris: #475569;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  color: #0f172a;
  background:
    radial-gradient(circle at top left, rgba(86, 185, 71, 0.24), transparent 32%),
    radial-gradient(circle at bottom right, rgba(215, 25, 32, 0.16), transparent 35%),
    linear-gradient(135deg, var(--azul-oscuro), var(--azul));
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
}

.card {
  width: min(880px, 100%);
  margin: auto;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 30px;
  padding: 52px 42px;
  text-align: center;
  box-shadow: 0 30px 75px rgba(0, 0, 0, 0.30);
}

.challenge-logo {
  width: min(400px, 70%);
  height: auto;
  display: block;
  margin: 0 auto 28px;
}

.label {
  display: inline-block;
  margin: 0 auto 22px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--verde);
  color: white;
  font-size: 19px;
  font-weight: bold;
}

.description {
  max-width: 670px;
  margin: 0 auto 34px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--gris);
}

.button {
  display: inline-block;
  background: var(--verde);
  color: white;
  text-decoration: none;
  font-size: 21px;
  font-weight: bold;
  padding: 17px 46px;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(86, 185, 71, 0.34);
  transition: transform 0.15s ease, background 0.15s ease;
}

.button:hover {
  background: #449b38;
  transform: translateY(-2px);
}

.small-note {
  margin: 24px 0 0;
  color: #64748b;
  font-size: 15px;
}

footer {
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  margin-top: 28px;
  line-height: 1.6;
}

@media (max-width: 650px) {
  .page {
    padding: 16px;
  }

  .card {
    padding: 36px 22px;
    border-radius: 22px;
  }

  .challenge-logo {
    width: 100%;
    margin-bottom: 22px;
  }

  .label {
    font-size: 16px;
  }

  .description {
    font-size: 17px;
  }

  .button {
    width: 100%;
    font-size: 18px;
  }
}
/* ==========================
   CENTRO DE AYUDA
========================== */

.support{
    margin-top:55px;
    padding-top:35px;
    border-top:1px solid #e5e7eb;
}

.support h2{
    color:#0057A8;
    margin-bottom:15px;
    font-size:30px;
}

.support p{
    color:#555;
    line-height:1.7;
    font-size:18px;
}

.support-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin:25px 0;
}

.support-list span{
    background:#eef6ff;
    padding:10px 18px;
    border-radius:30px;
    font-size:15px;
    font-weight:600;
}

.whatsapp-button{
    display:inline-block;
    margin-top:15px;
    padding:18px 36px;
    background:#25D366;
    color:white;
    text-decoration:none;
    border-radius:12px;
    font-size:20px;
    font-weight:bold;
    transition:all .25s ease;
}

.whatsapp-button:hover{
    background:#1EBE5D;
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(37,211,102,.35);
}
/* ==========================
   PATROCINADOR
========================== */

.sponsor{
    margin:15px 0 20px;
    text-align:center;
}

.sponsor span{
    display:block;
    font-size:15px;
    color:#666;
    margin-bottom:10px;
    font-weight:600;
}

.sponsor-logo{
    max-width:120px;
    width:40%;
    height:auto;
    display:block;
    margin:0 auto;
}