/*
Theme Name: Plot Theater
Description: Tema a medida de Plot Theater con talleres, funciones, galerías y contenido editable.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: plot-theater
License: GPL-2.0-or-later
*/

:root{
  --black:#0B0B0B; --ink:#141414; --paper:#EDEDE8; --mute:#8C8C86;
  --teal:#0E6158; --teal-lt:#4BC8B4;
  --violet:#4B22C7; --violet-lt:#A98CFF;
  --sage:#C9CFC2;
  --mag:#FF2EC4; --cyan:#22E0FF; --lime:#A8FF3E; --yellow:#FFE23E;
  --edge:rgba(237,237,232,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--paper);font-family:'Archivo',system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
/* si un archivo no aparece, en vez del ícono roto se ve un bloque neutro */
img.failed{visibility:hidden}
.poster:has(img.failed),.kidsPh:has(img.failed),.galTrack figure:has(img.failed),.heroBg:has(img.failed){
  background:repeating-linear-gradient(135deg,#171716 0 10px,#1E1E1C 10px 20px)}
/* etiqueta de aviso sobre la imagen que no pudo cargar, para detectarla fácil */
.heroBg:has(img.failed)::after,.poster:has(img.failed)::after,.kidsPh:has(img.failed)::after,.galTrack figure:has(img.failed)::after{
  content:'Falta imagen: ' attr(data-missing);position:absolute;inset:auto 10px 10px 10px;font-size:.62rem;
  letter-spacing:.05em;color:#8C8C86;font-family:'Archivo',sans-serif;text-align:center;z-index:1}
.grain{position:fixed;inset:-50%;z-index:9999;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gm 700ms steps(3) infinite}
@keyframes gm{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
.wrap{max-width:1560px;margin:0 auto;padding:0 40px}
/* tipografía condensada bold de los afiches (Vol. II, etc.) para todos los títulos */
.display{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.9}
.mono{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

/* HEADER */
header{position:sticky;top:0;z-index:900;background:#000;border-bottom:1px solid var(--edge)}
.bar{display:flex;align-items:center;gap:34px;padding:12px 40px;max-width:1560px;margin:0 auto}
/* el PNG del logo ya tiene fondo negro igual que el header: se muestra entero, sin recortar */
.logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.logo img{height:92px;width:92px;object-fit:contain;display:block}
.logo img.failed{display:none}
.logo .txt{display:none;flex-direction:column;justify-content:center;
  font-family:'Fredoka',sans-serif;line-height:.82;color:var(--paper)}
.logo .txt b{font-weight:700;font-size:1.42rem;letter-spacing:.02em}
.logo .txt span{font-weight:600;font-size:.9rem;letter-spacing:.06em}
.logo img.failed + .txt{display:flex}
nav{display:flex;gap:24px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav a{color:var(--paper);text-decoration:none;font-size:.83rem;font-weight:500;opacity:.72;transition:.2s}
nav a:hover{opacity:1;color:var(--teal-lt)}
.pill{background:var(--paper);color:var(--black);opacity:1;padding:9px 17px;border-radius:2px;font-weight:700;font-size:.78rem;text-decoration:none;flex-shrink:0;transition:.2s}
nav a.pill:hover{background:var(--teal-lt);color:var(--black)}
.menuBtn{display:none;background:none;border:1px solid var(--edge);width:42px;height:42px;border-radius:2px;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.menuBtn span{width:20px;height:2px;background:var(--paper);display:block;transition:transform .25s,opacity .25s}
header.nav-open .menuBtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open .menuBtn span:nth-child(2){opacity:0}
header.nav-open .menuBtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* HERO — foto fija de fondo, full-bleed, detrás del título */
.hero{position:relative;overflow:hidden;min-height:min(88vh,840px);display:flex;align-items:center;padding:120px 0 84px}
.heroBg{position:absolute;inset:0;z-index:0}
.heroBg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.5)}
.heroOverlay{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(11,11,11,.4) 0%,rgba(11,11,11,.58) 45%,rgba(11,11,11,.94) 100%),
    radial-gradient(ellipse 70% 55% at 50% 32%,rgba(11,11,11,.05),rgba(11,11,11,.6) 75%)}
.heroInner{position:relative;z-index:2;width:100%;text-align:center}
.hero .meta{display:flex;justify-content:center;gap:14px;color:#C7C7C1;margin-bottom:30px;flex-wrap:wrap;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero .meta span+span::before{content:'·';margin-right:14px;opacity:.55}
.hero h1{font-size:clamp(3.2rem,10.5vw,7.6rem);color:var(--paper);text-shadow:0 8px 40px rgba(0,0,0,.55)}
.hero .heroSub{font-size:clamp(1.3rem,3.6vw,2.3rem);color:var(--paper);margin-top:12px;letter-spacing:.01em;text-shadow:0 6px 28px rgba(0,0,0,.55)}
.hero .lede{font-size:1.05rem;color:#DADAD4;max-width:56ch;margin:28px auto 0;text-shadow:0 3px 18px rgba(0,0,0,.6)}
.hero .lede strong{color:var(--paper)}
.heroBtns{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;justify-content:center}

/* GALERÍA / SLIDESHOW chico (posters en la sección talleres, si se usara) */
.slideshow{position:relative;aspect-ratio:4/5;overflow:hidden;background:#161615;border:1px solid var(--edge)}
.slideshow .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease,transform 6s linear;transform:scale(1.06)}
.slideshow .slide.on{opacity:1;transform:scale(1)}
.slideshow .slide img{width:100%;height:100%;object-fit:cover}

/* MARQUEE */
.marquee{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);overflow:hidden;background:var(--ink);margin-top:64px}
.mtrack{display:flex;white-space:nowrap;animation:slide 32s linear infinite;padding:14px 0}
.mtrack span{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:1.5rem;padding:0 24px;opacity:.9}
.mtrack i{color:var(--teal-lt);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

section{padding:104px 0}
.secHead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;border-bottom:1px solid var(--edge);padding-bottom:20px;margin-bottom:48px;flex-wrap:wrap}
.secHead h2{font-size:clamp(2.4rem,5.6vw,5rem)}
.secHead .note{color:var(--mute);max-width:36ch;font-size:.92rem}
.secHead.center{justify-content:center;text-align:center;padding-top:24px;padding-bottom:40px;margin-bottom:56px}

/* TALLERES */
.taller{display:grid;grid-template-columns:300px 1fr;gap:40px;padding:40px 0;border-bottom:1px solid var(--edge);align-items:start;transition:background .35s}
.taller:hover{background:rgba(255,255,255,.022)}
.poster{position:relative;overflow:hidden;background:#171716;aspect-ratio:4/5;border:1px solid var(--edge);cursor:pointer}
.poster::after{content:'+';position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(11,11,11,.55);color:var(--paper);display:grid;place-items:center;font-size:1.2rem;
  opacity:0;transition:opacity .25s;backdrop-filter:blur(4px)}
.poster:hover::after{opacity:1}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.taller:hover .poster img{transform:scale(1.05)}
.taller h3{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:12px}
.taller h3 em{font-style:normal;display:block;font-size:.4em;opacity:.72;margin-top:6px;letter-spacing:0}
.tag{display:inline-block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:100px;margin-bottom:14px}
.t-teal{background:var(--teal);color:#DFFFF8}
.t-violet{background:var(--violet);color:#EDE6FF}
.t-sage{background:var(--sage);color:#1D2A24}
.t-kids{background:linear-gradient(90deg,var(--mag),var(--yellow));color:#0B0B0B}
.t-mag{background:var(--mag);color:#2B0A22}
.facts{display:flex;flex-wrap:wrap;gap:0 32px;margin-bottom:18px}
.facts div{padding:9px 0}
.facts dt{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.facts dd{font-size:.98rem;font-weight:600}
.taller p{color:#B9B9B3;font-size:.96rem;margin-bottom:18px;max-width:60ch}
.taller p strong{color:var(--paper);font-weight:600}
.cta{display:inline-flex;align-items:center;gap:9px;text-decoration:none;background:var(--paper);color:var(--black);font-weight:700;font-size:.79rem;padding:13px 21px;border-radius:2px;transition:.18s}
.cta:hover{transform:translateX(4px)}
.cta.teal:hover{background:var(--teal-lt)}
.cta.violet:hover{background:var(--violet-lt)}
.cta.sage:hover{background:var(--sage)}
.cta.kids{background:var(--lime)}
.cta.kids:hover{background:var(--cyan)}
.cta.ghost{background:transparent;color:var(--paper);border:1px solid var(--edge)}
.cta.ghost:hover{border-color:var(--paper);background:transparent}
.cta.mag:hover{background:var(--mag)}
.badge{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-lt);font-weight:700;margin-bottom:8px;display:block}

/* FUNCIONES */
.funcion{display:grid;grid-template-columns:220px 1fr;gap:34px;padding:34px 0;border-bottom:1px solid var(--edge);align-items:start}
.funcion:last-child{border-bottom:0}
.funcion .poster{max-width:220px}
.funcion h3{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:2px 0 16px}
.funcion p{color:#B9B9B3;font-size:.96rem;max-width:72ch;margin-bottom:12px}
@media(max-width:860px){.funcion{grid-template-columns:1fr;gap:18px}.funcion .poster{max-width:220px}}

/* GALERIA */
.gal{padding:96px 0 104px;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.galRail{overflow:hidden;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.galRail.drag{cursor:grabbing}
.galTrack{display:flex;gap:18px;animation:gscroll 55s linear infinite;width:max-content}
.galRail:hover .galTrack,.galRail.drag .galTrack{animation-play-state:paused}
@keyframes gscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.galTrack figure{width:280px;flex:0 0 auto;overflow:hidden;background:#171716;aspect-ratio:4/5;border:1px solid var(--edge);cursor:pointer;position:relative}
.galTrack img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s}
.galTrack figure:hover img{transform:scale(1.06)}

/* LIGHTBOX */
.lb{position:fixed;inset:0;z-index:9998;background:rgba(8,8,8,.94);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:52px 20px}
.lb.on{display:flex}
.lb img{max-width:min(92vw,640px);max-height:86vh;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb .x,.lb .nav{position:absolute;background:transparent;border:1px solid var(--edge);color:var(--paper);cursor:pointer;font-size:1.1rem;width:46px;height:46px;display:grid;place-items:center;transition:.2s}
.lb .x:hover,.lb .nav:hover{border-color:var(--paper);background:rgba(255,255,255,.06)}
.lb .x{top:22px;right:22px}
.lb .prev{left:22px;top:50%;transform:translateY(-50%)}
.lb .next{right:22px;top:50%;transform:translateY(-50%)}
.lb .cnt{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--mute);font-size:.72rem;letter-spacing:.2em}
.lb.single .prev,.lb.single .next{display:none}

/* KIDS — mismo mundo que el logo: fondo blanco, formas y tipografía bubble */
.kids{background:#FFFFFF;color:#111;text-align:center;position:relative;overflow:hidden}
.kids .secHead{display:block;border:0;padding:0;margin-bottom:34px;text-align:center}
.kids .secHead .note{color:#6B6B66;max-width:44ch;margin:16px auto 0;font-size:1rem}
.kidsLogo{display:flex;justify-content:center}
.kidsLogo img{height:clamp(120px,21vw,240px);width:auto}
.kidsGrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;text-align:left}
.kids p{color:#3D3D39;font-size:1.04rem;margin:18px 0 28px;max-width:46ch}
.kids .facts dt{color:#8A8A84;font-family:'Fredoka',sans-serif;letter-spacing:.12em}
.kids .facts dd{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.12rem}
.kids .tag{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:.08em;font-size:.72rem;padding:8px 16px}
.kids .cta{font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;border-radius:100px;padding:15px 28px;letter-spacing:.01em}
.kidsPh{position:relative;aspect-ratio:4/5;overflow:hidden;background:#F2F2EE;border-radius:26px}
.kidsPh img{width:100%;height:100%;object-fit:cover}
.kidsGal{margin-top:64px}
.kidsGal .note{text-align:center;color:#6B6B66;font-size:.95rem;margin-bottom:24px}
.kidsGal .galTrack figure{border-radius:22px;background:#F2F2EE;border:0}
.kidsGal .galTrack figure:hover img{transform:scale(1.04)}
/* puntitos de colores como los del logo */
.kids .blob{position:absolute;border-radius:50%;opacity:.9;pointer-events:none}
.kids .b1{width:16px;height:16px;background:var(--mag);top:16%;left:7%}
.kids .b2{width:22px;height:22px;background:var(--cyan);bottom:19%;left:4%}
.kids .b3{width:14px;height:14px;background:var(--lime);top:12%;right:9%}
.kids .b4{width:19px;height:19px;background:var(--yellow);bottom:13%;right:6%}
@media(max-width:1080px){.kids .blob{display:none}}

/* ESPACIO */
.espacioGrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.espacioPh{position:relative;overflow:hidden;aspect-ratio:4/5;background:#171716;border:1px solid var(--edge);cursor:pointer}
.espacioPh img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.espacioPh:hover img{transform:scale(1.05)}
.espacioTxt{grid-column:1 / -1;padding-top:14px}
.espacioTxt p{color:#B9B9B3;max-width:70ch;font-size:.98rem;margin-bottom:14px}

/* CONTACTO */
.contacto{text-align:center;padding:124px 0}
.contacto .big{font-size:clamp(2.6rem,7.6vw,6.4rem);margin-bottom:28px}
.contacto a.mail{color:var(--teal-lt);text-decoration:none;font-size:clamp(1rem,2.3vw,1.45rem);font-weight:600;border-bottom:1px solid rgba(75,200,180,.4);padding-bottom:4px}
.contacto a.mail:hover{color:var(--paper);border-color:var(--paper)}
.socials{display:flex;gap:18px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.socials a{color:var(--paper);text-decoration:none;font-size:.82rem;opacity:.66;border:1px solid var(--edge);padding:10px 18px}
.socials a:hover{opacity:1;border-color:var(--paper)}

footer{border-top:1px solid var(--edge);padding:24px 40px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--mute);font-size:.74rem;max-width:1560px;margin:0 auto}
footer a{color:var(--mute);text-decoration:none}
footer a:hover{color:var(--paper)}

/* ---------- RESPONSIVE ---------- */

/* tablets */
@media(max-width:1080px){
  .wrap,.bar,footer{padding-left:22px;padding-right:22px}
  .kidsGrid{grid-template-columns:1fr;gap:32px}
  .espacioGrid{gap:14px}
  .taller{grid-template-columns:1fr;gap:18px;padding:36px 0}
  .poster{max-width:320px}
  section{padding:70px 0}
  .logo img{height:78px;width:78px}
  .hero{min-height:min(78vh,680px);padding:100px 0 64px}
}

/* menú hamburguesa: nav se convierte en panel desplegable */
@media(max-width:860px){
  .bar{gap:14px;justify-content:space-between}
  .menuBtn{display:flex}
  nav{position:absolute;top:100%;left:0;right:0;background:#000;flex-direction:column;
    align-items:stretch;gap:0;max-height:0;overflow:hidden;transition:max-height .35s ease;
    border-bottom:1px solid var(--edge);margin-left:0;padding:0 22px}
  header.nav-open nav{max-height:480px;padding:8px 22px 22px}
  nav a{padding:15px 0;opacity:1;border-bottom:1px solid var(--edge);font-size:.98rem;width:100%;text-align:left}
  nav a.pill{border-bottom:0;text-align:center;border-radius:6px;padding:15px 0;margin-top:14px;font-size:.9rem}
}

/* teléfonos */
@media(max-width:640px){
  .wrap,.bar,footer{padding-left:18px;padding-right:18px}
  section{padding:56px 0}
  .hero{min-height:auto;padding:88px 0 52px}
  .hero h1{font-size:18vw}
  .hero .meta{font-size:.58rem;gap:8px;margin-bottom:22px}
  .hero .meta span+span::before{margin-right:8px}
  .hero .lede{margin-top:20px}
  .marquee{margin-top:44px}
  .mtrack span{font-size:.98rem;padding:0 16px}
  .secHead{margin-bottom:34px;padding-bottom:16px}
  .taller{padding:30px 0}
  .poster{max-width:100%}
  .facts{gap:0 22px}
  .gal{padding:64px 0 70px}
  .galTrack{gap:12px}
  .galTrack figure{width:190px}
  .kidsGrid{text-align:center}
  .kids p{margin-left:auto;margin-right:auto}
  .espacioGrid{grid-template-columns:1fr}
  .contacto{padding:88px 0}
  .socials{gap:12px}
  .socials a{padding:9px 14px;font-size:.78rem}
  footer{flex-direction:column;gap:8px;text-align:center}
  .lb{padding:0}
  .lb .nav{width:38px;height:38px;font-size:1rem}
  .lb .prev{left:8px}
  .lb .next{right:8px}
  .lb .x{top:12px;right:12px;width:38px;height:38px}
}

/* pantallas muy chicas */
@media(max-width:380px){
  .logo img{height:60px;width:60px}
  nav a.pill,.pill{padding:8px 14px;font-size:.72rem}
  .price{font-size:clamp(1.9rem,10vw,2.8rem)}
  .galTrack figure{width:160px}
  .taller h3{font-size:clamp(1.3rem,7vw,1.8rem)}
}

/* Integración WordPress y accesibilidad. */
body.admin-bar header{top:32px}
@media(max-width:782px){body.admin-bar header{top:46px}}
@media(max-width:600px){body.admin-bar header{top:0}}
.rv{opacity:1;transform:none}.plot-js .rv:not(.in){opacity:0;transform:translateY(28px)}
:focus-visible{outline:3px solid var(--teal-lt);outline-offset:5px}
.plot-form{margin:40px auto 0;max-width:760px;text-align:left}
.plot-form input,.plot-form textarea,.plot-form select{max-width:100%;padding:12px;font:inherit}
.taller>div,.funcion>div{min-width:0}.taller h3,.funcion h3,.mail{overflow-wrap:anywhere}
.skip-link{position:fixed;left:12px;top:-100px;z-index:10000;background:white;color:black;padding:12px}.skip-link:focus{top:10px}
section[id],div[id="galeria"],#plot-form{scroll-margin-top:120px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.plot-js .rv:not(.in){opacity:1;transform:none}}