/* ═══════════════════════════════════════════════════
   FONTANAR MONUMENTAL — Trivia Mundial 2026
   Réplica fiel del mockup (diseño mobile 390px)
   Paleta: rojo · dorado · azul
   ═══════════════════════════════════════════════════ */

@font-face{font-family:'Rhodium Libre';src:url('../assets/fonts/RhodiumLibre-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('../assets/fonts/DMSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('../assets/fonts/DMSans-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('../assets/fonts/DMSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('../assets/fonts/DMSans-Black.ttf') format('truetype');font-weight:900;font-display:swap;}

:root{
  --rojo:#9c0d14;
  --rojo-deep:#5e0608;
  --gold:#efa01c;
  --gold-bright:#ffc23e;
  --gold-deep:#b87c10;
  --azul:#23316e;
  --azul-deep:#172250;
  --blanco:#FFFFFF;
  --display:'Rhodium Libre', Georgia, serif;
  --body:'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);font-weight:500;color:var(--blanco);
  background:radial-gradient(120% 80% at 50% 0%, #18234d 0%, #0c1230 45%, #070b1a 100%);
  background-attachment:fixed;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100vh;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* Columna central (mobile-first, centrada en PC) */
.page{
  position:relative;
  width:100%;
  max-width:480px;
  margin:0 auto;
  background:#0a1024;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 30px 90px rgba(0,0,0,.55);
}

/* ═══════════════════════════════════════════════════
   SECCIÓN 1 — HERO (foto pareja + estadio)
   ═══════════════════════════════════════════════════ */
.hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(8,12,30,.86) 0%, rgba(8,12,30,.45) 22%, rgba(8,12,30,.05) 40%, rgba(8,12,30,0) 55%),
    url('../assets/img/imgheater.png') 22% bottom / cover no-repeat,
    #0a1024;
  padding:20px 24px 150px;
  text-align:center;
}

.hero-logo{display:block;height:30px;width:auto;margin:0 auto 28px;}

.bienvenida{
  font-family:var(--body);font-weight:900;
  font-size:1.62rem;letter-spacing:.2px;
  color:var(--blanco);text-transform:uppercase;line-height:1;
  margin-bottom:8px;
}
.monumental-tx{
  width:88%;max-width:330px;height:auto;
  margin:0 auto 0;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.5));
}

/* Bloque derecho: pitch + bono + botón */
.hero-pitch-block{
  margin-top:88px;
  margin-left:auto;
  width:60%;
  min-width:215px;
  text-align:center;
}
.hero-pitch{
  font-family:var(--display);font-weight:400;
  font-size:1.18rem;color:var(--gold);
  line-height:1.12;text-transform:uppercase;
  margin-bottom:14px;
}
.hero-bono{
  font-family:var(--body);font-weight:600;font-size:.82rem;
  color:var(--blanco);line-height:1.32;margin-bottom:16px;
}
.hero-bono b{font-family:var(--body);font-weight:900;text-transform:uppercase;display:block;}

.btn-jugar-hero{
  display:inline-block;background:transparent;color:var(--blanco);
  font-family:var(--body);font-weight:700;font-size:.92rem;letter-spacing:.5px;
  padding:12px 30px;border:2px solid var(--gold);border-radius:999px;
  cursor:pointer;transition:background .15s ease, transform .12s ease;
}
.btn-jugar-hero:hover{background:rgba(239,160,28,.16);transform:translateY(-1px);}
.btn-jugar-hero:active{transform:translateY(1px);}

/* ═══════════════════════════════════════════════════
   ESCUDO FONTANAR (sobre la unión hero/azul)
   ═══════════════════════════════════════════════════ */
.escudo-wrap{
  position:absolute;left:50%;bottom:-92px;transform:translateX(-50%);
  z-index:5;width:188px;
}
.escudo-wrap img{width:100%;height:auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55));}

/* ═══════════════════════════════════════════════════
   SECCIÓN AZUL — ESTRATEGIA + DEMUESTRA
   ═══════════════════════════════════════════════════ */
