/* ==========================================================================
   FOMO · PERSONAJES
   Se carga solo en /personajes/, después de fomo.css (mismos tokens y texturas).
   Cada personaje = cabecera (nombre) + escenario de fotos + 5 datos.
   Las fotos se colocan en el escenario con variables en % (--x, --y, --w, --r)
   generadas en el HTML: el collage escala igual en cualquier ancho.
   ========================================================================== */

/* 1. PORTADA E ÍNDICE ------------------------------------------------------ */
.pjs-intro {
  position: relative;
  padding: calc(var(--head-h) + 30px) var(--gutter) 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.pjs-intro__kicker { position: relative; z-index: 2; margin: 0 0 10px; font-size: 30px; rotate: -3deg; }
.pjs-intro__title { margin: 4px 0 0; font-size: clamp(80px, 25vw, 230px); line-height: .84; }
.pjs-intro__title span { display: block; white-space: nowrap; }

.pjs-index ol {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px;
}
.pjs-index a { display: block; text-decoration: none; text-align: center; }
.pjs-index img {
  width: 100%; height: auto; aspect-ratio: 946 / 1400; object-fit: cover;
  box-shadow: var(--shadow-print);
  rotate: var(--t, -3deg);
  transition: rotate .3s var(--ease-drop), transform .3s var(--ease-drop);
}
.pjs-index li:nth-child(2n) img { --t: 3deg; }
.pjs-index li:nth-child(3n) img { --t: -1deg; }
.pjs-index span {
  display: inline-block; margin-top: 8px;
  font-family: var(--f-display); font-weight: 900; font-stretch: 70%;
  font-size: clamp(15px, 4.4vw, 26px); line-height: 1; letter-spacing: .02em;
  white-space: nowrap;
}
.pjs-index a:active img { transform: scale(.95); }
.pjs-index a:focus-visible span, .pjs-index a:hover span { color: var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .pjs-index a:hover img { transform: translateY(-6px); rotate: 0deg; }
}
.pjs-intro__hint { margin: 26px 0 0; text-align: center; font-size: 28px; rotate: -2deg; }

/* 2. BLOQUE DE PERSONAJE --------------------------------------------------- */
.pj { position: relative; padding: 70px var(--gutter) 40px; max-width: 1180px; margin: 0 auto; }
.pj + .pj { margin-top: 20px; }

.pj__head { position: relative; z-index: 10; }
.pj__num { display: block; font-size: 26px; rotate: -4deg; }
.pj__name {
  margin: 0;
  font-size: clamp(110px, 34vw, 260px);
  line-height: .8;
  letter-spacing: -.01em;
}
.pj__name span { display: block; white-space: nowrap; }
.pj__line { display: block; width: 70%; height: 16px; margin-top: 6px; color: var(--yellow); }
.pj__line svg { width: 100%; height: 100%; }
.pj--right .pj__head { text-align: right; }
.pj--right .pj__num { rotate: 4deg; }
.pj--right .pj__line { margin-left: auto; }
.pj--joseluis .pj__name { font-size: clamp(90px, 26vw, 220px); }

/* escenario */
.pj__stage {
  position: relative;
  aspect-ratio: var(--ar);
  margin: 10px calc(var(--gutter) * -1) 0;
  container-type: inline-size;
}
.shot, .note, .mark, .contact, .semaforo {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w);
  z-index: var(--z, 1);
  rotate: var(--r, 0deg);
}
.shot { margin: 0; }
.shot img { width: 100%; height: auto; display: block; }
.shot--raw { filter: drop-shadow(0 10px 14px rgba(3, 20, 40, .5)); }
.shot--print, .shot--polaroid { background: var(--paper); padding: 1.3cqw; box-shadow: var(--shadow-print); }
.shot--polaroid { padding-bottom: 7cqw; }
.shot--bare { box-shadow: none; }
.shot .tape { top: -10px; left: 30%; --w: 22cqw; }
.shot .tape:empty { }
.tape--stripes { background: linear-gradient(#C60B1E 0 25%, #FFC400 25% 75%, #C60B1E 75%); opacity: .92; }
.tape--pink { background: rgba(255, 143, 196, .85); }

.note {
  width: auto;
  font-size: 24px;
  font-size: calc(var(--fs) * 1cqw);
  line-height: .95;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(6, 52, 92, .75);
  pointer-events: none;
}
.note--red { color: #FF3B4E; font-family: var(--f-display); font-weight: 900; font-stretch: 70%; text-shadow: 0 2px 0 var(--ink); }
.note--pink { color: #FF8FC4; }
.mark { color: var(--yellow); pointer-events: none; }
.mark svg { width: 100%; height: auto; display: block; overflow: visible; }
.mark--pink { color: #FF8FC4; }
.mark path { stroke-width: 4px; }

/* hoja de contactos (Cere) */
.contact {
  height: 30.6%;
  background:
    radial-gradient(circle 3px at 50% 50%, var(--paper) 94%, transparent) 0 5px / 16px 10px repeat-x,
    radial-gradient(circle 3px at 50% 50%, var(--paper) 94%, transparent) 0 calc(100% - 5px) / 16px 10px repeat-x,
    #111;
  box-shadow: var(--shadow-print);
}

/* semáforo de peatones (José Luis): solo dos colores */
.semaforo {
  aspect-ratio: 1 / 2.3;
  background: #1b1b1b;
  border-radius: 10px;
  border: 3px solid #333;
  padding: 2cqw 2.6cqw;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-print);
}
.semaforo span { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.semaforo__r { background: #ff3b30; box-shadow: 0 0 14px #ff3b30; animation: blink-r 2.4s steps(1) infinite; }
.semaforo__g { background: #34c759; box-shadow: 0 0 14px #34c759; animation: blink-g 2.4s steps(1) infinite; }
@keyframes blink-r { 50% { opacity: .18; box-shadow: none; } }
@keyframes blink-g { 0% { opacity: .18; box-shadow: none; } 50% { opacity: 1; box-shadow: 0 0 14px #34c759; } }
.semaforo em {
  position: absolute; left: -30%; bottom: -28%;
  font-style: normal; font-size: 22px; font-size: 5.6cqw; white-space: nowrap; rotate: -8deg;
}

/* censura (Equis) */
.redact { position: absolute; background: #0b0b0b; pointer-events: none; }
.redact--a { left: 36%; top: 30%; width: 34%; height: 11%; rotate: -3deg; }

/* 3. DATOS: base -------------------------------------------------------------- */
.pj__side { position: relative; z-index: 8; }
.data { margin: 0; }
.dato { margin: 0; }
.dato dt { margin: 0; }
.dato dd { margin: 0; }
.chip {
  display: inline-block; vertical-align: -3px;
  width: 1.05em; height: 1.05em; margin-left: .35em;
  background: var(--chip);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  rotate: 6deg;
}
.data--stickers .dato:nth-child(2) .chip, .data--dymo .chip, .data--postits .chip { border-color: var(--ink); }
.chip--stripes { background: linear-gradient(#C60B1E 0 25%, #FFC400 25% 75%, #C60B1E 75%); }
.chip--censura { background: repeating-linear-gradient(45deg, #0b0b0b 0 4px, #333 4px 8px); }
.dato__sign { margin-left: .3em; font-family: "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif; font-weight: 400; }

/* notebook — VAL: hoja de libreta */
.data--notebook {
  position: relative;
  margin: -14px 6px 0 18px;
  padding: 22px 18px 18px 36px;
  color: var(--ink);
  rotate: 1.5deg;
  filter: drop-shadow(0 10px 14px rgba(3, 20, 40, .4));
  isolation: isolate;
}
.data--notebook::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, transparent 24px, rgba(200, 16, 46, .35) 24px 26px, transparent 26px),
    repeating-linear-gradient(transparent 0 29px, rgba(11,93,157,.18) 29px 30px),
    var(--paper);
  clip-path: polygon(0 2%, 5% 0, 12% 1.5%, 20% 0, 30% 1.2%, 42% 0, 55% 1.4%, 68% 0, 80% 1.2%, 92% 0, 100% 1%, 100% 100%, 0 100%);
}
.data--notebook .dato { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 3px 0; }
.data--notebook dt { font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #365194; }
.data--notebook dt::after { content: " ·"; }
.data--notebook dd { font-family: var(--f-hand); font-size: 25px; line-height: 1.05; color: #1d2f63; }

/* stickers — CERE: pegatinas sueltas */
.data--stickers { display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: -6px; }
.data--stickers .dato {
  background: var(--paper); color: var(--ink);
  padding: 9px 14px 10px;
  border-radius: 999px;
  border: 3px solid #FF7A1A;
  box-shadow: 0 6px 12px -4px rgba(3, 20, 40, .5);
  rotate: var(--sr, -2deg);
}
.data--stickers .dato:nth-child(2) { --sr: 3deg; background: #FF7A1A; }
.data--stickers .dato:nth-child(3) { --sr: -4deg; }
.data--stickers .dato:nth-child(4) { --sr: 1.5deg; border-radius: 18px; }
.data--stickers .dato:nth-child(5) { --sr: -1deg; background: var(--yellow); border-color: var(--ink); border-radius: 14px; }
.data--stickers dt { display: inline; font-weight: 900; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.data--stickers dt::after { content: " · "; }
.data--stickers dd { display: inline; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-size: 20px; text-transform: uppercase; line-height: 1; }

/* ficha — AMAIA: ficha de revista en rojo */
.data--ficha {
  margin: -20px 0 0 8%;
  padding: 18px 18px 16px;
  background: var(--paper);
  color: var(--ink);
  border-top: 10px solid #C8102E;
  box-shadow: var(--shadow-print);
  rotate: -1.5deg;
}
.data--ficha .dato { padding: 8px 0; border-bottom: 1px dashed rgba(200, 16, 46, .4); }
.data--ficha .dato:last-child { border-bottom: 0; }
.data--ficha dt { font-weight: 900; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #C8102E; }
.data--ficha dd { font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: 23px; line-height: 1.05; text-transform: uppercase; }
.data--ficha .dato--redflag dd { font-size: 30px; font-stretch: 68%; }

/* dossier — PELAYO: expediente a máquina */
.data--dossier {
  position: relative;
  margin: -24px 8% 0 0;
  padding: 26px 18px 16px;
  background: #EFEBDD;
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", "Courier New", Courier, monospace;
  box-shadow: var(--shadow-print);
  rotate: 1.2deg;
}
.data--dossier::before {
  content: ""; position: absolute; top: -12px; right: 18%; width: 90px; height: 24px; rotate: 6deg;
  background: linear-gradient(#C60B1E 0 25%, #FFC400 25% 75%, #C60B1E 75%);
  clip-path: polygon(0 6%, 100% 0, 97% 22%, 100% 46%, 96% 70%, 100% 100%, 0 96%, 3% 74%, 0 50%, 4% 26%);
}
.data--dossier .dato { display: grid; grid-template-columns: 7.2em 1fr; gap: 10px; padding: 6px 0; }
.data--dossier dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.data--dossier dt::after { content: ":"; }
.data--dossier dd { font-size: 15px; line-height: 1.35; }

/* dymo — LUIS: etiquetas de rotuladora */
.data--dymo { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: -10px; }
.data--dymo .dato {
  background: #2E7D32;
  color: #EAF6EA;
  padding: 7px 12px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 5px 10px -4px rgba(3, 20, 40, .6);
  clip-path: polygon(0 0, 100% 0, 98.5% 50%, 100% 100%, 0 100%, 1.5% 50%);
  rotate: var(--dr, -1deg);
  text-shadow: 0 -1px 0 rgba(0,0,0,.35);
}
.data--dymo .dato:nth-child(2) { --dr: 1.2deg; margin-left: 8%; }
.data--dymo .dato:nth-child(3) { --dr: -2deg; }
.data--dymo .dato:nth-child(4) { --dr: 2deg; margin-left: 16%; }
.data--dymo .dato:nth-child(5) { --dr: -.5deg; margin-left: 4%; }
.data--dymo dt { display: inline; font-size: 11px; opacity: .75; }
.data--dymo dt::after { content: " · "; }
.data--dymo dd { display: inline; font-size: 15px; font-weight: 700; line-height: 1.4; }

/* postits — JOSÉ LUIS */
.data--postits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: -8px; }
.data--postits .dato {
  background: #FFE600;
  color: var(--ink);
  padding: 12px 12px 16px;
  min-height: 108px;
  box-shadow: 0 10px 14px -8px rgba(3, 20, 40, .6);
  rotate: var(--pr, -2deg);
}
.data--postits .dato:nth-child(2) { --pr: 3deg; background: #FFF06A; }
.data--postits .dato:nth-child(3) { --pr: 1deg; grid-column: span 2; min-height: 0; }
.data--postits .dato:nth-child(4) { --pr: -3deg; }
.data--postits .dato:nth-child(5) { --pr: 2deg; background: #FFF06A; }
.data--postits dt { font-weight: 900; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.data--postits dd { margin-top: 4px; font-family: var(--f-hand); font-size: 24px; line-height: 1.02; }

/* rosa — LUNA */
.data--rosa {
  position: relative;
  margin: -16px 4% 0 6%;
  padding: 20px 20px 18px;
  background: #FFD3E8;
  color: #5a1238;
  border-radius: 4px;
  box-shadow: var(--shadow-print);
  rotate: -1deg;
}
.data--rosa::after { content: "♡"; position: absolute; right: 12px; top: 4px; font-size: 34px; color: #FF5FA8; rotate: 12deg; }
.data--rosa .dato { padding: 6px 0; }
.data--rosa dt { font-family: var(--f-hand); font-size: 20px; color: #FF3D97; line-height: 1; }
.data--rosa dd { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: 21px; line-height: 1.1; text-transform: uppercase; }

/* censura — EQUIS: todo tachado, nada que ver aquí */
.data--censura {
  margin: -10px 0 0;
  padding: 18px 16px;
  background: #0b0b0b;
  color: var(--white);
  box-shadow: var(--shadow-print);
  rotate: .8deg;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.data--censura .dato { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #2a2a2a; }
.data--censura .dato:last-child { border-bottom: 0; }
.data--censura dt { position: relative; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; }
.data--censura dt::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 3px;
  background: var(--yellow); rotate: -3deg; border-radius: 3px;
}
.data--censura dd {
  position: relative;
  padding: 2px 10px;
  background: repeating-linear-gradient(90deg, #1e1e1e 0 9px, #111 9px 12px);
  color: var(--yellow);
  font-family: var(--f-hand); font-size: 24px; line-height: 1; letter-spacing: .08em;
}
.data--censura dd .chip { vertical-align: -2px; }
.equis-nota { margin: 22px 0 0; font-family: var(--f-hand); font-size: 26px; line-height: 1.05; color: var(--yellow); rotate: -2deg; }
.equis-redact { margin: 10px 0 0; font-size: 14px; letter-spacing: .02em; color: #0b0b0b; overflow: hidden; white-space: nowrap; opacity: .9; }

/* 4. FINAL ------------------------------------------------------------------- */
.pjs-outro { padding: 90px var(--gutter) 90px; text-align: center; max-width: 1180px; margin: 0 auto; }
.pjs-outro__title { margin: 0 0 26px; font-size: clamp(56px, 17vw, 140px); }
.pjs-outro__title span { display: block; white-space: nowrap; }

/* 5. ÍNDICE FIJO ------------------------------------------------------------- */
.pjs-dock {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  max-width: calc(100% - 20px);
  transform: translate(-50%, 160%);
  transition: transform .4s var(--ease-drop);
  background: var(--yellow);
  color: var(--ink);
  clip-path: polygon(0 8%, 100% 0, 99% 100%, 1% 92%);
  filter: drop-shadow(0 6px 10px rgba(3, 20, 40, .4));
}
.pjs-dock.is-visible { transform: translate(-50%, 0); }
.pjs-dock ol {
  list-style: none; margin: 0; padding: 4px 10px;
  display: flex; gap: 2px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pjs-dock ol::-webkit-scrollbar { display: none; }
.pjs-dock a {
  display: block; padding: 10px 9px 9px;
  text-decoration: none; white-space: nowrap;
  font-family: var(--f-display); font-weight: 900; font-stretch: 72%;
  font-size: 15px; letter-spacing: .04em;
}
.pjs-dock a[aria-current="true"] { background: var(--ink); color: var(--yellow); }

/* 6. ANIMACIÓN DE ENTRADA (con JS) ----------------------------------------- */
.js .pj__stage .shot { opacity: 0; transform: translateY(-18px) scale(1.05); transition: opacity .5s var(--ease), transform .7s var(--ease-drop); }
.js .pj__stage.is-visible .shot { opacity: 1; transform: none; }
.js .pj__stage.is-visible .shot:nth-child(2) { transition-delay: .08s; }
.js .pj__stage.is-visible .shot:nth-child(3) { transition-delay: .16s; }
.js .pj__stage.is-visible .shot:nth-child(4) { transition-delay: .24s; }
.js .pj__stage.is-visible .shot:nth-child(5) { transition-delay: .32s; }
.js .pj__stage.is-visible .shot:nth-child(6) { transition-delay: .40s; }
.js .pj__stage.is-visible .shot:nth-child(7) { transition-delay: .48s; }
.js .pj__stage .mark, .js .pj__stage .note { opacity: 0; transition: opacity .4s ease .6s, clip-path .6s var(--ease) .6s; clip-path: inset(-30% 100% -30% -30%); }
.js .pj__stage.is-visible .mark, .js .pj__stage.is-visible .note { opacity: 1; clip-path: inset(-30% -30% -30% -30%); }

/* 7. ESCRITORIO ------------------------------------------------------------ */
@media (min-width: 901px) {
  .pjs-index ol { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; }
  .pjs-intro__title { font-size: clamp(120px, 15vw, 230px); }

  .pj {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "stage head" "stage side";
    column-gap: 56px;
    align-items: start;
    padding-top: 110px;
  }
  .pj--right { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); grid-template-areas: "head stage" "side stage"; }
  .pj__head { grid-area: head; padding-top: 40px; }
  .pj__stage { grid-area: stage; margin: 0; }
  .pj__side { grid-area: side; padding-top: 30px; }
  .pj__name { font-size: clamp(110px, 12vw, 200px); }
  .pj--joseluis .pj__name { font-size: clamp(90px, 8.4vw, 150px); }
  .pj--right .pj__head { text-align: left; }
  .pj--right .pj__line { margin-left: 0; }
  .data--notebook, .data--ficha, .data--dossier, .data--rosa, .data--censura { margin: 0; }
  .data--notebook dd { font-size: 30px; }
  .data--stickers dd { font-size: 24px; }
  .data--ficha dd { font-size: 28px; }
  .data--dossier dd { font-size: 17px; }
  .data--dymo dd { font-size: 17px; }
  .data--postits dd { font-size: 28px; }
  .data--rosa dd { font-size: 25px; }
  .data--censura dd { font-size: 28px; }
  .note { font-size: calc(var(--fs) * 6.2px); }
  .semaforo em { font-size: 34px; }
  .pjs-dock a { font-size: 17px; padding: 10px 12px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .semaforo span { animation: none !important; }
  .js .pj__stage .shot, .js .pj__stage .mark, .js .pj__stage .note { opacity: 1; transform: none; clip-path: none; }
}