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

/* ====== HERO ====== */
/* `svh` y no `vh`: en el teléfono `vh` mide la ventana con la barra del
   navegador retraída, que es un alto que no existe hasta que uno hace scroll,
   así que un 78vh se comía en realidad más de un 90% de lo que se ve. Con
   `svh` el 78% es el 78% desde el primer momento. Las guardas encogen con la
   ventana, como en el resto de heros del sitio. */
.chero{position:relative; min-height:78svh; 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(14,14,12,.25), rgba(14,14,12,.88)); z-index:1}
.chero .wrap{position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,6.2svh,58px); padding-top:clamp(104px,14svh,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:min(clamp(40px,6.2vw,92px), 12svh); 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(14,14,12,.2) 35%, rgba(14,14,12,.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}}

/* ============================================================
   FONDO DE LAS SECCIONES

   La trama de puntos ya no se dibuja aquí: la receta es del sitio entero y
   vive en site.css. Cada sección la pide con `trama` más su variante, y aquí
   solo queda lo propio de esta página: la voluta del isotipo y los dos
   degradés que cosen el cambio de fondo entre una sección y la siguiente.

   La voluta sí se reparte, porque no es textura sino una pieza: si sale en
   todas las secciones deja de leerse como firma. Va en espacios y en
   visítanos, que tienen aire; no en la cartelera, que es la más cargada de la
   página y cuyo único momento tranquilo es la franja del titular.
   ============================================================ */
.cartelera, .spaces, .visit{overflow:hidden}

/* La voluta va en tinta y gira con el scroll, como las demás del sitio.
   Se selecciona siempre con la sección por delante: nunca por `.spiral` a
   secas, que le impondría a una el tamaño de otra. */
.voluta-fondo path{stroke:var(--ink)}

/* ====== CARTELERA (tipo cine) ====== */
.cartelera{background:var(--paper)}

/* Un rescoldo del naranja de la portada, para que el papel no entre plano
   justo debajo del bloque de color. */
.cartelera::after{content:""; position:absolute; z-index:0; pointer-events:none; inset:0 0 auto; height:520px;
  background:radial-gradient(58% 100% at 14% -10%, rgba(255,81,21,.075), transparent 68%)}