.azul{
  position:relative;z-index:2;
  margin-top:-112px;
  background:url('../assets/img/fondo_azul.jpg') center top / cover no-repeat, var(--azul);
  /* La tela azul cruza en diagonal sobre el hero: más alta a la DERECHA (deja ver la pareja arriba-izquierda) */
  clip-path:polygon(0 84px, 100% 0, 100% 100%, 0 100%);
  padding:200px 26px 0;
  text-align:center;
}

.h-estrategia{
  font-family:var(--display);font-weight:400;
  font-size:1.6rem;color:var(--gold);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:30px;
}

.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.paso{text-align:center;}
.paso-label{
  font-family:var(--body);font-weight:900;font-size:.92rem;
  color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;
  margin-bottom:8px;
}
.paso-star{position:relative;width:62px;height:62px;margin:0 auto 16px;}
.paso-star img{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));}
.paso-star .num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:400;font-size:1.5rem;
  color:var(--rojo);padding-top:2px;
}
.paso-txt{font-family:var(--body);font-weight:600;font-size:.82rem;color:var(--blanco);line-height:1.35;}

/* Separador estrellas + logo */
.estrellas-sep{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:34px 0 26px;color:var(--blanco);font-size:.9rem;
}
.estrellas-sep img{width:240px;max-width:72%;height:auto;}

/* DEMUESTRA TU TALENTO */
.h-demuestra{
  font-family:var(--display);font-weight:400;
  font-size:1.85rem;color:var(--gold);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:18px;
}
.sub-demuestra{
  font-family:var(--body);font-weight:700;font-size:.92rem;
  color:var(--blanco);max-width:30ch;margin:0 auto 26px;line-height:1.3;
}

.marcador{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:10px;max-width:340px;margin:0 auto 8px;
}
.marcador .cell{
  border:2.5px solid var(--gold);border-radius:18px;
  padding:14px 6px;color:var(--gold-bright);
  font-family:var(--display);font-weight:400;font-size:2.5rem;line-height:1;
  background:rgba(0,0,0,.06);
  text-align:center;
  width:100%;
  outline:none;
  -webkit-appearance:none;
  -moz-appearance:textfield;
  appearance:textfield;
  transition:border-color .15s, background .15s;
}
.marcador input.cell::-webkit-outer-spin-button,
.marcador input.cell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.marcador input.cell:focus{
  border-color:var(--gold-bright);
  background:rgba(0,0,0,.18);
  box-shadow:0 0 0 3px rgba(239,160,28,.25);
}
.marcador input.cell::placeholder{color:rgba(255,255,255,.35);}
.marcador .dash{font-family:var(--display);color:var(--gold);font-size:1.8rem;line-height:1;}
.equipos{
  display:grid;grid-template-columns:1fr auto 1fr;gap:10px;
  max-width:340px;margin:0 auto;
  font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:1.5px;
  color:var(--blanco);text-transform:uppercase;
}

/* Espacio inferior azul para acomodar al hincha y la diagonal */
.azul-pie{height:330px;}

/* Foto del hincha: queda DETRÁS de la tela roja (sobre el azul). El rojo
   cubre su parte baja y el degradado de la base. Posición vertical: landing.js */
