/* Boby 2026 — hoja principal.
   Regla de tipografia: New Astro SOLO en .display (h1/h2 grandes).
   Su S mayuscula se lee como una C invertida, asi que en tamanos chicos
   todo va en Epilogue. */

/* ---------- fuentes ---------- */
@font-face{font-family:'New Astro';src:url('../fonts/NewAstro-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Epilogue';src:url('../fonts/Epilogue-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Epilogue';src:url('../fonts/Epilogue-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Epilogue';src:url('../fonts/Epilogue-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Epilogue';src:url('../fonts/Epilogue-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --navy:#002035;
  --navy-2:#062c44;
  --navy-3:#0d3a58;
  --ink:#202020;
  --paper:#f5f3ef;
  --paper-2:#e9e5de;
  --grey:#d1d1d1;
  --amber:#ffaf00;
  --amber-d:#d79000;
  --amber-ink:#8a5c00;
  --muted-on-navy:#9db2c1;
  --muted-on-paper:#6b6b6b;
  --maxw:1180px;
  --narrow:720px;
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Epilogue',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:var(--narrow)}
.display{font-family:'New Astro','Epilogue',sans-serif;font-weight:700;
  letter-spacing:.01em;line-height:1.05}
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin:0}
.eyebrow-ink{color:var(--amber-ink)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:999;width:auto;height:auto;
  clip:auto;background:var(--amber);color:var(--navy);padding:10px 16px;border-radius:8px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(0,32,53,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--navy-3)}
.nav{display:flex;align-items:center;gap:28px;height:80px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand img.mark{width:38px;height:38px;object-fit:contain}
.brand img.word,.brand .custom-logo{height:36px;width:auto}
.primary-nav .menu{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.primary-nav a{color:#dce7ee;font-size:15px;font-weight:500;padding:6px 0;
  position:relative;display:inline-block}
.primary-nav a:hover{color:#fff}
.primary-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--amber);transition:right .22s ease}
.primary-nav a:hover::after{right:0}
.lang{display:flex;gap:2px;border:1px solid var(--navy-3);border-radius:999px;padding:3px}
.lang ul{display:flex;list-style:none;margin:0;padding:0;gap:2px}
.lang a,.lang .wpml-ls-current-language>a{font-size:12px;font-weight:600;padding:4px 11px;
  border-radius:999px;color:var(--muted-on-navy);display:block}
.lang .wpml-ls-current-language>a{background:var(--amber);color:var(--navy)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{display:block;width:24px;height:2px;background:#dce7ee;margin:5px 0;border-radius:2px}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  padding:13px 24px;border-radius:10px;border:0;cursor:pointer;font-family:inherit;
  transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn-primary{background:var(--amber);color:var(--navy)}
.btn-primary:hover{background:#ffc233;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--navy-3);color:#dce7ee;background:none}
.btn-ghost:hover{border-color:var(--muted-on-navy);transform:translateY(-2px)}
.btn img.steam{height:17px;width:auto;display:block;position:relative;top:1px}
.btn-sm{padding:10px 18px;font-size:14px;gap:8px}
.btn-sm img.steam{height:15px}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 520px at 80% 12%,rgba(255,175,0,.09),transparent 62%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;
  align-items:center;padding-top:76px;padding-bottom:56px}
.hero h1{font-size:clamp(42px,5.6vw,70px);margin:14px 0 10px}
.hero .tagline{font-weight:600;font-size:19px;color:var(--amber);margin:0 0 20px}
.hero .pitch{color:#c8d7e1;font-size:18px;max-width:48ch}
.hero .pitch p{margin:0 0 26px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tag{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--navy-3);color:var(--muted-on-navy);padding:5px 12px;border-radius:999px}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pubnote{margin-top:22px;font-size:13px;color:#7f9aab;max-width:44ch}
.keyart{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;
  border:1px solid var(--navy-3);background:#000}
.keyart img{width:100%;height:100%;object-fit:cover}

/* ---------- tira de capturas ---------- */
.shots{background:var(--navy);padding-bottom:34px}
.shots .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.shots figure{margin:0;border-radius:9px;overflow:hidden;border:1px solid var(--navy-3);
  opacity:.85;transition:opacity .2s ease,transform .2s ease}
.shots figure:hover{opacity:1;transform:translateY(-3px)}
.shots img{aspect-ratio:16/9;object-fit:cover;width:100%}

/* ---------- barra de suscripcion ---------- */
.subbar{background:var(--navy-2);border-top:1px solid var(--navy-3);
  border-bottom:1px solid var(--navy-3)}
.subbar .wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding-top:18px;padding-bottom:18px}
.subbar p{margin:0;flex:1 1 280px;font-size:16px;font-weight:600;color:#e4edf3}
.subbar p span{display:block;font-weight:400;font-size:14px;color:var(--muted-on-navy);margin-top:2px}
.subbar .boby-sub-form,.subbar .boby-ml{display:flex;gap:10px;flex:1 1 400px;max-width:470px;flex-wrap:wrap}
.subbar input[type=email],.subbar input[type=text]{flex:1;min-width:0;padding:12px 14px;
  border-radius:9px;border:1px solid var(--navy-3);background:#04283f;color:#fff;
  font-family:inherit;font-size:15px}
.subbar input::placeholder{color:#6d8ba0}
.subbar input:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
.subbar .btn{white-space:nowrap}

/* honeypot: fuera de pantalla, nunca display:none, que algunos bots lo detectan */
.boby-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* mensajes de la suscripcion */
.boby-msg{display:flex;align-items:center;gap:9px;margin:12px 0 0;font-size:15px;
  font-weight:600;padding:11px 15px;border-radius:9px;
  opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .28s ease}
.boby-msg.is-visible{opacity:1;transform:none}
.subbar .boby-msg{flex:1 1 100%;margin-top:4px}
.boby-msg--ok{background:rgba(255,175,0,.15);color:var(--amber)}
.boby-msg--error{background:rgba(214,90,90,.15);color:#ff9d9d}
.news .boby-msg--ok{background:rgba(138,92,0,.12);color:var(--amber-ink)}
.news .boby-msg--error{background:rgba(170,40,40,.1);color:#a52222}

/* el tilde se dibuja solo */
.boby-tick{flex:0 0 auto;width:19px;height:19px;border-radius:50%;position:relative;
  background:currentColor;transform:scale(0);animation:boby-pop .32s .06s cubic-bezier(.2,1.4,.4,1) forwards}
.boby-tick::after{content:'';position:absolute;left:6px;top:3px;width:5px;height:10px;
  border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  animation:boby-tick .22s .3s ease forwards}
.news .boby-tick::after{border-color:#fff}
@keyframes boby-pop{to{transform:scale(1)}}
@keyframes boby-tick{to{transform:rotate(45deg) scale(1)}}

/* el formulario se retira cuando la suscripcion salio bien */
.boby-sub-form{transition:opacity .25s ease,transform .25s ease,max-height .3s ease}
.boby-sub-form.is-done{opacity:0;transform:translateY(-6px);max-height:0;overflow:hidden;
  margin:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .boby-msg,.boby-sub-form{transition:none}
  .boby-msg{opacity:1;transform:none}
  .boby-tick,.boby-tick::after{animation:none;transform:scale(1)}
  .boby-tick::after{transform:rotate(45deg) scale(1)}
}

/* ---------- juegos ---------- */
.games{background:var(--navy);color:#fff;padding:4px 0 96px;border-top:1px solid var(--navy-3)}
.games .wrap{padding-top:72px}
.games-archive .wrap{padding-top:64px}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:34px;flex-wrap:wrap}
.sechead h1,.sechead h2{font-size:clamp(28px,3.4vw,40px);margin:8px 0 0}
.sechead .note{color:var(--muted-on-navy);font-size:15px;margin:0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card{background:var(--navy-2);border:1px solid var(--navy-3);border-radius:var(--r);
  overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);border-color:#17506f}
.card .art{aspect-ratio:16/9;position:relative;overflow:hidden;background:#050d16}
.card .art img.bg{width:100%;height:100%;object-fit:cover;opacity:.85}
.card .art.soon{background:linear-gradient(150deg,#0b3550,#04202f);display:grid;
  place-content:center;justify-items:center;gap:12px}
.card .art.soon img{width:54px;opacity:.5}
.card .art.soon span{font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#4d7893}
.card .body{padding:22px 24px 26px}
.card h2,.card h3{font-weight:700;font-size:21px;letter-spacing:-.01em;margin:0 0 8px}
.card h2 a:hover,.card h3 a:hover{color:var(--amber)}
.card p{color:#b3c6d3;font-size:15px;margin:0 0 16px}
.card .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card .actions{margin-top:18px}
.status{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:rgba(255,175,0,.14);color:var(--amber)}

/* ---------- estudio ---------- */
.studio{background:var(--paper);padding:88px 0}
.studio .wrap{display:grid;grid-template-columns:1.4fr .9fr;gap:60px;align-items:center}
.studio h2{font-size:clamp(26px,3.2vw,38px);margin:10px 0 18px}
.studio p{font-size:18px;color:#444;max-width:54ch;margin:0 0 14px}
.studio .who{display:grid;gap:16px;margin-top:30px}
.who div{font-size:14px;color:var(--muted-on-paper);max-width:44ch}
.who b{display:block;font-weight:700;font-size:16px;color:var(--ink);margin-bottom:3px}
.doodles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;place-items:center}
.doodles img{width:100%;max-width:128px}

/* ---------- newsletter ---------- */
.news{background:var(--paper-2);padding:80px 0}
.news .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.news h2{font-size:clamp(26px,3.2vw,36px);margin:10px 0 14px}
.news p{color:#4c4c4c;max-width:48ch;margin:0 0 8px}
.news .gag{font-size:13px;color:#8a8378;font-style:italic;margin-top:16px;
  border-left:3px solid var(--grey);padding-left:12px}
.news .form{background:#fff;border:1px solid var(--grey);border-radius:var(--r);padding:26px}
.news .form input[type=email],.news .form input[type=text]{width:100%;padding:13px 15px;
  border:1px solid var(--grey);border-radius:9px;font-family:inherit;font-size:15px;
  margin-bottom:14px;background:#fdfcfa}
.news .form input:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
.news .form .btn{width:100%;justify-content:center}

/* ---------- blog ---------- */
.blog{background:var(--paper);padding:88px 0}
.blog h1,.blog h2.display{font-size:clamp(28px,3.4vw,40px);margin:10px 0 0}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.post{border-top:2px solid var(--ink);padding-top:18px}
.post time{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-paper)}
.post h2,.post h3{font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.01em;margin:9px 0 10px}
.post h2 a:hover,.post h3 a:hover{color:var(--amber-ink)}
.post p{font-size:15px;color:#555;margin:0 0 14px}
.post .more{font-size:14px;font-weight:600;color:var(--amber-ink);border-bottom:1px solid currentColor}
.page-blog .posts{grid-template-columns:repeat(2,1fr)}

/* ---------- entradas y paginas ---------- */
.single-head{background:var(--navy);color:#fff;padding:72px 0 56px}
.single-head time{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-navy)}
.single-head h1{font-size:clamp(32px,4.4vw,52px);margin:12px 0 0}
.single-thumb{margin:-32px auto 0;border-radius:var(--r);overflow:hidden;max-width:var(--maxw)}
.entry{padding:56px 28px 88px;font-size:18px}
.entry h2,.entry h3{font-weight:700;letter-spacing:-.01em;margin:2em 0 .6em;line-height:1.25}
.entry h2{font-size:28px}
.entry h3{font-size:22px}
.entry p{margin:0 0 1.2em}
.entry a{color:var(--amber-ink);border-bottom:1px solid currentColor}
.entry blockquote{margin:1.6em 0;padding-left:18px;border-left:3px solid var(--amber);
  font-style:italic;color:#555}
.entry img{border-radius:10px;margin:1.6em 0}
.entry code{background:var(--paper-2);padding:2px 6px;border-radius:5px;font-size:.9em}
.entry pre{background:var(--navy);color:#dce7ee;padding:18px;border-radius:10px;overflow-x:auto}
.game-body .entry{padding-top:64px}
.post-nav{display:flex;justify-content:space-between;gap:20px;padding:0 28px 72px;font-size:15px}
.post-nav a{color:var(--amber-ink)}
.pagination{margin-top:48px;display:flex;gap:10px}
.pagination .page-numbers{padding:8px 14px;border:1px solid var(--grey);border-radius:8px}
.pagination .current{background:var(--amber);border-color:var(--amber)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:var(--muted-on-navy);padding:56px 0 34px;font-size:14px}
.fgrid{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;
  padding-bottom:28px;border-bottom:1px solid var(--navy-3)}
.site-footer .brand img.word{height:34px}
.site-footer a:hover{color:#fff}
.ftext{margin:14px 0 0;max-width:32ch}
.fcols{display:flex;gap:60px;flex-wrap:wrap}
.fcol b{display:block;color:#fff;font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:12px}
.fcol .fmenu{list-style:none;margin:0;padding:0}
.fcol .fmenu li{margin-bottom:8px}
.fbot{display:flex;justify-content:space-between;gap:20px;padding-top:22px;
  font-size:13px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .hero .wrap,.studio .wrap,.news .wrap{grid-template-columns:1fr;gap:38px}
  .grid,.posts,.page-blog .posts{grid-template-columns:1fr}
  .shots .strip{grid-template-columns:repeat(2,1fr)}
  .subbar .boby-sub-form,.subbar .boby-ml{max-width:none}
  .primary-nav,.lang{display:none}
  .primary-nav.is-open{display:block;position:absolute;top:80px;left:0;right:0;
    background:var(--navy);border-bottom:1px solid var(--navy-3);padding:16px 28px}
  .primary-nav.is-open .menu{flex-direction:column;gap:14px}
  .burger{display:block}
  .hero .wrap{padding-top:52px;padding-bottom:40px}
}