/* ==================================================================
   FOKA PALOOZA 2026 — estilos compartidos
   Lo que usan las tres páginas: index.html, torneo.html y admin.html.
   Lo propio de cada una (el hero, las tarjetas de días, la tabla de
   posiciones, la grilla del admin) vive en el <style> de cada archivo.
   ================================================================== */

/* ============================ TOKENS ============================ */
:root{
  --abyss:#062C30;
  --deep:#0B3C49;
  --teal:#1B6B73;
  --foam:#4FBDBB;
  --ice:#E0F7F5;
  --coral:#FF7A59;
  --gold:#FFD166;

  --ink:var(--ice);
  --muted:#8FBFC2;
  --line:rgba(79,189,187,.28);

  --display:'Anton', 'Arial Narrow', Impact, sans-serif;
  --label:'Bebas Neue', 'Arial Narrow', sans-serif;
  --body:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  --maxw:1120px;
  --r:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  -webkit-tap-highlight-color:rgba(79,189,187,.25);
  -webkit-text-size-adjust:100%;
  background:var(--abyss);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--foam)}
::selection{background:var(--coral);color:#20110d}

.wrap{width:min(100% - 2.5rem, var(--maxw));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================ TIPOGRAFÍA ============================ */
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.86;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
}
.eyebrow{
  font-family:var(--label);
  font-size:clamp(.95rem,2.2vw,1.15rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--foam);
  margin:0 0 .75rem;
}
.section-title{
  font-family:var(--display);
  font-size:clamp(2.4rem,7vw,4.6rem);
  line-height:.95;
  text-transform:uppercase;
  margin:0 0 .3em;
  padding-top:.06em;
}
.section-title em{font-style:normal;color:var(--coral)}
.lead{color:var(--muted);max-width:56ch;margin:0 auto}

/* ============================ FOCA ============================ */
.seal-wrap{
  width:clamp(120px,22vw,190px);
  margin:0 auto;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.45));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}

/* ============================ BOTONES ============================ */
.cta-row{
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;
  margin-top:clamp(1.6rem,4vw,2.4rem);
}
.btn{
  font-family:var(--label);
  font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.85rem 1.7rem .65rem;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-primary{background:var(--coral);color:#2a1109;box-shadow:0 8px 0 #8f3b26}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 11px 0 #8f3b26}
.btn-primary:active{transform:translateY(3px);box-shadow:0 4px 0 #8f3b26}
.btn-ghost{background:transparent;color:var(--ice);border-color:var(--foam)}
.btn-ghost:hover{background:rgba(79,189,187,.14);transform:translateY(-3px)}
.btn-gold{background:var(--gold);color:#2a2109;box-shadow:0 8px 0 #9c7c2e}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 11px 0 #9c7c2e}
.btn-sm{font-size:.95rem;padding:.55rem 1.1rem .38rem}
.btn[disabled]{opacity:.6;cursor:progress;transform:none!important}

.badge-top{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--label);letter-spacing:.3em;font-size:.9rem;
  text-transform:uppercase;color:var(--abyss);
  background:var(--gold);
  padding:.35rem 1rem .2rem;
  border-radius:999px;
  transform:rotate(-2deg);
}

/* Etiquetas chiquitas: estado del torneo, "jugando ahora", etc. */
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--label);letter-spacing:.16em;text-transform:uppercase;
  font-size:.82rem;line-height:1;
  padding:.42rem .8rem .3rem;
  border-radius:999px;
  border:2px solid var(--line);
  background:rgba(6,44,48,.6);
  color:var(--muted);
  white-space:nowrap;
}
.pill.foam{border-color:var(--foam);color:var(--foam)}
.pill.gold{background:var(--gold);border-color:var(--gold);color:#2a2109}
.pill.coral{background:var(--coral);border-color:var(--coral);color:#2a1109}
.pill.vivo{border-color:var(--coral);color:var(--coral)}
.pill.vivo::before{
  content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--coral);
  animation:latido 1.6s ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ============================ MARQUEE ============================ */
.marquee{
  background:var(--coral);
  color:#2a1109;
  border-block:3px solid var(--abyss);
  overflow:hidden;
  white-space:nowrap;
  transform:rotate(-1.2deg) scale(1.04);
  margin:clamp(2rem,6vw,3.5rem) 0;
}
.marquee.alt{background:var(--gold);transform:rotate(1.2deg) scale(1.04)}
.marquee__track{display:inline-flex;animation:slide 26s linear infinite;will-change:transform}
.marquee.alt .marquee__track{animation-duration:34s;animation-direction:reverse}
.marquee__track span{
  font-family:var(--display);
  font-size:clamp(1.3rem,3.6vw,2.1rem);
  text-transform:uppercase;
  padding:.42em 0;
  padding-right:.7em;
  display:inline-block;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================ SECCIONES ============================ */
section{position:relative}
.pad{padding:clamp(3.5rem,10vw,6.5rem) 0}
.center{text-align:center}

/* Barra de arriba de las páginas internas (torneo y admin) */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(6,44,48,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.7rem 0;
}
.topbar .marca{
  font-family:var(--display);text-transform:uppercase;
  font-size:1.15rem;line-height:1;color:var(--ice);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
}
.topbar .marca b{color:var(--coral);font-weight:400}
.topbar nav{display:flex;gap:.45rem;flex-wrap:wrap}
.topbar nav a{
  font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;
  font-size:.9rem;color:var(--muted);text-decoration:none;
  padding:.4rem .7rem .25rem;border-radius:999px;border:2px solid transparent;
}
.topbar nav a:hover{color:var(--ice);background:rgba(79,189,187,.12)}
.topbar nav a[aria-current="page"]{color:var(--abyss);background:var(--foam)}

/* ============================ TARJETAS Y FORMULARIOS ============================ */
.card{
  background:linear-gradient(170deg, rgba(11,60,73,.82), rgba(6,44,48,.9));
  border:2px solid var(--line);
  border-radius:calc(var(--r) + 6px);
  padding:clamp(1.5rem,4.5vw,2.6rem);
  max-width:760px;margin:clamp(2rem,5vw,3rem) auto 0;
}
.panel{
  background:linear-gradient(170deg, rgba(11,60,73,.75), rgba(6,44,48,.85));
  border:2px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.1rem,3.5vw,1.8rem);
}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.field{display:block;margin-bottom:1.1rem}
.field > span.lb{
  display:block;
  font-family:var(--label);letter-spacing:.16em;text-transform:uppercase;
  font-size:.85rem;color:var(--foam);margin-bottom:.4rem;
}
.field .hint{display:block;font-size:.8rem;color:var(--muted);margin-top:.35rem;letter-spacing:0;font-family:var(--body);text-transform:none}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=password],select,textarea{
  width:100%;
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:rgba(6,44,48,.72);
  border:2px solid var(--line);
  border-radius:12px;
  padding:.75rem .9rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--foam);box-shadow:0 0 0 4px rgba(79,189,187,.16);
}
input::placeholder,textarea::placeholder{color:rgba(143,191,194,.65)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--foam) 50%),linear-gradient(135deg,var(--foam) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}

