/* AIDEV-NOTE: estilos propios de ejemplos/alberath.html (GAMEFEST017-JSK): landing de ejemplo del Plan
   Estudio con la estética del juego (fantasía medieval: dorado sobre verde bosque), no la del festival.
   No carga sitio.css. La franja de arriba es ejemplo.css. */
/* Fuentes alojadas en el sitio (licencia OFL), bajadas del bloque latin de Google Fonts: sin su CSS externo no
   hay nada que bloquee el render. Cinzel y Alegreya son variables: un archivo cubre el rango de pesos. */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600 900;font-display:swap;src:url(fuentes/cinzel-latin-600-900.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-style:normal;font-weight:400 700;font-display:swap;src:url(fuentes/alegreya-latin-400-700.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-style:italic;font-weight:400 700;font-display:swap;src:url(fuentes/alegreya-italic-latin-400-700.woff2) format("woff2")}
:root{
  color-scheme:dark;
  --bosque:#0c150f;
  --bosque-2:#122019;
  --musgo:#1b3324;
  --musgo-2:#244431;
  --linea:#2f5a3e;
  --oro:#d9a21b;
  --oro-claro:#f3cf6a;
  --oro-oscuro:#8c6410;
  --pergamino:#f3e9d2;
  --niebla:#b7c4b6;
  --sombra:#7f9283;
  --brasa:#e2662b;
  --f-titulo:"Cinzel","Trajan Pro","Times New Roman",serif;
  --f-texto:"Alegreya",Georgia,"Times New Roman",serif;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px} /* la franja de ejemplo.css va sticky arriba */
body{margin:0;background:var(--bosque);color:var(--pergamino);font-family:var(--f-texto);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--oro-claro)}
:focus-visible{outline:3px solid var(--oro-claro);outline-offset:3px}
p{margin:0}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--f-titulo);font-weight:700;line-height:1.1;margin:0;color:var(--pergamino)}
h2{font-size:clamp(28px,3.4vw,40px);text-align:center;margin-bottom:10px}
h2 + .sub{text-align:center;color:var(--niebla);max-width:60ch;margin:0 auto 40px;font-size:19px}
.ojo{display:block;text-align:center;font-family:var(--f-titulo);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--oro);margin-bottom:10px}
.ojo::before,.ojo::after{content:" ✦ ";color:var(--oro-oscuro)}
section{padding-block:clamp(56px,8vw,96px)}
.alt{background:linear-gradient(180deg,var(--bosque-2),var(--bosque))}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-titulo);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:15px 26px;border:2px solid var(--oro);color:var(--oro-claro);background:rgba(217,162,27,.08);transition:background .2s,color .2s,transform .15s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:hover{background:var(--oro);color:#1c1403;transform:translateY(-2px)}
.btn.solido{background:linear-gradient(180deg,var(--oro-claro),var(--oro));color:#1c1403;border-color:var(--oro-claro)}
.btn.solido:hover{background:var(--oro-claro)}
.btn.discord{border-color:#7289da;color:#c7d0ff;background:rgba(88,101,242,.14)}
.btn.discord:hover{background:#5865f2;color:#fff}
.btn svg{width:20px;height:20px;fill:currentColor}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(88vh,760px);display:grid;align-items:center;padding-block:clamp(48px,7vw,96px);overflow:hidden;isolation:isolate;background:var(--bosque)}
.hero .fondo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,21,15,.96) 0%,rgba(12,21,15,.88) 35%,rgba(12,21,15,.35) 70%,rgba(12,21,15,.25) 100%),linear-gradient(180deg,rgba(12,21,15,.2),rgba(12,21,15,.1) 60%,var(--bosque) 100%)}
.hero .wrap{max-width:1160px;width:100%}
.hero .col{max-width:620px}
.hero h1{margin:0 0 22px}
.hero .logo{width:min(420px,80%);filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
/* la frase de búsqueda dentro del h1: visible y chica, como subtítulo del logo */
.hero .busca{display:block;margin-top:14px;font-size:clamp(15px,1.5vw,18px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pergamino);text-shadow:0 1px 8px rgba(0,0,0,.7);text-wrap:balance}
.hero .estudio{font-family:var(--f-titulo);font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);margin-bottom:18px}
.hero .pitch{font-family:var(--f-titulo);font-weight:700;line-height:1.1;font-size:clamp(30px,4.4vw,52px);text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hero .lead{font-size:clamp(18px,1.6vw,21px);color:var(--pergamino);max-width:56ch;margin:18px 0 28px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.datos{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(217,162,27,.35);font-size:15px;color:var(--niebla)}
.datos span::before{content:"✦ ";color:var(--oro)}

/* ---------- tarjetas (Qué es) ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tarjeta{position:relative;padding:30px 26px 28px;background:linear-gradient(180deg,var(--musgo),var(--bosque-2));border:1px solid var(--linea)}
.tarjeta::before{content:"";position:absolute;inset:6px;border:1px solid rgba(217,162,27,.28);pointer-events:none}
.tarjeta .num{font-family:var(--f-titulo);font-size:14px;letter-spacing:.2em;color:var(--oro);margin-bottom:10px}
.tarjeta h3{font-size:22px;margin-bottom:12px}
.tarjeta p{color:var(--niebla);font-size:17px}

/* ---------- Cómo se juega ---------- */
.ciclo{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:0 0 44px;padding:0}
.ciclo li{font-family:var(--f-titulo);font-size:15px;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--linea);background:var(--bosque-2);color:var(--pergamino);display:flex;align-items:center;gap:12px}
.ciclo li + li::before{content:"➤";color:var(--oro);font-size:12px}
.pasos{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:start}
.paso{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start}
.paso + .paso{margin-top:26px}
.paso .n{width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--oro);color:var(--oro-claro);font-family:var(--f-titulo);font-weight:700;font-size:22px;background:rgba(217,162,27,.08);transform:rotate(45deg)}
.paso .n span{transform:rotate(-45deg)}
.paso h3{font-size:21px;margin-bottom:6px}
.paso p{color:var(--niebla);font-size:17px}
.reglas{padding:26px 28px;background:var(--bosque-2);border:1px solid var(--linea);border-top:3px solid var(--oro)}
.reglas h3{font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--oro-claro);margin-bottom:14px}
.reglas dl{margin:0;display:grid;gap:12px}
.reglas dt{font-weight:700;color:var(--pergamino)}
.reglas dd{margin:0;color:var(--niebla);font-size:16.5px}