.hincha{
  position:absolute;z-index:3;
  left:18%;top:0;
  width:42%;max-width:198px;height:auto;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════
   SECCIÓN ROJA — TU PASE + FORM + FOOTER (diagonal)
   ═══════════════════════════════════════════════════ */
.rojo{
  position:relative;z-index:4;
  margin-top:-300px;
  padding:150px 26px 0;
  background:url('../assets/img/fondo_rojo.jpg') center top / cover no-repeat, var(--rojo);
  clip-path:polygon(0 230px, 100% 0, 100% 100%, 0 100%);
}

.pase-head{
  width:62%;min-width:210px;margin-left:auto;text-align:center;
  margin-bottom:30px;
}
.h-pase{
  font-family:var(--display);font-weight:400;
  font-size:1.62rem;color:var(--gold);
  text-transform:uppercase;line-height:1.08;margin-bottom:14px;
}
.pase-txt{font-family:var(--body);font-weight:700;font-size:.86rem;color:var(--blanco);line-height:1.32;margin-bottom:16px;}
.btn-factura{
  display:inline-block;background:var(--gold);color:var(--azul-deep);
  font-family:var(--body);font-weight:800;font-size:.78rem;letter-spacing:.5px;
  text-transform:uppercase;padding:11px 22px;border:none;border-radius:999px;cursor:pointer;
  box-shadow:0 4px 0 var(--gold-deep);transition:transform .12s;
}
.btn-factura:hover{transform:translateY(-2px);}
.btn-factura:active{transform:translatey(2px);box-shadow:0 1px 0 var(--gold-deep);}

#factura-preview{margin-top:14px;text-align:center;}
#factura-preview .factura-thumb{
  max-width:200px;max-height:200px;
  margin:0 auto;display:block;
  border-radius:14px;border:2px solid var(--gold);
  box-shadow:0 8px 18px rgba(0,0,0,.4);
}
#factura-preview .factura-pdf{
  display:inline-block;background:rgba(0,0,0,.2);
  padding:10px 18px;border-radius:999px;
  border:2px solid var(--gold);color:var(--blanco);
  font-weight:700;font-size:.82rem;
}

.trivia-estado{margin-top:18px;text-align:center;}
.trivia-estado .mensaje{margin:0 auto;max-width:34ch;}

/* Formulario */
.form-fontanar{max-width:380px;margin:0 auto;}
.grupo{margin-bottom:16px;}
.grupo > label{
  display:block;font-family:var(--body);font-weight:800;font-size:.74rem;
  letter-spacing:.5px;text-transform:uppercase;color:var(--blanco);margin-bottom:7px;
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#factura-preview:not(:empty){margin-top:10px;}

input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select{
  width:100%;padding:13px 18px;
  border-radius:999px;border:1.5px solid var(--gold);
  background:rgba(0,0,0,.14);color:var(--blanco);
  font-family:var(--body);font-weight:500;font-size:.95rem;
  outline:none;transition:border-color .15s, background .15s, box-shadow .15s;
}
input:focus,select:focus{border-color:var(--gold-bright);background:rgba(0,0,0,.26);box-shadow:0 0 0 3px rgba(239,160,28,.22);}
input::placeholder{color:rgba(255,255,255,.5);}
select{appearance:none;-webkit-appearance:none;cursor:pointer;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='%23efa01c' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:38px;}
select option{background:var(--rojo-deep);color:var(--blanco);}
input[type=date]{color-scheme:dark;}

/* Casillas legales */
.legales{margin:6px 0 22px;text-align:center;}
.check-line{
  display:flex;align-items:flex-start;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:.74rem;color:var(--blanco);
  line-height:1.4;margin:8px auto;max-width:34ch;text-align:left;
}
.check-line input{width:16px;height:16px;margin-top:2px;accent-color:var(--gold);flex-shrink:0;}
.check-line a{color:var(--gold-bright);text-decoration:underline;font-weight:700;}

/* Botón ¡ENVÍA TU JUGADA! */
.btn-enviar{
  display:block;margin:0 auto 8px;
  background:var(--gold);color:var(--azul-deep);
  font-family:var(--body);font-weight:800;font-size:1.18rem;letter-spacing:.3px;
  text-transform:uppercase;padding:14px 40px;border:none;border-radius:999px;cursor:pointer;
  box-shadow:0 5px 0 var(--gold-deep);transition:transform .12s, box-shadow .12s;
}
.btn-enviar:hover{transform:translateY(-2px);}
.btn-enviar:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-deep);}
.btn-enviar:disabled{opacity:.55;cursor:not-allowed;}

