/* ==========================================================================
   Bárbara N. Giménez — sistema visual
   Rediseño 2026 · estética cinematográfica oscura
   ========================================================================== */

:root{
  --bg:        #08080a;
  --bg-soft:   #0e0e12;
  --bg-card:   #141419;
  --bg-raise:  #1b1b22;

  --ink:       #f1eee8;
  --ink-2:     #c6c1b8;
  --muted:     #8c877e;

  --gold:      #d5ab5f;
  --gold-dim:  #8a6f3c;
  --teal:      #6fa9a2;

  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  --serif:  "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:   "Courier Prime", "Courier New", monospace;

  --wrap: 1120px;
  --gut: clamp(20px, 5vw, 56px);
}

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

[hidden]{display:none !important}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15.5px,.44vw + 14.2px,17px);
  line-height:1.72;
  font-weight:350;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* grano de película, muy sutil */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}

::selection{background:var(--gold); color:#0a0a0a}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

/* ---------- tipografía ---------- */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
h1{font-size:clamp(2.35rem,4.6vw,4rem)}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.2}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.lead{
  font-size:clamp(1.06rem,1.25vw,1.24rem);
  line-height:1.68;
  color:var(--ink-2);
  font-weight:330;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.1rem;
  display:block;
}
.eyebrow--teal{color:var(--teal)}
.eyebrow--muted{color:var(--muted)}

.serif-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.12rem,1.5vw,1.42rem);
  line-height:1.55;
  color:var(--ink);
  font-weight:300;
}

/* ---------- layout ---------- */

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.wrap-narrow{max-width:760px; margin-inline:auto; padding-inline:var(--gut)}

section{position:relative}
section[id]{scroll-margin-top:86px}
.section{padding-block:clamp(64px,9vw,132px)}
.section--tight{padding-block:clamp(40px,5vw,68px)}

.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- header ---------- */

.site-head{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:rgba(8,8,10,.72);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.site-head.is-stuck{border-bottom-color:var(--line); background:rgba(8,8,10,.9)}

.head-inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:14px var(--gut);
  display:flex; align-items:center; gap:24px;
}

.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.brand img{height:34px; width:auto; opacity:.95}
.brand-text{
  font-family:var(--serif); font-size:1.02rem; letter-spacing:-.01em; white-space:nowrap;
}

.nav{margin-left:auto; display:flex; align-items:center; gap:clamp(14px,2.2vw,30px)}
.nav a{
  font-size:.815rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-2); position:relative; padding-block:6px; white-space:nowrap;
  transition:color .25s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .32s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover, .nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after, .nav a[aria-current="page"]::after{right:0}

.lang{display:flex; gap:2px; align-items:center; margin-left:6px; flex:0 0 auto}
.lang a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  padding:5px 8px; color:var(--muted); border:1px solid transparent; border-radius:3px;
  transition:color .2s ease, border-color .2s ease;
}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="true"]{color:var(--gold); border-color:var(--line-2)}

.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--line-2);
  color:var(--ink); border-radius:3px; padding:8px 11px; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; cursor:pointer;
}

