/* =====================================================================
   WENKORA — estilo de las páginas de texto (sobre, contacto, guías…)
   ---------------------------------------------------------------------
   La misma paleta del home, sin la maquinaria de la portada. Una página
   nueva de texto necesita esto, site-chrome.js y nada más:

     <link rel="stylesheet" href="../pagina.css">
     <wk-header data-root="../"></wk-header>
     <main class="hoja"> … </main>
     <wk-footer data-root="../"></wk-footer>
     <script src="../site-chrome.js"></script>
   ===================================================================== */
:root{
  --crema:#FBF4E4;
  --papel:#FFFDF7;
  --hundido:#F3EAD6;
  --tinta:#101438;
  --tinta-suave:rgba(16,20,56,.66);
  --tinta-tenue:rgba(16,20,56,.16);
  --amarillo:#FFC72C;
  --azul:#1B33C8;
  --rojo:#F0533C;
  --fd:Archivo,Helvetica,Arial,sans-serif;
  --fm:'Space Mono',ui-monospace,Menlo,monospace;
  --sh:5px 6px 0 0 var(--tinta);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--fd);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.hoja{
  max-width:820px;margin:0 auto;
  padding:clamp(40px,8vw,84px) clamp(20px,5vw,72px) clamp(56px,9vw,96px);
  display:flex;flex-direction:column;gap:clamp(30px,5vw,46px);
}

.eyebrow{
  font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--azul);margin:0 0 14px;
}
h1{
  font-family:var(--fd);font-weight:800;font-size:clamp(38px,9vw,84px);
  line-height:.9;letter-spacing:-.045em;text-transform:uppercase;
  margin:0;text-wrap:balance;
}
.entrada{
  font-size:clamp(17px,2.4vw,22px);line-height:1.5;font-weight:600;
  letter-spacing:-.015em;margin:18px 0 0;max-width:28ch;text-wrap:pretty;
}
.entrada mark{background:var(--amarillo);color:var(--tinta);padding:0 .12em}

h2{
  font-family:var(--fd);font-weight:800;font-size:clamp(22px,3.4vw,30px);
  line-height:1.1;letter-spacing:-.03em;text-transform:uppercase;
  margin:0 0 14px;text-wrap:balance;
}
h3{
  font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);margin:0 0 8px;
}
p{margin:0 0 14px;color:var(--tinta-suave);max-width:66ch}
p:last-child{margin-bottom:0}
strong{color:var(--tinta);font-weight:600}
a{color:var(--azul);text-decoration:none;border-bottom:2px solid var(--azul)}
a:hover{color:var(--rojo);border-color:var(--rojo)}

section.bloque{border-top:2px solid var(--tinta);padding-top:clamp(24px,3.5vw,32px)}

.tarjeta{
  background:var(--papel);border:2px solid var(--tinta);box-shadow:var(--sh);
  padding:clamp(20px,3.4vw,30px);
}

.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.lista li{position:relative;padding-left:22px;color:var(--tinta-suave);max-width:66ch}
.lista li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:8px;background:var(--amarillo);
  outline:1px solid var(--tinta)}
.lista li strong{color:var(--tinta)}

.juegos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.juegos span{
  font-family:var(--fm);font-size:12px;letter-spacing:.06em;
  border:2px solid var(--tinta);padding:9px 12px;background:var(--papel);
}

.correo{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--fd);font-weight:800;font-size:clamp(20px,4.4vw,38px);
  letter-spacing:-.03em;text-transform:lowercase;
  color:var(--tinta);border:0;border-bottom:4px solid var(--amarillo);
  overflow-wrap:anywhere;
}
.correo:hover{color:var(--azul);border-bottom-color:var(--azul)}

.dato{
  display:grid;grid-template-columns:150px 1fr;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--tinta-tenue);
}
.dato:last-child{border-bottom:0}
@media (max-width:560px){ .dato{grid-template-columns:1fr;gap:2px} }
.dato dt{font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-suave);margin:3px 0 0}
.dato dd{margin:0;color:var(--tinta)}
dl{margin:0}

:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}