.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{position:relative; 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)}
/* Toda la tarjeta es clicable: esta capa cubre el fondo y va al detalle */
.film .film-link{position:absolute; inset:0; z-index:1}
.film .poster{position:relative; aspect-ratio:2/3; overflow:hidden; background-color:#171715}
/* El afiche va a color pleno y solo hace zoom al pasar el cursor */
.film .poster .pimg{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s var(--ease)}
.film:hover .poster .pimg{transform:scale(1.07)}
.film .badge{position:absolute; top:12px; left:12px; z-index:2; pointer-events:none; background:rgba(14,14,12,.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{position:relative; padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; pointer-events:none}
.film h4{font-family:var(--font-display); font-weight:500; font-size:17px; line-height:1.18; margin:0 0 8px}
/* Retrato del tallerista, para que se sepa quién dicta */
.film .fhost{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--ink); margin:0 0 10px; line-height:1.2}
.film .fhost small{display:block; font-size:11px; font-weight:500; color:var(--g2)}
.film .fava{flex:0 0 auto; width:34px; height:34px; border-radius:50%; object-fit:cover; background:#ece9e2}
.film .fava.sin-foto{display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--g2); letter-spacing:.02em}
.film .fwhen{font-size:12.5px; color:#3a3a37; font-weight:500; margin:0 0 4px}
/* Dónde se hace: sale del catálogo de salas, así que aquí siempre dice lo mismo
   que la agenda. Va en gris y pequeño, es un dato de apoyo. */
.film .fdonde{font-size:12px; color:var(--g2); font-weight:500; margin:0}
/* El plazo para postularse. Va en bloque y con las dos fechas en renglones
   propios porque se leen comparándolas —cuándo abre, cuándo cierra— y en una
   sola línea corrida la segunda se pierde. El fondo lo despega del resto de
   datos de la tarjeta: no es un dato más de la actividad, es un plazo. */
.film .fpostu{display:flex; flex-direction:column; gap:1px; margin:8px 0 0; padding:8px 10px;
  border-radius:8px; background:#F6F4EF; border:1px solid var(--line);
  font-size:11.5px; color:#3a3a37; font-weight:500}
.film .fpostu b{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--g2); margin-bottom:2px}
/* Los controles quedan por encima de la capa clicable */
.film .fbtn, .film h4 a{position:relative; z-index:2; pointer-events:auto}
/* El `margin-top:auto` que alineaba el botón vive ahora en `.ffoot`
   (camaleon.css): es el pie entero el que baja, no solo el botón. */
/* El borde va transparente y no ausente: la variante apagada de más abajo sí
   lo pinta, y sin esto ese botón mediría 2px más y rompería la fila. */
.fbtn{display:block; text-align:center; background:var(--accent); color:#fff; font-weight:600; font-size:14px; padding:12px; border:1px solid transparent; border-radius:10px; transition:background .25s, color .25s, border-color .25s}
.fbtn:hover{background:var(--orange-700)}
.film.sold .poster{filter:grayscale(1); opacity:.62}
/* Llena o ya empezada: el botón se apaga de color pero NO se desactiva. Sigue
   llevando a la ficha, que es donde se pide la lista de espera o se lee qué
   pasó. Antes quedaba muerto y la tarjeta no llevaba a ninguna parte. */
.film.sold .fbtn{background:#fff; color:var(--ink); border-color:var(--line)}
.film.sold .fbtn:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
/* El tipo lo dice el distintivo sobre el afiche, y solo ahí. Aquí vivía un
   `.film .ftipo` que repetía el tipo dentro del cuerpo y se encendía en
   móvil; se quitó junto con su marca. */

@media(max-width:960px){.cartelera-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Cartelera en móvil: la tarjeta se acuesta ----------
   A dos columnas el afiche baja de 175px de ancho y el titular se parte en
   cuatro líneas; a una columna en vertical cada tarjeta pasa de 700px de alto
   y una página de doce se vuelve interminable. Así que por debajo de 680px la
   tarjeta se acuesta: afiche a la izquierda, datos a la derecha, ~190px de alto.
   ----------------------------------------------------------------- */
@media(max-width:680px){
  .cartelera-grid{grid-template-columns:1fr; gap:14px}

  .film{flex-direction:row; align-items:stretch}
  /* El afiche llena su columna a la altura que pida el cuerpo: sin proporción
     fija no quedan huecos cuando la tarjeta crece. */
  .film .poster{flex:0 0 clamp(112px, 30%, 168px); aspect-ratio:auto; min-height:186px; align-self:stretch}
  .film .poster.sin-afiche .ini{font-size:38px}
  /* Sobre un afiche de 118px el distintivo no cabe a su tamaño normal, así
     que encoge y se pega más al canto. Antes se escondía y el tipo se
     repetía dentro del cuerpo; ahora el tipo se dice en un solo sitio y a
     todos los anchos. Los nombres largos parten en dos líneas en vez de
     desbordar: `normal` y no `nowrap`. */
  .film .badge{top:8px; left:8px; max-width:calc(100% - 16px); padding:4px 8px;
    font-size:9px; letter-spacing:.06em; line-height:1.25; white-space:normal}

  /* min-width:0 para que los títulos largos se partan en vez de desbordar. */
  .film .fbody{padding:13px 15px 14px; min-width:0}
  .film h4{font-size:15.5px; margin:0 0 7px}
  .film .fhost{gap:7px; font-size:12.5px; margin:0 0 8px}
  .film .fava{width:28px; height:28px}
  .film .fwhen{margin:0 0 2px}
  /* Con la tarjeta acostada el cuerpo se ensancha mucho en tabletas: el pie
     se topa para que no quede una barra naranja de lado a lado. */
  .film .ffoot{padding-top:10px; gap:8px; max-width:260px}
  .fbtn{padding:10px; font-size:13.5px}
  .film .festado{font-size:12.5px}
  /* El hover de escritorio no aplica al táctil y desalinea la fila. */
  .film:hover{transform:none; box-shadow:none; border-color:var(--line)}
  .film:hover .poster .pimg{transform:none}
}

/* ====== ESPACIOS ====== */
/* La voluta va abajo y a la izquierda, al lado contrario de la de visítanos.
   El lavado de papel al pie entrega la sección a Visítanos sin que se note el
   corte de blanco a papel. */
.spaces{background:var(--white)}
.spaces::after{content:""; position:absolute; z-index:0; pointer-events:none; inset:auto 0 0; height:340px;
  background:linear-gradient(transparent, var(--paper))}
.spaces .voluta-fondo{left:-200px; bottom:-190px; width:560px; height:560px; opacity:.055}
@media(max-width:760px){.spaces .voluta-fondo{width:340px; height:340px; left:-130px; bottom:-120px}}

.spaces-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
/* scroll-margin: cada sala es destino de un ancla (la trae el carrusel), y sin
   esto la tarjeta queda pegada al borde superior, medio tapada por la barra */
/* Con la sección en blanco y las tarjetas en blanco, el filo de 1px era todo lo
   que las separaba del papel. Una sombra de reposo les da el relieve que les
   faltaba sin ensuciar el aire que la sección busca. */
.space{border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; scroll-margin-top:96px;
  box-shadow:0 1px 2px rgba(14,14,12,.04), 0 18px 34px -26px rgba(14,14,12,.3);
  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}
/* Las fotos de sala vienen muy claras y el distintivo de aforo se perdía contra
   una pared blanca: un velo en la esquina donde vive lo devuelve a la vista. */
.space .sph::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(205deg, rgba(14,14,12,.34), transparent 44%)}
.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 4px}
.space p{font-size:15px; color:#3a3a37; margin:0 0 18px}
.space .smeta{font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--g2); margin:0 0 12px}
.stags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.stags span{font-size:12px; font-weight:600; color:var(--orange-700); background:var(--orange-100); padding:5px 12px; border-radius:20px}

/* Ficha técnica de la sala */
.sfeat{list-style:none; margin:0 0 20px; padding:20px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:9px 18px}
.sfeat li{position:relative; padding-left:17px; font-size:13.5px; color:#3a3a37; line-height:1.35}
.sfeat li::before{content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.snota{font-size:13px !important; color:var(--orange-700) !important; background:var(--orange-100); border-radius:12px; padding:12px 15px; margin:0 0 20px !important; line-height:1.45}

/* Precio + acción, siempre al pie de la tarjeta */
.sfoot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line)}
.sprice{display:flex; align-items:baseline; gap:7px}
.sprice b{font-family:var(--font-display); font-weight:600; font-size:27px; letter-spacing:-.01em}
.sprice span{font-size:13px; font-weight:500; color:var(--g2)}
.sbtn{display:inline-flex; align-items:center; gap:9px; 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; stroke-linejoin:round}

/* ---------- La primera sala encabeza la sección ----------
   La retícula pasa a columnas que se acomodan solas y la principal se las come
   todas: foto al costado a la altura completa de la tarjeta, cuerpo con más
   aire y tipografía más grande. Las demás quedan en una fila más menuda que le
   hace de coro, con la foto en 4/3 para que ganen presencia al ser angostas. */
.spaces-grid.con-principal.cols-2{grid-template-columns:repeat(2,1fr)}
.spaces-grid.con-principal.cols-3{grid-template-columns:repeat(3,1fr)}

.space--principal{grid-column:1 / -1; flex-direction:row; background:var(--paper); border-color:transparent;
  box-shadow:0 3px 6px rgba(14,14,12,.05), 0 40px 70px -46px rgba(14,14,12,.45)}
.space--principal .sph{flex:0 0 48%; aspect-ratio:auto; align-self:stretch; min-height:430px}
.space--principal .scap{top:18px; right:18px; font-size:13px; padding:8px 15px}
.space--principal .sbody{padding:clamp(30px,3.2vw,46px)}
.space--principal h3{font-size:clamp(26px,2.5vw,34px); margin-bottom:6px}
.space--principal > .sbody > p{font-size:16.5px}
.space--principal .sfeat{grid-template-columns:1fr 1fr}
.space--principal .sprice b{font-size:32px}

.spaces-grid.con-principal .space:not(.space--principal) .sph{aspect-ratio:4/3}
.spaces-grid.con-principal .space:not(.space--principal) .sfeat{grid-template-columns:1fr}

/* Coworking, zonas comunes y condiciones */
.extras{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px}
.extra{border:1px solid var(--line); border-radius:20px; padding:34px clamp(26px,3vw,36px); background:#fff}
.extra .exph{aspect-ratio:16/9; border-radius:14px; margin-bottom:26px; background-size:cover; background-position:center; background-color:#171715}
.extra .lab{margin:0 0 8px}
.extra .lab-sep{margin-top:30px; padding-top:26px; border-top:1px solid var(--line)}
.extra h3{font-family:var(--font-display); font-weight:500; font-size:22px; margin:0 0 10px}
.extra p{font-size:15px; color:#3a3a37; margin:0 0 16px}
.extra.cond{background:var(--ink); color:#fff; border-color:transparent; display:flex; flex-direction:column}
.extra.cond .lab{color:rgba(255,255,255,.7)}
.extra.cond h3{color:#fff}
.extra.cond .sbtn{margin-top:auto; align-self:flex-start; background:var(--accent)}
.extra.cond .sbtn:hover{background:var(--orange-700)}
.freebie{display:flex; align-items:center; gap:16px; background:var(--orange-100); border-radius:14px; padding:16px 18px; margin:0 !important}
.freebie b{font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--orange-700); flex:0 0 auto; line-height:1.1}
.freebie span{font-size:13px; color:#3a3a37; line-height:1.4}
.zonas{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.zonas li{position:relative; padding-left:28px; font-size:14.5px; color:#3a3a37}
.zonas li::before{position:absolute; left:0; top:-1px; font-weight:700}
.zonas li.si::before{content:"✓"; color:var(--orange-700)}
.zonas li.no::before{content:"✕"; color:var(--g2)}
.conds{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:14px; counter-reset:cond}
.conds li{counter-increment:cond; position:relative; padding-left:34px; font-size:14.5px; color:rgba(255,255,255,.82); line-height:1.5}
.conds li::before{content:counter(cond); position:absolute; left:0; top:0; width:23px; height:23px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center}
/* La principal deja de ir acostada antes que el resto: por debajo de 900px el
   cuerpo se queda sin ancho y la foto al costado aprieta la ficha técnica. */
@media(max-width:900px){
  .sfeat, .space--principal .sfeat{grid-template-columns:1fr}
  .space--principal{flex-direction:column}
  .space--principal .sph{flex:none; aspect-ratio:16/9; min-height:0}
}
/* El coro de tres baja de 310px por tarjeta antes de que la principal se
   enderece, así que tiene su propio corte. Los selectores repiten `.cols-N`
   porque una consulta de medio no suma especificidad y la regla de escritorio,
   con tres clases, le ganaría. */
@media(max-width:1080px){
  .spaces-grid.con-principal.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .spaces-grid,
  .spaces-grid.con-principal.cols-2,
  .spaces-grid.con-principal.cols-3,
  .extras{grid-template-columns:1fr}
  .sfoot{justify-content:flex-start}
  .spaces-grid.con-principal .space:not(.space--principal) .sph{aspect-ratio:16/9}
}

/* ====== VISÍTANOS ====== */
/* La voluta se va al costado derecho, a media altura y casi toda fuera del
   cuadro: entra por el margen que dejan la ficha y la foto. */
.visit{background:var(--paper)}
.visit .voluta-fondo{right:-190px; top:34%; width:560px; height:560px; opacity:.06}
@media(max-width:820px){.visit .voluta-fondo{width:340px; height:340px; right:-160px; top:auto; bottom:-90px}}

.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}