@media (max-width:820px){
  .nav-toggle{display:block}
  .nav{
    position:fixed; inset:60px 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(8,8,10,.98); border-bottom:1px solid var(--line);
    padding:8px var(--gut) 22px; margin:0;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{width:100%; padding:13px 0; border-bottom:1px solid var(--line); font-size:.9rem}
  .lang{margin:14px 0 0; padding:0}
}

/* ---------- botones ---------- */

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  padding:13px 22px; border-radius:2px;
  border:1px solid var(--gold-dim); color:var(--gold);
  background:transparent; cursor:pointer;
  transition:background .28s ease, color .28s ease, border-color .28s ease, transform .28s ease;
}
.btn:hover{background:var(--gold); color:#0a0a0a; border-color:var(--gold); transform:translateY(-1px)}
.btn--solid{background:var(--gold); color:#0a0a0a; border-color:var(--gold)}
.btn--solid:hover{background:transparent; color:var(--gold)}
.btn--ghost{border-color:var(--line-2); color:var(--ink-2)}
.btn--ghost:hover{background:var(--ink); color:#0a0a0a; border-color:var(--ink)}
.btn--teal{border-color:rgba(111,169,162,.45); color:var(--teal)}
.btn--teal:hover{background:var(--teal); color:#08120f; border-color:var(--teal)}

.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.8rem}

/* ---------- home ---------- */

.home{min-height:100svh; display:flex; flex-direction:column}

.home-mark{
  padding:clamp(46px,9vh,96px) var(--gut) clamp(26px,4vh,44px);
  text-align:center;
}
.home-mark img{
  margin-inline:auto; width:min(560px,80vw); opacity:0;
  animation:markIn 1.5s .15s cubic-bezier(.16,.84,.32,1) forwards;
}
.home-mark p{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); margin:1.4rem 0 0; opacity:0;
  animation:markIn 1.4s .55s ease forwards;
}
@keyframes markIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

.doors{
  flex:1; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border-top:1px solid var(--line);
}
.door{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(18px,3vw,34px); padding:clamp(44px,7vw,90px) 28px;
  background:var(--bg); overflow:hidden; isolation:isolate;
  transition:background .5s ease;
}
.door::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(120% 90% at 50% 60%, rgba(213,171,95,.13), transparent 68%);
  transition:opacity .6s ease;
}
.door--book::before{background:radial-gradient(120% 90% at 50% 60%, rgba(111,169,162,.13), transparent 68%)}
.door:hover::before{opacity:1}
.door img{
  width:clamp(110px,15vw,190px); filter:grayscale(.35) brightness(.92);
  transition:transform .7s cubic-bezier(.16,.84,.32,1), filter .6s ease;
}
.door:hover img{transform:translateY(-8px) scale(1.045); filter:grayscale(0) brightness(1.05)}
.door-label{
  font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.15rem); letter-spacing:-.01em;
}
.door-sub{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-top:-.6em;
}
.door-line{
  width:34px; height:1px; background:var(--gold); margin-top:.2em;
  transition:width .5s cubic-bezier(.16,.84,.32,1);
}
.door--book .door-line{background:var(--teal)}
.door:hover .door-line{width:88px}

@media (max-width:760px){
  .doors{grid-template-columns:1fr}
  .door{padding-block:clamp(40px,9vw,60px)}
}

/* ---------- hero interior ---------- */

.hero{
  padding-block:clamp(64px,9vw,120px) clamp(34px,4.5vw,60px);
  position:relative;
}
.hero::before{
  content:""; position:absolute; inset:-40% 0 0 -10%; z-index:-1;
  background:radial-gradient(58% 70% at 22% 30%, rgba(213,171,95,.10), transparent 72%);
  pointer-events:none;
}
.hero--teal::before{background:radial-gradient(58% 70% at 22% 30%, rgba(111,169,162,.10), transparent 72%)}
.hero h1{max-width:20ch}
.hero .lead{max-width:62ch; margin-top:1.7rem}

.hero-grid{
  display:grid; gap:clamp(30px,5vw,70px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  align-items:center;
}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr}}

.portrait{
  position:relative; border-radius:3px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-card);
}
.portrait img{width:100%; filter:grayscale(.15)}
.portrait--round{border-radius:50%; border-color:var(--line-2)}

/* ---------- ficha / meta ---------- */

.meta-list{
  list-style:none; margin:2.4rem 0 0; padding:0;
  display:grid; gap:.55rem;
}
.meta-list li{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; color:var(--ink-2);
  display:flex; gap:.8em;
}
.meta-list b{color:var(--muted); font-weight:400; min-width:7.2em; flex:0 0 auto}

/* ---------- timeline filmografía ---------- */

.credits{display:grid; gap:0; margin-top:clamp(30px,4vw,56px)}

