/* Anatomy Follies · estilos de las piezas interactivas («Follies»).
 * Todo va bajo .af-folly (la plantilla «Folly») o con prefijo af- para no pisar el tema.
 * Colores: la paleta de marca ya etalonada (film30 --limpio --sepia 0.22), igual que el lienzo. */
@font-face{font-family:'AF Montserrat';font-weight:100 900;font-display:swap;src:url('fonts/Montserrat-900-latin.woff2') format('woff2')}
@font-face{font-family:'AF Inter';font-weight:100 900;font-display:swap;src:url('fonts/Inter-600-latin.woff2') format('woff2')}

:root{
  --af-ink:#2a1f1a; --af-cream:#faebc8; --af-bg:#5c3c31; --af-shadow:#1c120e;
  --af-red:#bb6151; --af-teal:#99b6a4; --af-teal-d:#6e8a7c; --af-teal-l:#c4d4be; --af-butter:#edce84;
  --af-display:'AF Montserrat',Montserrat,system-ui,sans-serif; --af-text:'AF Inter',Inter,system-ui,sans-serif;
}

/* la página entera en oscuro cuando lleva una pieza */
body:has(.af-folly){background:var(--af-bg)}
.af-top,.af-folly,.af-foot{color:var(--af-cream);font:500 17px/1.6 var(--af-text)}

/* cabecera y pie de la plantilla */
.af-top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:760px;margin:0 auto;padding:14px 16px}
.af-brand{font:900 15px/1 var(--af-display);letter-spacing:.06em;text-transform:uppercase;color:var(--af-cream)!important;text-decoration:none!important}
.af-brand span{color:var(--af-butter)}
.af-pill{font:700 13px/1 var(--af-text);background:var(--af-bg);color:var(--af-cream);border:2px solid var(--af-cream);border-radius:99px;padding:8px 12px;cursor:pointer}
.af-pill-float{position:fixed;right:14px;bottom:14px;z-index:50}
.af-foot{max-width:760px;margin:0 auto;padding:24px 16px 48px;font-size:14px;opacity:.75}
.af-foot a,.af-folly a{color:var(--af-butter)}

/* cuerpo */
.af-folly{max-width:760px;margin:0 auto;padding:0 16px 64px;box-sizing:border-box}
.af-folly *{box-sizing:border-box}
.af-folly p{margin:14px 0}
.af-folly b,.af-folly strong{color:var(--af-butter);font-weight:700}
.af-folly h1,.af-folly h2{color:inherit;font-family:var(--af-display);font-weight:900;text-transform:uppercase;letter-spacing:0}
.af-folly h1{font-size:clamp(34px,8vw,56px);line-height:1.02;margin:0}
.af-folly h2{font-size:clamp(24px,5.4vw,32px);line-height:1.1;margin:56px 0 6px}
.af-folly .af-kicker{font:900 13px/1 var(--af-display);letter-spacing:.14em;text-transform:uppercase;color:var(--af-butter);margin:28px 0 10px}
.af-folly .af-lede{font-size:19px;margin-top:22px}

/* cartela de 1930: papel crema, filete de tinta, sombra dura sin desenfoque */
.af-folly .af-cartela{display:inline-block;width:auto;background:var(--af-cream);color:var(--af-ink);border:4px solid var(--af-ink);border-radius:8px;
  box-shadow:8px 9px 0 var(--af-ink);padding:10px 16px;transform:rotate(-1.5deg)}

/* escenario */
.af-stage{position:relative;margin:22px 0 0;border:5px solid var(--af-ink);border-radius:12px;box-shadow:10px 11px 0 var(--af-shadow);overflow:hidden;background:var(--af-bg)}
.af-stage canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;touch-action:manipulation;cursor:pointer}
.af-hint{position:absolute;left:12px;bottom:10px;font:700 13px/1 var(--af-text);background:rgba(42,31,26,.78);color:var(--af-cream);padding:7px 10px;border-radius:6px;pointer-events:none}
.af-sello{position:absolute;top:16%;right:9%;font:900 clamp(30px,8vw,52px)/1 var(--af-display);color:var(--af-butter);
  border:5px solid var(--af-butter);border-radius:10px;padding:6px 14px;transform:rotate(-12deg) scale(.4);opacity:0;pointer-events:none;
  text-shadow:3px 3px 0 var(--af-ink);box-shadow:3px 3px 0 var(--af-ink)}
