/* =====================================================================
   V3 · IDENTIDAD (manual DOSSIERJAVIMORENO.pdf)
   Capa que se carga DESPUÉS de los estilos de cada página: no borra nada,
   solo re-viste. Quitar esta hoja + identidad.js = web original.
   ===================================================================== */
@font-face { font-family:'Inter Alargada'; src:url('../assets/v3/fonts/Inter-Alargada.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/v3/fonts/Inter-Medium.woff2') format('woff2'); font-weight:400 600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/v3/fonts/Inter-ExtraBold.woff2') format('woff2'); font-weight:700 900; font-display:swap; }
@font-face { font-family:'Double Scratch'; src:url('../assets/v3/fonts/DoubleScratch.woff2') format('woff2'); font-display:swap; }

:root {
  /* paleta oficial · cada color tiene un trabajo */
  --jm-amarillo:#FEFC06;  /* luz: subrayados, foco, «hoy» */
  --jm-verde:#3AFA04;     /* libre / disponible / ir */
  --jm-rojo:#FB0001;      /* en directo, sold out, urgencia */
  --jm-morado:#F704FD;    /* el universo interactivo (habitación, juego) */
  --jm-rosa:#FB048B;      /* la marca: acción principal */
  --jm-azul:#0002FD;      /* información: fechas, gira, datos */
  --jm-negro:#0B0B0B; --jm-blanco:#FFFFFF;
  --jm-display:'Inter Alargada', 'Inter', Impact, sans-serif;
  --jm-texto:'Inter', system-ui, -apple-system, sans-serif;
  --jm-mano:'Double Scratch', 'Inter', sans-serif;
}
:root, [data-mode="papel"] { --bg:#FFFFFF; --ink:#0B0B0B; --paper:#FFFFFF; --a1:#0002FD; --a2:#FB048B; --a3:#FEFC06; --giant:#0002FD; --muted:#767676; }
[data-mode="rosa"]  { --bg:#FB048B; --ink:#0B0B0B; --paper:#FFFFFF; --a1:#0B0B0B; --a2:#FEFC06; --a3:#FEFC06; --giant:#FEFC06; --muted:#6d0038; }
[data-mode="azul"]  { --bg:#0002FD; --ink:#0B0B0B; --paper:#FFFFFF; --a1:#FB048B; --a2:#FEFC06; --a3:#FEFC06; --giant:#3f42ff; --muted:#c9caff; }
[data-mode="noche"] { --bg:#0B0B0B; --ink:#FFFFFF; --paper:#FFFFFF; --a1:#FEFC06; --a2:#FB048B; --a3:#FEFC06; --giant:#1d1d1d; --muted:#8a8a8a; }

body { font-family:var(--jm-texto); font-weight:500; letter-spacing:-.005em; }
p, .sec-sub { line-height:1.5; }
.big { letter-spacing:-.005em; }
.btn { font-family:var(--jm-texto); font-weight:800; letter-spacing:.03em; border-radius:0; transition:transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s, background .2s; }
.btn.hot { background:var(--jm-verde); color:var(--jm-negro); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline:3px solid var(--jm-azul); outline-offset:3px; }
::selection { background:var(--jm-amarillo); color:var(--jm-negro); }

/* titulares: el script del manual se queda (Pinyon ≈ logotipo «Javi Moreno» del dossier) y los textos
   expresivos pasan a Double Scratch */
.sec-title .scr { color:var(--jm-rosa); }
.v3-mano { font-family:var(--jm-mano); font-weight:400; }

/* ---------- revelado de titulares (máscara) ---------- */
.v3-rev { clip-path:inset(0 0 100% 0); transform:translateY(28px); transition:clip-path .9s cubic-bezier(.7,0,.2,1), transform .9s cubic-bezier(.7,0,.2,1); }
.v3-rev.v3-in { clip-path:inset(-20% -10% -30% -10%); transform:none; }

/* ---------- stickers del manual con profundidad ---------- */
.v3-pegado { position:relative; }
.v3-st { position:absolute; z-index:3; pointer-events:auto; width:var(--w, 90px); left:var(--x); top:var(--y); right:auto;
  transform:translate3d(0, var(--py, 0px), 0) rotate(var(--r, 0deg)); will-change:transform; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(4px 6px 0 rgba(0,0,0,.14)); cursor:grab; transition:filter .2s; }
.v3-st img { width:100%; height:auto; display:block; transition:transform .45s cubic-bezier(.3,1.7,.45,1); }
.v3-st:hover img { transform:rotate(-8deg) scale(1.08); }
.v3-st.pop img { animation:v3pop .6s cubic-bezier(.3,1.7,.45,1); }
@keyframes v3pop { 30% { transform:scale(.8) rotate(10deg); } 70% { transform:scale(1.18) rotate(-12deg); } }
.v3-st.detras { z-index:0; }
@media (max-width:700px) { .v3-st { width:calc(var(--w, 90px) * .62); } .v3-st.solo-pc { display:none; } }

/* ---------- destacadas (iconos de historias del manual) ---------- */
.v3-destacadas { display:flex; gap:clamp(14px, 4vw, 34px); justify-content:center; padding:22px 16px 6px; flex-wrap:wrap; }
.v3-destacadas a { display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font:800 12px 'Inter', system-ui, -apple-system, sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.v3-destacadas .aro { width:clamp(66px, 17vw, 92px); aspect-ratio:1; border-radius:50%; padding:3px; background:conic-gradient(var(--jm-rosa), var(--jm-amarillo), var(--jm-verde), var(--jm-azul), var(--jm-morado), var(--jm-rosa)); transition:transform .35s cubic-bezier(.3,1.6,.5,1); }
.v3-destacadas .aro i { display:block; width:100%; height:100%; border-radius:50%; border:3px solid var(--bg); background-position:center 50%; background-size:128% auto; background-repeat:no-repeat; }
.v3-destacadas a:hover .aro { transform:rotate(-8deg) scale(1.08); }
.v3-destacadas a:active .aro { transform:scale(.92); }

/* ---------- colores con función por sección ---------- */
/* VERDE = libre: el hueco se rellena de verde neón (el texto sigue en negro, el verde no se lee como letra) */
.cell.free { border-color:var(--jm-negro); background:rgba(58,250,4,.16); }
.cell.free.weekend { background:repeating-linear-gradient(-45deg, rgba(58,250,4,.42) 0 6px, rgba(58,250,4,.12) 6px 12px); }
.cell.free::after { color:var(--jm-negro); font-weight:800; }
.cell.free:hover { background:var(--jm-verde); }
.legend i.f { border:2px solid var(--jm-negro); background:var(--jm-verde); }
/* ROJO = noche cerrada / en directo */
.legend i { background:var(--jm-rojo); }
/* MORADO = el universo interactivo */
.room-teaser .scr { color:var(--jm-morado); text-shadow:0 0 12px var(--jm-morado); }

/* imán y respuesta al cursor */
.v3-iman { transition:transform .35s cubic-bezier(.3,1.5,.5,1); }

@media (prefers-reduced-motion: reduce) {
  .v3-rev { clip-path:none; transform:none; transition:none; }
  .v3-st, .v3-st img, .v3-iman { transition:none !important; transform:rotate(var(--r, 0deg)) !important; animation:none !important; }
}