.credit{
  display:grid; grid-template-columns:132px minmax(0,1fr);
  gap:clamp(20px,4vw,52px);
  padding-block:clamp(30px,4vw,48px);
  border-top:1px solid var(--line);
  align-items:start;
}
.credit:last-child{border-bottom:1px solid var(--line)}

.credit-year{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; color:var(--gold);
  padding-top:.35em;
}
.credit-kind{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:.55rem;
}
.credit h3{margin-bottom:.7rem}
.credit h3 em{font-style:italic}

.credit-body{display:grid; grid-template-columns:minmax(0,1fr) 172px; gap:clamp(18px,3vw,38px); align-items:start}
.credit-body.no-art{grid-template-columns:minmax(0,1fr)}

.poster{
  border-radius:2px; overflow:hidden; border:1px solid var(--line);
  background:var(--bg-card); transition:transform .5s cubic-bezier(.16,.84,.32,1), border-color .4s;
}
.poster:hover{transform:translateY(-4px); border-color:var(--line-2)}
.poster img{width:100%}

.laurels{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.45rem}
.laurels li{
  font-size:.86rem; color:var(--ink-2); padding-left:1.15em; position:relative; line-height:1.5;
}
.laurels li::before{
  content:"◆"; position:absolute; left:0; top:.1em; color:var(--gold-dim); font-size:.62em;
}
.laurels span{color:var(--muted)}

.watch{
  display:inline-flex; align-items:center; gap:.55em; margin-top:1rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .3s ease, gap .3s ease;
}
.watch:hover{border-color:var(--gold); gap:.9em}

@media (max-width:760px){
  .credit{grid-template-columns:1fr; gap:14px}
  .credit-year{padding-top:0}
  .credit-body{grid-template-columns:1fr}
  .credit-body .poster{max-width:220px; order:-1}
}

/* ---------- libros ---------- */

.book{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,5vw,64px); align-items:center;
  padding-block:clamp(44px,6vw,84px);
  border-top:1px solid var(--line);
}
.book:first-of-type{border-top:0}
.book--flip>.book-art{order:2}
.cover{
  position:relative; border-radius:3px; overflow:hidden;
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95), 0 0 0 1px var(--line);
  transition:transform .6s cubic-bezier(.16,.84,.32,1), box-shadow .6s ease;
}
.cover:hover{transform:translateY(-6px); box-shadow:0 34px 74px -26px rgba(0,0,0,1), 0 0 0 1px var(--line-2)}
@media (max-width:760px){
  .book{grid-template-columns:1fr; gap:26px}
  .book--flip>.book-art{order:0}
  .cover{max-width:250px}
}

/* ---------- tarjetas de sección ---------- */

.split{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border-block:1px solid var(--line);
}
@media (max-width:760px){.split{grid-template-columns:1fr}}

.split-card{
  background:var(--bg); padding:clamp(40px,6vw,76px) clamp(26px,4vw,54px);
  display:flex; flex-direction:column; gap:1.1rem;
  transition:background .45s ease;
  position:relative; overflow:hidden;
}
.split-card:hover{background:var(--bg-soft)}
.split-card img{width:clamp(90px,12vw,140px); margin-bottom:.4rem; opacity:.9}
.split-card h3{font-size:clamp(1.4rem,2.4vw,1.95rem)}
.split-card p{color:var(--muted); font-size:.95rem}
.split-card .more{
  margin-top:auto; padding-top:1.2rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; gap:.5em; transition:gap .3s ease;
}
.split-card:hover .more{gap:.95em}
.split-card--teal .more{color:var(--teal)}

/* ---------- prensa ---------- */