.af-sello.go{animation:af-sello .9s steps(11) forwards}
@keyframes af-sello{0%{opacity:0;transform:rotate(-12deg) scale(1.8)}12%{opacity:1;transform:rotate(-12deg) scale(.92)}20%{transform:rotate(-12deg) scale(1)}75%{opacity:1}100%{opacity:0;transform:rotate(-12deg) scale(1)}}
.af-hipo{position:absolute;top:14px;right:12px;font:900 15px/1 var(--af-display);letter-spacing:.08em;color:var(--af-red);background:var(--af-cream);
  border:4px solid var(--af-red);border-radius:6px;padding:7px 10px;transform:rotate(6deg);box-shadow:3px 3px 0 var(--af-ink)}

/* botones */
.af-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0}
.af-btn{font:900 15px/1 var(--af-display);text-transform:uppercase;letter-spacing:.04em;padding:14px 18px;border:4px solid var(--af-ink);border-radius:9px;
  background:var(--af-butter);color:var(--af-ink);box-shadow:5px 6px 0 var(--af-ink);cursor:pointer;touch-action:manipulation}
.af-btn.alt{background:var(--af-cream)}
.af-btn.slam{background:var(--af-red);color:var(--af-cream);font-size:20px;padding:16px 28px}
.af-btn:active{transform:translate(4px,5px);box-shadow:1px 1px 0 var(--af-ink)}
.af-btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:5px 6px 0 var(--af-ink)}
.af-btn:focus-visible,.af-pill:focus-visible{outline:3px solid var(--af-teal-l);outline-offset:3px}
.af-btn[hidden]{display:none}

/* contador y cota del fotograma */
.af-meter{margin:18px 0 0;background:var(--af-cream);color:var(--af-ink);border:4px solid var(--af-ink);border-radius:9px;padding:14px 16px;box-shadow:6px 7px 0 var(--af-shadow)}
.af-meter .af-num{font:900 40px/1 var(--af-display)}
.af-meter .af-num small{font-size:16px;margin-left:4px}
.af-frame{position:relative;height:30px;margin:12px 0 6px;border:3px solid var(--af-ink);border-radius:5px;
  background:repeating-linear-gradient(115deg,transparent 0 7px,rgba(184,145,63,.45) 7px 10px)}
.af-frame .af-gapbar{position:absolute;inset:0 auto 0 0;width:0;background:var(--af-teal);border-right:3px solid var(--af-ink)}
.af-frame .af-tick{position:absolute;top:-7px;bottom:-7px;left:83.9%;border-left:3px dashed var(--af-teal-d)}
.af-legend{display:flex;justify-content:space-between;gap:10px;font:700 13px/1.3 var(--af-text)}
.af-note{font-size:15px;opacity:.85;min-height:3.2em}
.af-msg{min-height:3.4em;font-size:17px}
.af-rounds{margin:10px 0 0;padding-left:22px;font-size:15px}

/* fuentes y avisos */
.af-folly .af-src{border-left:5px solid var(--af-teal);background:rgba(250,235,200,.06);padding:12px 14px;margin:14px 0;border-radius:0 8px 8px 0}
.af-folly .af-src q{font-style:italic}
.af-folly .af-who{display:block;font:700 14px/1.4 var(--af-text);color:var(--af-teal-l);margin-top:6px}
.af-folly .af-disclaim{border:3px dashed var(--af-teal-d);border-radius:10px;padding:14px 16px;margin-top:56px;font-size:15px}
@media (max-width:420px){.af-btn{flex:1 1 100%}}