/* ---------- unidades ---------- */
.unidades{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;margin:0;padding:0}
.unidad{text-align:center;padding:22px 16px 20px;background:linear-gradient(180deg,var(--musgo),var(--bosque-2));border:1px solid var(--linea);transition:transform .2s,border-color .2s}
.unidad:hover{transform:translateY(-4px);border-color:var(--oro)}
.unidad img{width:128px;height:128px;margin:0 auto 12px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.unidad h3{font-size:20px;margin-bottom:6px}
.rol{display:inline-block;font-family:var(--f-titulo);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--linea);color:var(--oro);margin-bottom:10px}
.rol.tanque{color:#8fc5ff;border-color:#2b5a8a}
.rol.fisico{color:#ff9b6a;border-color:#8a3f22}
.rol.psi{color:#d8a6ff;border-color:#5a2f8a}
.rol.apoyo{color:#9ee88f;border-color:#2f7a3a}
.unidad p{color:var(--niebla);font-size:16px;line-height:1.45}
.heroe{margin-top:34px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:22px 28px;border:1px solid var(--oro-oscuro);background:linear-gradient(90deg,rgba(217,162,27,.12),transparent)}
.heroe .sello{width:64px;height:64px}
.heroe h3{font-size:20px;margin-bottom:4px}
.heroe p{color:var(--niebla);font-size:17px}

/* ---------- capturas ---------- */
.capturas{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.capturas figure{margin:0;border:1px solid var(--linea);background:var(--bosque-2);padding:8px}
.capturas img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.capturas figcaption{padding:12px 8px 6px;color:var(--niebla);font-size:16px}

/* ---------- kit de prensa ---------- */
.kit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.ficha{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;padding:26px 28px;background:var(--bosque-2);border:1px solid var(--linea)}
.ficha dt{font-family:var(--f-titulo);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);padding-top:4px}
.ficha dd{margin:0;color:var(--pergamino)}
.kit h3{font-size:20px;letter-spacing:.04em;margin-bottom:14px;color:var(--oro-claro)}
.kit .texto-prensa + h3{margin-top:28px}
.texto-prensa{padding:18px 20px;background:var(--bosque-2);border-left:3px solid var(--oro);color:var(--niebla);font-size:16.5px}
.texto-prensa + .texto-prensa{margin-top:12px}
.descargas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none;margin:28px 0 0;padding:0}
.descargas a{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:10px;background:var(--bosque-2);border:1px solid var(--linea);color:var(--pergamino);text-decoration:none;transition:border-color .2s}
.descargas a:hover{border-color:var(--oro)}
.descargas img{width:64px;height:64px;object-fit:cover;background:var(--musgo)}
.descargas b{display:block;font-size:16px}
.descargas small{color:var(--sombra);font-size:13.5px}

/* ---------- estudio ---------- */
.estudio-sec{text-align:center}
.estudio-sec p{max-width:64ch;margin:0 auto;color:var(--niebla);font-size:18px}
.estudio-sec .btn-row{justify-content:center;margin-top:30px}

/* ---------- preguntas frecuentes ---------- */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px 40px;margin-top:40px}
.faq div{border-top:1px solid var(--linea);padding-top:16px}
.faq h3{font-size:19px;letter-spacing:.02em;margin-bottom:8px;color:var(--oro-claro)}
.faq p{color:var(--niebla);font-size:17px}

/* ---------- pie ---------- */
footer{border-top:1px solid var(--linea);padding-block:34px;background:#080e0a}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 28px}
footer .marca{display:flex;align-items:center;gap:12px;font-family:var(--f-titulo);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--pergamino)}
footer .marca img{width:40px;height:40px}
footer ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0}
footer ul a{color:var(--niebla);text-decoration:none;font-size:16px}
footer ul a:hover{color:var(--oro-claro)}
footer .legal{flex-basis:100%;color:var(--sombra);font-size:14px}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .tarjetas{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
  .unidades{grid-template-columns:repeat(2,1fr)}
  .kit{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:17px}
  .hero{min-height:0}
  .hero::before{background:linear-gradient(180deg,rgba(12,21,15,.55),rgba(12,21,15,.92) 45%,var(--bosque) 100%)}
  .hero .fondo{object-position:50% 20%}
  .hero .col{padding-top:34vw}
  .btn{width:100%}
  .capturas{grid-template-columns:1fr}
  .ficha{grid-template-columns:1fr;gap:2px 0}
  .ficha dd{margin-bottom:10px}
  .descargas{grid-template-columns:1fr}
  .heroe{grid-template-columns:1fr;text-align:center}
  .heroe .sello{margin:0 auto}
  footer .wrap{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
}