.press-grid{
  display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  border:1px solid var(--line);
}
.press{
  background:var(--bg); padding:26px 24px; display:flex; flex-direction:column; gap:.5rem;
  min-height:150px; transition:background .35s ease;
}
.press:hover{background:var(--bg-soft)}
.press-outlet{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.press h3{font-size:1.06rem; line-height:1.32; font-family:var(--serif)}
.press-meta{margin-top:auto; font-size:.78rem; color:var(--muted); font-family:var(--mono); letter-spacing:.04em}

.antho{list-style:none; margin:0; padding:0; display:grid; gap:0}
.antho li{
  display:flex; flex-wrap:wrap; gap:.4em 1.1em; align-items:baseline;
  padding:16px 0; border-top:1px solid var(--line);
}
.antho li:last-child{border-bottom:1px solid var(--line)}
.antho b{font-family:var(--serif); font-weight:400; font-size:1.1rem}
.antho span{font-size:.83rem; color:var(--muted); font-family:var(--mono); letter-spacing:.04em}

/* ---------- contacto ---------- */

.contact{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(22px,3vw,44px); margin-top:clamp(26px,4vw,48px);
}
.contact div{display:grid; gap:.4rem}
.contact dt, .contact .k{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.contact .v{font-size:1.02rem; color:var(--ink)}
.contact a.v:hover{color:var(--gold)}

/* ---------- footer ---------- */

.site-foot{
  border-top:1px solid var(--line); padding-block:clamp(38px,5vw,60px);
  margin-top:clamp(40px,6vw,80px);
}
.foot-inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:flex; flex-wrap:wrap; gap:22px 44px; align-items:flex-start; justify-content:space-between;
}
.foot-brand img{height:30px; opacity:.75; margin-bottom:.9rem}
.foot-inner p, .foot-inner a{font-size:.83rem; color:var(--muted); line-height:1.75}
.foot-inner a:hover{color:var(--ink)}
.foot-nav{display:grid; gap:.35rem}
.foot-legal{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:#5f5b55}

/* ---------- animación al entrar ---------- */

.reveal{opacity:0; transform:translateY(22px)}
.reveal.in{opacity:1; transform:none; transition:opacity .85s cubic-bezier(.16,.84,.32,1), transform .85s cubic-bezier(.16,.84,.32,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .home-mark img,.home-mark p{opacity:1; animation:none}
}

/* ---------- variante literaria (acento verde azulado) ---------- */
body.lit{--gold:#82bbb2; --gold-dim:#4d7c76}
body.lit ::selection{background:#82bbb2; color:#08120f}

/* tira de ilustraciones */
.strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px; margin-top:clamp(26px,4vw,44px);
}
.strip figure{margin:0; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--bg-card)}
.strip img{width:100%; filter:saturate(.9)}

/* cita destacada */
.pull{
  border-left:2px solid var(--gold-dim); padding:.2rem 0 .2rem 1.4rem;
  margin:clamp(22px,3vw,36px) 0;
}

/* ---------- palmarés ---------- */

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  margin-top:clamp(20px,3vw,32px);
}
.stat{
  background:var(--bg); padding:clamp(22px,3vw,32px) clamp(18px,2.4vw,28px);
  display:flex; flex-direction:column; gap:.35rem;
}
.stat b{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,3.4vw,3rem);
  line-height:1; color:var(--gold); letter-spacing:-.02em;
}
.stat span{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.stats-note{
  margin-top:1.2rem; font-size:.92rem; color:var(--muted); max-width:62ch;
}

/* resultado destacado dentro de los laureles */
.laurels b{
  font-family:var(--mono); font-weight:400; font-size:.86em; letter-spacing:.06em;
  color:var(--gold);
}

/* ---------- El Parque de Zoe ---------- */

.games{
  display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--line); margin-top:clamp(26px,3.5vw,44px);
}
.game-card{
  appearance:none; background:var(--bg); border:0; cursor:pointer; text-align:left;
  font:inherit; color:inherit;
  padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,30px);
  display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
  transition:background .4s ease;
}
.game-card:hover{background:var(--bg-soft)}
.game-icon{
  width:76px; height:76px; border-radius:50%; overflow:hidden; margin-bottom:.6rem;
  border:1px solid var(--line-2); background:var(--bg-card); flex:0 0 auto;
  transition:transform .5s cubic-bezier(.16,.84,.32,1);
}
.game-card:hover .game-icon{transform:translateY(-4px) scale(1.04)}
.game-icon img{width:100%; height:100%; object-fit:cover}
.game-name{font-family:var(--serif); font-size:1.28rem; line-height:1.2}
.game-desc{color:var(--muted); font-size:.9rem; line-height:1.55}
.game-go{
  margin-top:auto; padding-top:1rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); transition:letter-spacing .3s ease;
}
.game-card:hover .game-go{letter-spacing:.26em}
@media (max-width:640px){ .games{grid-template-columns:1fr} }