/* el botón de sonido solo cuando la pieza tiene sonido */
#sound{display:none}
body.af-has-sound #sound{display:inline-block}

/* ===== viaje en scroll (Folly No. 2): lienzo fijo a pantalla completa, tarjetas que pasan por encima */
body:has(.af-journey){overflow-x:clip}
.af-journey{position:relative;width:100vw;margin-left:calc(50% - 50vw)}
.af-journey-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.af-journey-sticky canvas{display:block;width:100%;height:100%}
.af-journey-steps{position:relative;margin-top:-100vh;margin-top:-100svh;pointer-events:none}
.af-step{height:130vh;height:130svh;position:relative}
.af-card{position:absolute;top:62%;left:50%;transform:translateX(-50%);width:min(92vw,440px);pointer-events:auto;
  background:var(--af-cream);color:var(--af-ink);border:4px solid var(--af-ink);border-radius:10px;box-shadow:8px 9px 0 var(--af-ink);
  padding:16px 18px;font:500 16px/1.5 var(--af-text);opacity:.55;transition:opacity .4s}
.af-step.is-on .af-card{opacity:1}
.af-card p{margin:8px 0 0}
.af-card b{color:var(--af-red)!important}
.af-folly .af-card .af-card-title{font:900 clamp(22px,5.6vw,30px)/1.08 var(--af-display);text-transform:uppercase;margin:4px 0 0;color:var(--af-ink)}
.af-folly .af-step:first-child .af-card-title{font-size:clamp(30px,8vw,44px)}
.af-card-kicker{font:900 12px/1 var(--af-display);letter-spacing:.14em;text-transform:uppercase;color:var(--af-red)}
.af-card-src{margin-top:10px;padding-top:8px;border-top:2px dashed rgba(42,31,26,.3);font:700 12.5px/1.4 var(--af-text);color:var(--af-teal-d)}
.af-scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font:900 13px/1 var(--af-display);letter-spacing:.12em;
  text-transform:uppercase;color:var(--af-butter);animation:af-bote 1.2s steps(6) infinite}
@keyframes af-bote{50%{transform:translate(-50%,6px)}}
@media (min-aspect-ratio:115/100){
  .af-card{top:30%;left:6vw;transform:none;width:min(36vw,430px)}
}

/* vídeo: carga YouTube solo al pulsar (la web no pone cookies de terceros por su cuenta) */
.af-video{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:22px 0 0;border:5px solid var(--af-ink);border-radius:12px;
  box-shadow:10px 11px 0 var(--af-shadow);overflow:hidden;background:#000 center/cover no-repeat;cursor:pointer;padding:0}
.af-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.af-video .af-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:900 18px/1 var(--af-display);text-transform:uppercase;
  background:var(--af-butter);color:var(--af-ink);border:4px solid var(--af-ink);border-radius:9px;box-shadow:5px 6px 0 var(--af-ink);padding:14px 20px}
.af-video-note{font-size:13px;opacity:.7;margin-top:10px}

/* ===== cabecera, logo y pie (v0.3) */
.af-folly .af-sr,.af-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.af-top{position:sticky;top:0;z-index:40;max-width:none;padding:10px max(16px,calc(50vw - 560px));gap:18px;
  background:color-mix(in srgb,var(--af-bg) 92%,transparent);backdrop-filter:blur(6px);border-bottom:3px solid var(--af-ink)}
.af-brand{display:inline-flex;align-items:center;line-height:0}
.af-logo-wrap{position:relative;display:inline-block;line-height:0}
.af-logo{display:block;height:34px}
.af-logo-img{height:34px;width:auto}
.af-logo.is-live~.af-logo-img,.af-logo-wrap:has(.af-logo.is-live) .af-logo-img{display:none}
.af-logo:not(.is-live){position:absolute;inset:0;opacity:0}
.af-nav{display:flex;gap:6px;margin-left:auto}
.af-nav a{font:900 13px/1 var(--af-display);letter-spacing:.08em;text-transform:uppercase;color:var(--af-cream)!important;text-decoration:none!important;
  padding:9px 12px;border:3px solid transparent;border-radius:8px}
