:root{
  --rojo:#C90037;
  --rojo-osc:#AA0031;
  --rojo-claro:#fce4ec;
  --tinta:#2b2b2b;
  --gris:#6b7280;
  --borde:#d9dde3;
  --bg:#f4f5f7;
  --ok:#0f9d58;
  --radio:14px;
  --sombra:0 10px 30px rgba(20,20,40,.08);
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--tinta);line-height:1.45;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}

.page{max-width:1100px;margin:0 auto;background:#fff;box-shadow:var(--sombra);min-height:100vh}
.banner img{width:100%}
.banner--top img{border-bottom:4px solid var(--rojo)}

/* ---------- Formulario ---------- */
.form-wrap{padding:34px 18px 12px}
.card{max-width:640px;margin:0 auto}
.card__title{font-size:26px;font-weight:900;text-align:center;margin:0 0 6px;color:var(--tinta);letter-spacing:-.3px}
.card__title span{color:var(--rojo)}
.card__sub{text-align:center;color:var(--gris);margin:0 0 26px;font-size:15px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px}
.field{position:relative}
.field--full{grid-column:1 / -1}

.field input,.field select{
  width:100%;padding:16px 14px 7px;font-size:15px;font-family:inherit;color:var(--tinta);
  background:#fff;border:1.5px solid var(--borde);border-radius:10px;outline:none;transition:border-color .15s, box-shadow .15s;
  appearance:none;-webkit-appearance:none;
}
.field select{padding-top:15px;padding-bottom:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field input:focus,.field select:focus{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(201,0,55,.12)}

/* etiqueta flotante (solo inputs) */
.field label{position:absolute;left:14px;top:14px;color:var(--gris);font-size:15px;pointer-events:none;transition:.15s;background:transparent}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{top:6px;font-size:11px;color:var(--rojo);font-weight:500}

.field--code input{font-weight:700;letter-spacing:3px;font-size:20px;text-align:center}
.field--code label{font-weight:500}

.consents{margin:22px 0 6px;display:flex;flex-direction:column;gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:#4b5563;cursor:pointer}
.check input{margin-top:2px;width:17px;height:17px;accent-color:var(--rojo);flex:0 0 auto}
.check a{color:var(--rojo);font-weight:700;text-decoration:underline;text-underline-offset:2px}

.alerta{margin:16px 0 0;padding:13px 15px;border-radius:10px;font-size:14px;font-weight:500;display:flex;gap:9px;align-items:flex-start}
.alerta--error{background:#fdecef;color:#9b0026;border:1px solid #f4c4cf}
.alerta--info{background:#eef4ff;color:#1d4ed8;border:1px solid #c9dbff}

.btn{display:inline-block;border:none;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:700;text-decoration:none;text-align:center}
.btn--enviar{margin:22px auto 6px;display:block;width:200px;padding:15px 20px;font-size:17px;color:#fff;
  background:linear-gradient(180deg,var(--rojo),var(--rojo-osc));box-shadow:0 8px 18px rgba(201,0,55,.32);transition:transform .08s, box-shadow .2s, opacity .2s}
.btn--enviar:hover{box-shadow:0 10px 22px rgba(201,0,55,.42)}
.btn--enviar:active{transform:translateY(1px)}
.btn--enviar[disabled]{opacity:.6;cursor:progress}

.form-wrap .pie{max-width:640px;margin:8px auto 0;text-align:center;color:#9aa0a8;font-size:12px;padding-bottom:6px}

@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .card__title{font-size:22px}
  .form-wrap{padding:22px 14px 6px}
}

/* ---------- Página de premio ---------- */
.premio{max-width:1100px;margin:0 auto;background:#fff;box-shadow:var(--sombra);min-height:100vh;display:flex;flex-direction:column}
.premio__hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:46px 22px;
  background:radial-gradient(1200px 400px at 50% -10%, #fff0f4, #fff)}
.premio__logo{width:120px;margin-bottom:18px}
.premio__kicker{color:var(--gris);font-size:16px;margin:0 0 6px;font-weight:500}
.premio__nombre{color:var(--rojo);font-weight:900}
.premio__h{font-size:clamp(28px,5vw,46px);font-weight:900;margin:6px 0 18px;line-height:1.1;letter-spacing:-.5px}
.premio__badge{display:inline-block;background:linear-gradient(180deg,var(--rojo),var(--rojo-osc));color:#fff;font-weight:900;
  font-size:clamp(20px,3.4vw,30px);padding:16px 30px;border-radius:16px;box-shadow:0 12px 28px rgba(201,0,55,.34);margin-bottom:8px;max-width:760px}
.premio__cod{color:#9aa0a8;font-size:13px;margin-top:16px;letter-spacing:1px}
.premio__nota{color:var(--gris);max-width:520px;margin:18px auto 0;font-size:15px}
.premio .btn{margin-top:22px;padding:15px 34px;font-size:16px;color:#fff;background:linear-gradient(180deg,var(--rojo),var(--rojo-osc));box-shadow:0 8px 18px rgba(201,0,55,.32)}
.confeti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.confeti i{position:absolute;top:-12px;width:9px;height:14px;opacity:.9;animation:caer linear forwards}
@keyframes caer{to{transform:translateY(105vh) rotate(540deg)}}

/* ---------- Paginas legales temporales ---------- */
.legal{max-width:760px;margin:0 auto;min-height:100vh;background:#fff;padding:42px 22px;color:var(--tinta)}
.legal__logo{width:120px;margin:0 auto 24px}
.legal h1{font-size:30px;text-align:center;margin:0 0 22px;color:var(--rojo);font-weight:900}
.legal p{font-size:16px;color:#4b5563}
.legal .btn{margin-top:18px;padding:12px 26px;color:#fff;background:linear-gradient(180deg,var(--rojo),var(--rojo-osc))}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:20;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.22);overflow:hidden;transition:transform .12s, box-shadow .2s}
.whatsapp-float:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.whatsapp-float__icon{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
@media (max-width:560px){.whatsapp-float{right:14px;bottom:14px;width:56px;height:56px}}