#form-msg{text-align:center;}
.mensaje{padding:11px 14px;border-radius:12px;font-weight:700;text-align:center;margin:14px auto 0;max-width:34ch;font-size:.86rem;}
.mensaje.error{background:rgba(0,0,0,.25);color:var(--gold-bright);border:1.5px solid var(--gold-bright);}
.mensaje.ok{background:rgba(239,160,28,.16);color:var(--gold-bright);border:1.5px solid var(--gold);}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.footer{
  position:relative;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;padding:120px 26px 26px;
}
.footer .social{display:flex;gap:10px;}
.footer .social a{
  width:26px;height:26px;border-radius:6px;background:var(--blanco);
  display:flex;align-items:center;justify-content:center;color:var(--rojo-deep);
}
.footer .social svg{width:15px;height:15px;display:block;fill:var(--rojo-deep);}
.footer .copy{
  font-family:var(--body);font-weight:700;font-size:.62rem;letter-spacing:.5px;
  color:rgba(255,255,255,.85);text-transform:uppercase;text-align:right;
}

/* ═══════════════════════════════════════════════════
   MODAL DE PREGUNTA (flujo trivia)
   ═══════════════════════════════════════════════════ */
#modal-pregunta{position:fixed;inset:0;z-index:200;background:rgba(10,5,5,.94);display:flex;align-items:center;justify-content:center;padding:18px;animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-card{
  background:url('../assets/img/fondo_rojo.jpg') center/cover, linear-gradient(180deg,var(--rojo),var(--rojo-deep));
  border-radius:22px;border:2px solid var(--gold);max-width:430px;width:100%;
  padding:28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.6);color:var(--blanco);
}
.modal-timer{text-align:center;margin-bottom:20px;}
.modal-timer .t-label{font-family:var(--body);font-weight:900;font-size:.7rem;letter-spacing:2px;color:var(--blanco);text-transform:uppercase;margin-bottom:6px;}
.modal-timer .t-val{font-family:var(--display);font-weight:400;font-size:3.4rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;transition:color .2s;}
.modal-timer .t-val.rojo{color:var(--blanco);animation:tick .5s infinite;}
@keyframes tick{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.modal-timer .t-bar{height:8px;background:rgba(255,255,255,.2);border-radius:6px;margin-top:14px;overflow:hidden;border:1.5px solid var(--gold);}
.modal-timer .t-fill{height:100%;background:var(--gold-bright);width:100%;transition:width .1s linear;}
.modal-timer .t-fill.rojo{background:var(--blanco);}
.modal-q{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.35rem;text-align:center;color:var(--gold);margin-bottom:22px;line-height:1.25;}
.modal-opts{display:grid;grid-template-columns:1fr;gap:11px;}
.opt{
  display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.12);
  border:2px solid var(--blanco);border-radius:999px;padding:13px 18px;cursor:pointer;
  text-align:left;font-family:var(--body);font-weight:700;font-size:.95rem;color:var(--blanco);
  transition:transform .12s, background .12s, color .12s;
}
.opt:hover:not(:disabled){background:rgba(239,160,28,.18);transform:translateY(-2px);}
.opt:disabled{cursor:not-allowed;}
.opt.sel{background:var(--gold);color:var(--azul-deep);border-color:var(--gold);}
.opt.ok{background:#1f8a3b;color:#fff;border-color:#1f8a3b;}
.opt.bad{background:#7a1115;color:#fff;border-color:#7a1115;}
.opt .letra{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold);color:var(--azul-deep);font-family:var(--display);font-weight:400;font-size:1.05rem;}
.opt.sel .letra,.opt.ok .letra,.opt.bad .letra{background:rgba(255,255,255,.85);color:var(--azul-deep);}
#modal-result{text-align:center;margin-top:8px;}

/* Tarjeta de éxito que reemplaza el form */
.exito{
  text-align:center;padding:20px 10px;
}
.exito img{width:150px;margin:0 auto 18px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));}
.exito h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.9rem;color:var(--gold);margin-bottom:14px;}
.exito p{font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--blanco);max-width:32ch;margin:0 auto 12px;line-height:1.4;}
.exito .suerte{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.5rem;color:var(--gold-bright);margin-top:18px;}

@media (max-width:430px){
  .page{max-width:100%;}
}