.af-nav a:hover,.af-nav a:focus-visible{border-color:var(--af-ink);background:var(--af-butter);color:var(--af-ink)!important;box-shadow:3px 4px 0 var(--af-ink)}
@media (max-width:560px){.af-logo,.af-logo-img{height:24px}.af-nav a{padding:8px 7px;font-size:11.5px}.af-top{gap:8px}}

.af-foot{display:flex;gap:28px;align-items:center;max-width:1000px;border-top:3px solid var(--af-ink);margin-top:72px;padding-top:36px}
.af-logo-foot .af-logo,.af-logo-foot .af-logo-img{height:110px}
.af-foot-txt p{margin:0 0 10px}
@media (max-width:640px){.af-foot{flex-direction:column;align-items:flex-start}}

/* ===== portada */
.af-folly .af-hero{text-align:center;padding-top:28px}
.af-hero-logo .af-logo,.af-hero-logo .af-logo-img{height:clamp(150px,34vw,280px);margin:0 auto}
.af-hero-logo{display:flex;justify-content:center}
.af-folly .af-tagline{font:900 clamp(22px,4.6vw,34px)/1.15 var(--af-display);color:var(--af-cream);margin:18px 0 0}
.af-chip{display:inline-block;margin-top:16px;font:900 13px/1 var(--af-display);letter-spacing:.12em;text-transform:uppercase;
  background:var(--af-cream);color:var(--af-ink);border:3px solid var(--af-ink);border-radius:8px;padding:10px 14px;box-shadow:5px 6px 0 var(--af-ink);transform:rotate(-1.5deg)}
.af-hero .af-row{justify-content:center}
.af-btn{text-decoration:none!important;display:inline-block}
a.af-btn{color:var(--af-ink)!important}
.af-theatre{position:relative;margin:34px 0 0;border:5px solid var(--af-ink);border-radius:14px;box-shadow:10px 11px 0 var(--af-shadow);overflow:hidden}
.af-theatre canvas{display:block;width:100%;aspect-ratio:16/9;cursor:pointer;touch-action:manipulation}
@media (max-width:640px){.af-theatre canvas{aspect-ratio:1/1}}

/* el programa: cada Folly es una entrada de cartelera */
.af-programme{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:24px}
.af-bill{display:flex;flex-direction:column;background:var(--af-cream);color:var(--af-ink);border:4px solid var(--af-ink);border-radius:12px;
  box-shadow:8px 9px 0 var(--af-shadow);overflow:hidden;text-decoration:none!important;transition:transform .15s steps(3)}
a.af-bill:hover{transform:rotate(-1deg) translateY(-4px)}
.af-bill canvas{display:block;width:100%;aspect-ratio:4/3;border-bottom:4px solid var(--af-ink)}
.af-bill-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.af-bill-no{font:900 12px/1 var(--af-display);letter-spacing:.14em;text-transform:uppercase;color:var(--af-red)}
.af-bill-title{font:900 22px/1.05 var(--af-display);text-transform:uppercase;color:var(--af-ink)}
.af-bill-txt{font:500 15px/1.45 var(--af-text);color:var(--af-ink);margin:0}
.af-bill-go{margin-top:auto;padding-top:8px;font:900 14px/1 var(--af-display);text-transform:uppercase;letter-spacing:.06em;color:var(--af-red)}
.af-bill.soon{opacity:.82}
.af-bill.soon .af-bill-go{color:var(--af-teal-d)}