/* ventana modal */
body.no-scroll{overflow:hidden}
.modal{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px}
.modal-backdrop{
  position:absolute; inset:0; background:rgba(4,4,6,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:fadeIn .3s ease;
}
.modal-box{
  position:relative; width:min(520px,100%); max-height:88vh; overflow-y:auto;
  background:var(--bg-card); border:1px solid var(--line-2); border-radius:4px;
  padding:clamp(30px,4vw,44px) clamp(22px,3.4vw,40px) clamp(26px,3.4vw,38px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  animation:boxIn .42s cubic-bezier(.16,.84,.32,1);
  text-align:center;
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes boxIn{from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none}}

.modal-close{
  position:absolute; top:12px; right:14px; width:34px; height:34px;
  background:none; border:1px solid var(--line); border-radius:50%;
  color:var(--muted); font-size:1.15rem; line-height:1; cursor:pointer;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.modal-close:hover{color:var(--ink); border-color:var(--line-2); transform:rotate(90deg)}
.modal-title{
  font-family:var(--serif); font-size:clamp(1.35rem,2.4vw,1.7rem); margin:0 0 1.4rem;
}

.stage{
  min-height:230px; display:grid; place-items:center; margin-bottom:1.5rem;
}
.stage--sm{min-height:120px}
.stage .thinking{width:78px; opacity:.9}
.result-img{
  max-width:280px; border-radius:3px; opacity:0; transform:scale(.97);
  transition:opacity .5s ease, transform .5s cubic-bezier(.16,.84,.32,1);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
}
.result-img.in{opacity:1; transform:none}

.game-hint{color:var(--muted); font-size:.9rem; margin:0 0 1.2rem}

.fields{display:grid; gap:14px; margin-bottom:1.4rem; text-align:left}
.fields label{
  display:grid; gap:.45rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.fields input{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-2); border-radius:2px;
  padding:12px 14px; width:100%;
  transition:border-color .25s ease, background .25s ease;
}
.fields input::placeholder{color:#4f4b46}
.fields input:focus{outline:none; border-color:var(--gold); background:var(--bg-soft)}

.result-text{
  font-family:var(--serif); font-size:1.22rem; line-height:1.45; color:var(--ink);
  margin:0; opacity:0; transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease;
}
.result-text.in{opacity:1; transform:none}
.result-text.warn{
  font-family:var(--sans); font-size:.92rem; color:#d99a7c;
}

.date-result{
  display:grid; gap:.5rem; opacity:0; transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease;
}
.date-result.in{opacity:1; transform:none}
.date-day{
  font-family:var(--serif); font-size:clamp(1.35rem,3vw,1.85rem); color:var(--gold);
  text-transform:capitalize;
}
.date-event{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2);
}

.modal .btn{width:100%; justify-content:center}

@media (max-width:520px){
  .stage{min-height:190px}
  .result-img{max-width:220px}
}

/* ==========================================================================
   El Parque de Zoe — modo "cuaderno": papel crema, no cine negro
   ========================================================================== */

body.play{
  /* se reasignan los tokens: el resto del CSS del sitio sigue funcionando igual */
  --bg:        #f7f2e6;
  --bg-soft:   #f1e9d7;
  --bg-card:   #fffdf8;
  --bg-raise:  #ffffff;

  --ink:       #241f1a;
  --ink-2:     #4e463c;
  --muted:     #857b6c;

  --gold:      #0f5f58;   /* acento principal: verde tinta */
  --gold-dim:  #16746c;
  --teal:      #0f5f58;

  --line:      rgba(36,31,26,.14);
  --line-2:    rgba(36,31,26,.26);

  --sun:       #e0a020;
  --coral:     #d2604a;
  --violet:    #6f5697;

  background:var(--bg); color:var(--ink);
}
body.play::after{opacity:.05}
body.play ::selection{background:var(--sun); color:#241f1a}

/* papel cuadriculado */
body.play main{
  background-image:
    repeating-linear-gradient(to right, rgba(15,95,88,.09) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(to bottom, rgba(15,95,88,.09) 0 1px, transparent 1px 27px);
  background-position:center top;
}

/* cabecera y pie claros, con la firma en tinta */
body.play .site-head{background:rgba(247,242,230,.82)}
body.play .site-head.is-stuck{background:rgba(247,242,230,.94)}
body.play .brand img,
body.play .foot-brand img{filter:invert(1)}
body.play .nav-toggle{border-color:var(--line-2)}
body.play .site-foot{background:var(--bg-soft)}

body.play .hero::before{
  background:radial-gradient(60% 70% at 25% 20%, rgba(224,160,32,.20), transparent 70%);
}
body.play .eyebrow{color:var(--gold-dim)}

/* tarjetas de juego: papel recortado, una por color */
body.play .games{
  background:transparent; border:0; gap:clamp(14px,1.8vw,20px);
}
body.play .game-card{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:16px; padding:clamp(26px,3vw,34px);
  box-shadow:0 10px 24px -18px rgba(36,31,26,.55);
  transition:transform .45s cubic-bezier(.16,.84,.32,1), box-shadow .45s ease, border-color .35s ease;
  position:relative; overflow:hidden;
}
body.play .game-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:5px;
  background:var(--accent, var(--gold-dim));
  transform:scaleY(0); transform-origin:top; transition:transform .45s cubic-bezier(.16,.84,.32,1);
}
body.play .game-card:hover{
  transform:translateY(-5px); background:var(--bg-card);
  box-shadow:0 22px 40px -22px rgba(36,31,26,.55); border-color:var(--line-2);
}
body.play .game-card:hover::before{transform:scaleY(1)}
body.play .game-card[data-game="fortune"]{--accent:var(--sun)}
body.play .game-card[data-game="compat"] {--accent:var(--coral)}
body.play .game-card[data-game="oracle"] {--accent:var(--violet)}
body.play .game-card[data-game="date"]   {--accent:var(--gold-dim)}

body.play .game-icon{
  width:88px; height:88px; border:0; background:transparent;
  filter:drop-shadow(0 10px 18px rgba(36,31,26,.28));
}
body.play .game-go{color:var(--accent, var(--gold-dim))}

/* ventana de juego */
body.play .modal-backdrop{background:rgba(36,31,26,.55)}
body.play .modal-box{
  background:var(--bg-card); border-color:var(--line); border-radius:18px;
  box-shadow:0 40px 80px -30px rgba(36,31,26,.6);
}
body.play .modal-close{border-color:var(--line); color:var(--muted)}
body.play .modal-close:hover{color:var(--ink); border-color:var(--line-2)}
body.play .fields input{background:#fffefb; border-color:var(--line-2); color:var(--ink)}
body.play .fields input::placeholder{color:#b3aa9a}
body.play .fields input:focus{border-color:var(--gold-dim); background:#fff}
body.play .result-img{box-shadow:0 16px 34px -18px rgba(36,31,26,.6)}
body.play .result-text.warn{color:var(--coral)}
body.play .date-day{color:var(--gold-dim)}
body.play .date-event{color:var(--ink-2)}
body.play .btn--teal{border-color:var(--gold-dim); color:var(--gold-dim)}
body.play .btn--teal:hover{background:var(--gold-dim); color:#fffdf8}