/* =========================================================
   OLIMPIADA DE VIDEO-JUEGOS · PORTADA
   Hoja de stickers: papel, tinta y pegatinas recortadas.
   ========================================================= */

:root{
  --sun:#FFDE59;
  --ink:#171528;
  --ink-2:#4D4A63;
  --paper:#FFFDF7;
  --cobalt:#2F4BFF;
  --coral:#FF5C5C;
  --mint:#5FE3B3;
  --focus:#171528;
}

*,
*::before,
*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  min-height:100vh;
  background:var(--sun);
  color:var(--ink);
  font-family:'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}

h1,p{margin:0;}
svg{display:block;}
a{color:inherit;}

::selection{background:var(--ink);color:var(--sun);}

:focus-visible{
  outline:4px solid var(--focus);
  outline-offset:5px;
}

.skip{
  position:absolute;
  left:16px;
  top:-64px;
  z-index:100;
  padding:11px 16px;
  background:var(--ink);
  color:var(--sun);
  font-size:.86rem;
  font-weight:700;
  text-decoration:none;
  border-radius:8px;
}
.skip:focus-visible{
  top:12px;
  outline-color:var(--paper);
}

/* ---------- Lienzo ---------- */
.poster{
  position:relative;
  min-height:100dvh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:32px clamp(18px,4vw,48px) 18px;
  overflow:hidden;
  background-color:var(--sun);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 10v8M10 14h8' fill='none' stroke='%23171528' stroke-opacity='.085' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:28px 28px;
}

.center{
  position:relative;
  z-index:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(30px,4.6vh,48px);
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:22px 0;
}

.lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  text-align:center;
}

/* ---------- Título recortado ---------- */
.title-plate{
  --r:-1.4deg;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:fit-content;
  max-width:100%;
  padding:clamp(20px,3.4vw,32px) clamp(24px,5vw,54px) clamp(26px,4vw,38px);
  background:var(--paper);
  border:4px solid var(--ink);
  border-radius:clamp(18px,2.6vw,30px);
  box-shadow:10px 10px 0 var(--cobalt);
  transform:rotate(var(--r));
  animation:plate-in .42s cubic-bezier(.2,.85,.3,1.1) both;
}

.title{
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-weight:800;
  font-stretch:96%;
  letter-spacing:-.025em;
  line-height:.86;
  color:var(--ink);
  font-size:1rem;
}
.title-top{
  display:block;
  font-size:clamp(3.2rem,8.4vw,6.4rem);
}
.title-bottom{
  display:block;
  margin-top:2px;
  font-size:clamp(2rem,5.3vw,4rem);
  line-height:1;
  letter-spacing:-.02em;
}

.age-badge{
  --r:5deg;
  position:absolute;
  top:-18px;
  right:-12px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  background:var(--mint);
  border:3px solid var(--ink);
  border-radius:999px;
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(var(--r));
  font-size:.78rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  animation:badge-in .36s .18s cubic-bezier(.2,.85,.3,1.15) both;
}
.age-star{
  color:var(--coral);
  font-size:.92rem;
  line-height:1;
}

/* ---------- Subtítulo / cinta ---------- */
.subtitle-tape{
  --r:1.2deg;
  position:relative;
  z-index:3;
  width:fit-content;
  max-width:100%;
  margin-top:clamp(-22px,-2.2vw,-14px);
  padding:8px 20px 9px;
  background:var(--coral);
  border:3px solid var(--ink);
  border-radius:10px;
  box-shadow:5px 5px 0 var(--ink);
  transform:rotate(var(--r));
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:clamp(1.15rem,2.6vw,1.7rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--ink);
  animation:tape-in .38s .12s cubic-bezier(.2,.85,.3,1.12) both;
}

.lede{
  max-width:38ch;
  margin-top:clamp(18px,3vh,26px);
  font-size:clamp(.95rem,1.6vw,1.06rem);
  font-weight:500;
  line-height:1.55;
  color:var(--ink-2);
  animation:fade-up .4s .26s ease both;
}

/* ---------- Accesos ---------- */
.roles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.6vw,26px);
  width:min(820px,100%);
  animation:roles-in .46s .3s cubic-bezier(.2,.85,.3,1.05) both;
}

.role{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,20px);
  min-height:clamp(126px,15vh,160px);
  padding:clamp(16px,2.4vw,24px);
  border:4px solid var(--ink);
  border-radius:clamp(18px,2.4vw,26px);
  text-decoration:none;
  color:var(--ink);
  transition:transform .16s ease, box-shadow .16s ease;
  will-change:transform;
}

.role--student{
  background:var(--cobalt);
  color:var(--paper);
  box-shadow:9px 9px 0 var(--ink);
  transform:rotate(-.6deg);
}
.role--admin{
  background:var(--paper);
  box-shadow:9px 9px 0 var(--coral);
  transform:rotate(.6deg);
}

.role:hover{transform:translate(-2px,-2px) rotate(0);}
.role--student:hover{box-shadow:12px 12px 0 var(--ink);}
.role--admin:hover{box-shadow:12px 12px 0 var(--coral);}
.role:active{transform:translate(4px,4px) rotate(0);}
.role--student:active{box-shadow:4px 4px 0 var(--ink);}
.role--admin:active{box-shadow:4px 4px 0 var(--coral);}
.role:focus-visible{outline-color:var(--ink);}

.role-sticker{
  flex:none;
  width:clamp(54px,6vw,68px);
  transform:rotate(-5deg);
  filter:drop-shadow(3px 4px 0 var(--ink));
}
.role-sticker svg{
  width:100%;
  height:auto;
}