/* la promesa: tres entradas de teatro */
.af-tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:24px}
.af-ticket{position:relative;background:var(--af-butter);color:var(--af-ink);border:4px solid var(--af-ink);border-radius:10px;padding:16px 18px 18px;box-shadow:6px 7px 0 var(--af-shadow)}
.af-ticket:nth-child(2){background:var(--af-teal-l);transform:rotate(1deg)}
.af-ticket:nth-child(3){background:var(--af-cream);transform:rotate(-1deg)}
.af-ticket::before,.af-ticket::after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--af-bg);border:4px solid var(--af-ink)}
.af-ticket::before{left:-13px}.af-ticket::after{right:-13px}
.af-ticket h3{font:900 18px/1.1 var(--af-display)!important;text-transform:uppercase;margin:0 0 6px!important;color:var(--af-ink)!important}
.af-ticket p{margin:0;font-size:15px;line-height:1.45}
.af-folly .af-kicker{margin-top:64px}
.af-folly .af-kicker + h2,.af-folly .af-kicker + .wp-block-heading{margin-top:2px}
body:has(.af-hero) .af-folly{max-width:1040px}
body:has(.af-hero) .af-folly > p:not([class]){max-width:680px}
.af-hero .af-theatre,.af-hero .af-row{max-width:880px;margin-left:auto;margin-right:auto}
.af-video .af-play{left:auto;top:auto;right:16px;bottom:16px;transform:none}

/* ===== Reaction Time Test */
.af-rt canvas{aspect-ratio:16/10}
@media (max-width:640px){.af-rt canvas{aspect-ratio:1/1}}
.af-rt-big{position:absolute;top:14px;right:14px;font:900 clamp(26px,6vw,46px)/1 var(--af-display);text-transform:uppercase;pointer-events:none;
  background:var(--af-cream);color:var(--af-ink);border:4px solid var(--af-ink);border-radius:10px;padding:10px 16px;box-shadow:6px 7px 0 var(--af-ink);transform:rotate(2deg)}
.af-rt-big.wait{background:var(--af-red);color:var(--af-cream)}
.af-rt-big.go{background:var(--af-butter);transform:rotate(-3deg) scale(1.08)}
.af-rt-big.early{background:var(--af-red);color:var(--af-cream);transform:rotate(-4deg)}
.af-rt-big.done{background:var(--af-teal-l)}
.af-rt-rounds{display:flex;flex-wrap:wrap;gap:8px 22px}
.af-rt-result{margin-top:18px;background:var(--af-cream);color:var(--af-ink);border:4px solid var(--af-ink);border-radius:12px;padding:16px 18px;box-shadow:8px 9px 0 var(--af-shadow)}
.af-folly .af-rt-result h3{font:900 20px/1.1 var(--af-display);text-transform:uppercase;margin:0 0 10px;color:var(--af-ink)}
.af-rt-bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.af-rt-bars li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;font:600 14px/1.3 var(--af-text)}
.af-rt-bars .af-rt-lab{grid-column:1/-1}
.af-rt-bars .af-rt-bar{display:block;height:20px;background:var(--af-teal-d);border:3px solid var(--af-ink);border-radius:4px;min-width:8px}
.af-rt-bars li.you .af-rt-bar{background:var(--af-butter)}
.af-rt-bars li.hic .af-rt-bar{background:var(--af-red)}
.af-rt-bars li b{color:var(--af-ink)!important;font:900 15px/1 var(--af-display)}
.af-rt-result .af-note{color:var(--af-ink);opacity:.8}
/* cabecera estrecha: logo apilado (el de una línea no cabe con el menú) */
.af-nav a{white-space:nowrap}
.af-logo-narrow{display:none}
@media (max-width:620px){
  .af-logo-wide{display:none}
  .af-logo-narrow{display:inline-block}
  .af-logo-narrow .af-logo,.af-logo-narrow .af-logo-img{height:46px}
  .af-nav{gap:0}
  .af-nav a{padding:8px 6px;font-size:11px;letter-spacing:.05em}
}
.af-programme{grid-template-columns:repeat(auto-fill,minmax(230px,330px))}
@media (max-width:420px){.af-pill{font-size:10.5px;padding:6px 8px}.af-logo-narrow .af-logo,.af-logo-narrow .af-logo-img{height:40px}}
/* F1: el rótulo va abajo para no tapar el pórtico de luces */
#f1-big{top:auto;bottom:14px}