/* ============================================================
   ACTORES S.C.G — CENTRO CAMALEÓN (centro-camaleon.html)
   Dos modalidades: Cartelera (eventos) + Reserva de espacios.
   Se carga junto a site.css
   ============================================================ */

/* ====== HERO ====== */
.chero{position:relative; min-height:78vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background-size:cover; background-position:center; background-color:#0a0a08}
.chero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,17,15,.25), rgba(18,17,15,.88)); z-index:1}
.chero .wrap{position:relative; z-index:2; width:100%; padding-bottom:58px; padding-top:130px}
.chero .crumb{color:rgba(255,255,255,.8)}
.chero .crumb a:hover{color:#fff}
.chero .lab{color:rgba(255,255,255,.85)}
.chero h1{font-family:var(--font-display); font-weight:600; font-size:clamp(40px,6.2vw,92px); line-height:.98; letter-spacing:-.02em; margin:0; max-width:16ch}
.chero h1 em{font-style:italic; color:var(--accent)}
.chero .clead{margin-top:20px; max-width:54ch; font-size:19px; font-weight:500; color:rgba(255,255,255,.86)}
.chero-cta{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap}

/* ====== INTRO ====== */
.cintro{background:var(--white)}
.cintro p{font-family:var(--font-display); font-weight:400; font-size:clamp(24px,3.2vw,40px); line-height:1.2; letter-spacing:-.01em; margin:0; max-width:24ch}
.cintro p em{font-style:italic; color:var(--accent)}

/* ====== DOS MODALIDADES ====== */
.modes{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px}
.mode{position:relative; border-radius:22px; overflow:hidden; min-height:300px; display:flex; align-items:flex-end; color:#fff; padding:clamp(28px,3.5vw,40px)}
.mode::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,17,15,.2) 35%, rgba(18,17,15,.9)); z-index:1}
.mode .m-in{position:relative; z-index:2; transition:transform .4s var(--ease)}
.mode:hover .m-in{transform:translateY(-4px)}
.mode .m-lab{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.85)}
.mode h3{font-family:var(--font-display); font-weight:500; font-size:clamp(24px,3vw,34px); margin:8px 0 8px; line-height:1.05}
.mode p{font-size:15.5px; color:rgba(255,255,255,.85); margin:0 0 16px; max-width:38ch}
.mode .m-go{font-size:14px; font-weight:600; border-bottom:1px solid var(--accent); padding-bottom:3px}
@media(max-width:760px){.modes{grid-template-columns:1fr}}

/* ====== CARTELERA (tipo cine) ====== */
.cartelera{background:var(--paper)}
.sec-note{font-size:14px; color:var(--g2); margin:-30px 0 30px}
.cartelera-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.film{border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .45s var(--ease), box-shadow .45s, border-color .3s}
.film:hover{transform:translateY(-6px); border-color:transparent; box-shadow:0 34px 60px -34px rgba(0,0,0,.4)}
.film .poster{position:relative; aspect-ratio:2/3; background-size:cover; background-position:center; background-color:#171715}
.film .badge{position:absolute; top:12px; left:12px; z-index:2; background:rgba(18,17,15,.82); color:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:20px; backdrop-filter:blur(4px)}
.film .fbody{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1}
.film h4{font-family:var(--font-display); font-weight:500; font-size:17px; line-height:1.18; margin:0 0 6px}
.film .fhost{font-size:13px; color:var(--g2); margin:0 0 8px}
.film .fwhen{font-size:12.5px; color:#3a3a37; font-weight:500; margin:0 0 12px}
.cupos{display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:var(--g2); margin:0 0 14px}
.cupos .bar{flex:1; height:5px; border-radius:3px; background:var(--orange-100); overflow:hidden}
.cupos .bar i{display:block; height:100%; background:var(--accent); border-radius:3px}
.cupos.last{color:var(--orange-700)}
.cupos.free{color:var(--s-green,#6E6E6E)}
.fbtn{display:block; text-align:center; margin-top:auto; background:var(--accent); color:#fff; font-weight:600; font-size:14px; padding:12px; border-radius:10px; transition:background .25s}
.fbtn:hover{background:var(--orange-700)}
.film.sold .poster{filter:grayscale(1); opacity:.62}
.film.sold .fbtn{background:#e7e5e0; color:var(--g2); pointer-events:none}
@media(max-width:960px){.cartelera-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.cartelera-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.cartelera-grid{grid-template-columns:1fr}}

/* ====== ESPACIOS ====== */
.spaces{background:var(--white)}
.spaces-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.space{border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; transition:transform .45s var(--ease), box-shadow .45s, border-color .3s}
.space:hover{transform:translateY(-5px); border-color:transparent; box-shadow:0 34px 60px -34px rgba(0,0,0,.35)}
.space .sph{aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#171715; position:relative}
.space .scap{position:absolute; top:14px; right:14px; z-index:2; background:rgba(255,255,255,.92); color:var(--ink); font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px}
.space .sbody{padding:28px 30px 30px; display:flex; flex-direction:column; flex:1}
.space h3{font-family:var(--font-display); font-weight:500; font-size:23px; margin:0 0 8px}
.space p{font-size:15px; color:#3a3a37; margin:0 0 18px}
.stags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.stags span{font-size:12px; font-weight:600; color:var(--orange-700); background:var(--orange-100); padding:5px 12px; border-radius:20px}
.sbtn{margin-top:auto; display:inline-flex; align-items:center; gap:9px; align-self:flex-start; background:var(--ink); color:#fff; font-weight:600; font-size:14px; padding:13px 22px; border-radius:44px; transition:background .25s, transform .3s var(--ease)}
.sbtn:hover{background:#000; transform:translateY(-2px)}
.sbtn svg{width:15px; height:15px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round}
@media(max-width:760px){.spaces-grid{grid-template-columns:1fr}}

/* ====== VISÍTANOS ====== */
.visit{background:var(--paper)}
.visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch}
.vcard{background:#fff; border:1px solid var(--line); border-radius:22px; padding:44px clamp(28px,4vw,48px)}
.vcard h2{margin:0 0 22px}
.vrow{display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line)}
.vrow:first-of-type{border-top:none}
.vrow .vic{width:42px; height:42px; flex:0 0 auto; border-radius:12px; background:var(--orange-100); color:var(--orange-700); display:flex; align-items:center; justify-content:center}
.vrow .vic svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.vrow b{font-family:var(--font-display); font-weight:600; font-size:17px; display:block; margin-bottom:2px}
.vrow span{font-size:14.5px; color:#555; line-height:1.5}
.vcard .btn{margin-top:26px}
.visit-photo{border-radius:22px; overflow:hidden; min-height:360px}
@media(max-width:820px){.visit-grid{grid-template-columns:1fr} .visit-photo{min-height:260px}}

/* ====== CTA ====== */
.ccta{background:var(--ink); color:#fff; text-align:center; overflow:hidden}
.ccta .spiral{left:50%; top:-140px; width:320px; height:320px; opacity:.1; transform:translateX(-50%) rotate(var(--spin))}
.ccta .spiral path{stroke:var(--accent)}
.ccta .wrap{position:relative; z-index:2}
.ccta h2{color:#fff; font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4vw,50px); margin:0 0 14px}
.ccta h2 em{font-style:italic; color:var(--accent)}
.ccta p{color:rgba(255,255,255,.8); max-width:46ch; margin:0 auto 30px; font-size:18px}
.ccta .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}