.checks{display:flex;flex-wrap:wrap;gap:.6rem}
.check{
  position:relative;
  flex:1 1 150px;
}
.check input{position:absolute;opacity:0;pointer-events:none}
.check span{
  display:block;text-align:center;cursor:pointer;
  font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;font-size:1rem;
  padding:.7rem .6rem .5rem;
  border:2px solid var(--line);border-radius:12px;
  background:rgba(6,44,48,.55);
  transition:all .16s ease;
}
.check input:checked + span{background:var(--foam);color:#04262a;border-color:var(--foam);transform:translateY(-2px)}
.check input:focus-visible + span{box-shadow:0 0 0 4px rgba(79,189,187,.25)}

.inline-check{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--muted);margin-bottom:1.2rem;padding:.35rem 0;cursor:pointer}
.inline-check input{width:24px;height:24px;accent-color:var(--foam);margin-top:.05rem;flex:none}

.hp{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important;opacity:0!important;
  pointer-events:none!important;
}

.form-msg{
  margin-top:1rem;padding:.9rem 1.1rem;border-radius:12px;font-size:.95rem;display:none;
}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(79,189,187,.16);border:1px solid var(--foam);color:var(--ice)}
.form-msg.err{background:rgba(255,122,89,.14);border:1px solid var(--coral);color:#ffd9cf}

.stats{
  margin-top:1.4rem;font-family:var(--label);letter-spacing:.2em;
  text-transform:uppercase;font-size:.9rem;color:var(--gold);
  display:none;
}
.stats.show{display:block}

/* ============================ FOOTER ============================ */
footer{
  border-top:1px solid var(--line);
  padding:clamp(2.5rem,7vw,4rem) 0 3rem;
  text-align:center;
}
.icon-row{
  font-size:clamp(1.3rem,4vw,1.9rem);
  letter-spacing:.35em;
  margin-bottom:1.2rem;
  filter:saturate(.9);
}
.foot-word{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.4rem,5vw,2.4rem);color:var(--coral);
  line-height:.95;
}
.foot-note{color:var(--muted);font-size:.86rem;margin-top:.9rem}
.share-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

/* ============================ MOBILE ============================ */
@media (max-width:520px){
  /* botones a lo ancho: más fáciles de tocar con el pulgar */
  .cta-row .btn,
  .btn-block{flex:1 1 100%;width:100%;justify-content:center}
  /* dos opciones por fila en vez de cuatro apretadas */
  .check{flex:1 1 calc(50% - .3rem)}
  .card{padding:1.35rem 1.15rem 1.6rem}
  .wrap{width:min(100% - 1.75rem, var(--maxw))}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}