.role-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  text-align:left;
}
.role-label{
  display:block;
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  font-size:clamp(1.45rem,2.6vw,2rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.015em;
}
.role-sub{
  display:block;
  font-size:clamp(.78rem,1.2vw,.88rem);
  font-weight:600;
  line-height:1.3;
  opacity:.86;
}
.role--admin .role-sub{
  color:var(--ink-2);
  opacity:1;
}

/* ---------- Stickers decorativos ---------- */
.sticker{
  position:absolute;
  z-index:1;
  width:80px;
  pointer-events:none;
  filter:drop-shadow(5px 6px 0 var(--ink));
  transform:rotate(var(--r,0deg));
  animation:sticker-in .4s cubic-bezier(.2,.85,.3,1.15) both;
}
.sticker svg{width:100%;height:auto;}

.sticker--trophy{
  --r:-12deg;
  top:clamp(14px,5vh,54px);
  left:clamp(12px,4.5vw,64px);
  width:clamp(56px,7vw,92px);
  animation-delay:.22s;
}
.sticker--footprint{
  --r:11deg;
  top:clamp(20px,7vh,72px);
  right:clamp(12px,4.5vw,64px);
  width:clamp(52px,6.4vw,84px);
  animation-delay:.28s;
}
.sticker--star{
  --r:-9deg;
  top:43%;
  left:clamp(10px,3.4vw,52px);
  width:clamp(44px,4.8vw,64px);
  animation-delay:.34s;
}
.sticker--shield{
  --r:8deg;
  top:44%;
  right:clamp(10px,3.4vw,52px);
  width:clamp(46px,5.2vw,70px);
  animation-delay:.3s;
}
.sticker--heart{
  --r:-8deg;
  bottom:clamp(74px,13vh,120px);
  left:clamp(20px,7vw,110px);
  width:clamp(42px,4.4vw,60px);
  animation-delay:.38s;
}
.sticker--bolt{
  --r:12deg;
  bottom:clamp(82px,15vh,140px);
  right:clamp(20px,6.5vw,100px);
  width:clamp(40px,4.2vw,58px);
  animation-delay:.36s;
}

/* ---------- Pie ---------- */
.foot{
  position:relative;
  z-index:2;
  grid-row:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:min(820px,100%);
  margin:0 auto;
  padding-top:14px;
  border-top:2.5px solid var(--ink);
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-2);
}
.foot span:last-child{
  color:var(--ink);
  font-weight:700;
}

/* ---------- Entrada ---------- */
@keyframes plate-in{
  from{opacity:0;transform:scale(1.06) rotate(var(--r));}
  to{opacity:1;transform:scale(1) rotate(var(--r));}
}
@keyframes tape-in{
  from{opacity:0;transform:scale(1.08) rotate(var(--r));}
  to{opacity:1;transform:scale(1) rotate(var(--r));}
}
@keyframes badge-in{
  from{opacity:0;transform:scale(1.12) rotate(var(--r));}
  to{opacity:1;transform:scale(1) rotate(var(--r));}
}
@keyframes sticker-in{
  from{opacity:0;transform:scale(1.18) rotate(var(--r,0deg));}
  to{opacity:1;transform:scale(1) rotate(var(--r,0deg));}
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes roles-in{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- Adaptación ---------- */
@media (max-width:980px){
  .sticker--star,
  .sticker--bolt{display:none;}
}

@media (max-width:760px){
  .poster{padding-top:26px;}
  .center{gap:30px;padding:16px 0;}
  .roles{grid-template-columns:1fr;width:min(460px,100%);}
  .role{min-height:110px;border-radius:22px;}
  .sticker--shield,
  .sticker--heart{display:none;}
  .sticker--trophy{width:64px;top:14px;left:12px;}
  .sticker--footprint{width:60px;top:18px;right:12px;}
}

@media (max-width:560px){
  .poster{
    padding:22px 14px 14px;
    background-size:24px 24px;
  }
  .center{gap:26px;}
  .title-plate{
    padding:22px 18px 30px;
    border-width:3px;
    border-radius:20px;
    box-shadow:7px 7px 0 var(--cobalt);
  }
  .title-top{font-size:clamp(2.6rem,13.5vw,3.6rem);}
  .title-bottom{font-size:clamp(1.65rem,8.4vw,2.2rem);}
  .age-badge{
    top:-14px;
    right:-6px;
    padding:5px 8px;
    border-width:2.5px;
    box-shadow:3px 3px 0 var(--ink);
    font-size:.68rem;
  }
  .subtitle-tape{
    margin-top:-16px;
    padding:7px 14px 8px;
    border-width:3px;
    border-radius:8px;
    box-shadow:4px 4px 0 var(--ink);
    font-size:1.05rem;
  }
  .lede{
    max-width:32ch;
    margin-top:16px;
    font-size:.9rem;
  }
  .role{
    min-height:96px;
    gap:12px;
    padding:14px 16px;
    border-width:3px;
    border-radius:20px;
  }
  .role--student{box-shadow:6px 6px 0 var(--ink);}
  .role--admin{box-shadow:6px 6px 0 var(--coral);}
  .role-sticker{width:50px;filter:drop-shadow(2px 3px 0 var(--ink));}
  .role-label{font-size:1.35rem;}
  .role-sub{font-size:.76rem;}
  .sticker--trophy{width:48px;top:8px;left:6px;opacity:.92;}
  .sticker--footprint{width:46px;top:11px;right:6px;opacity:.92;}
  .foot{font-size:.7rem;gap:10px;flex-wrap:wrap;}
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}