/* /src/styles/cine.css */
.cine {
--cine-fondo: #060407;
--cine-pared: #0c0709;
--cine-dorado: #a88a52;
--cine-texto: #e8e0cc;
--cine-apagado: #9a9486;
margin: 8px 0 28px;
background: var(--cine-fondo);
border: 2px solid #1c1216;
overflow: hidden;
}
.cine-sala {
position: relative;
padding: 58px 10% 0;
background: linear-gradient(90deg, var(--cine-pared) 0 4%, var(--cine-fondo) 4% 96%, var(--cine-pared) 96%);
isolation: isolate;
}
.cine-sala::after {
content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
background: radial-gradient(ellipse 70% 75% at 50% 42%, transparent 55%, rgba(0,0,0,.6));
}
.cine-bambalina {
position: absolute; left: 2%; right: 2%; top: 0; height: 46px; z-index: 3;
display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; box-sizing: border-box;
background: radial-gradient(circle at 50% 0, #45101c 60%, transparent 62%) 0 18px / 56px 38px repeat-x, #2a070e;
box-shadow: 0 6px 0 #05070d;
}
.cine-bambalina span {
font-family: var(--font-pixel); font-size: 10px; letter-spacing: 3px; color: var(--cine-dorado);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%;
}
.cine-aplique {
position: absolute; top: 38%; width: 18px; height: 28px; border-radius: 10px 10px 3px 3px;
background: #6a4a1e; box-shadow: 0 0 16px 4px rgba(200,140,60,.18);
}
.cine-aplique-izq { left: 1.2%; }
.cine-aplique-der { right: 1.2%; }
.cine-escena { position: relative; }
.cine-pantalla {
position: relative; z-index: 1;
aspect-ratio: 2.3 / 1;
background: #0a0a0a;
box-shadow: 0 0 0 6px #05070d, 0 0 90px 20px rgba(255,200,150,.10);
overflow: hidden;
}
.cine-proyeccion { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cine-pantalla::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.45));
}
.cine-rotulo {
position: absolute; left: 6%; bottom: 12px; z-index: 1;
font-family: var(--font-pixel); font-size: 8px; color: rgba(255,255,255,.45);
}
.cine-cortina {
position: absolute; top: -14px; bottom: -12px; width: 13%; z-index: 2;
background: repeating-linear-gradient(90deg, #2a070e 0 14px, #45101c 14px 26px, #1c0509 26px 34px);
box-shadow: 0 0 0 4px #05070d;
}
.cine-cortina-izq { left: -9%; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.cine-cortina-der { right: -9%; clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%); }
.cine-haz {
position: absolute; left: 0; right: 0; top: 0; height: 72%; z-index: 3; pointer-events: none;
background: linear-gradient(180deg, rgba(255,235,200,.05), rgba(255,235,200,.01));
clip-path: polygon(46% 0, 54% 0, 88% 100%, 12% 100%);
}
.cine-escenario {
position: relative; z-index: 1; height: 18px; margin: 14px -6% 0;
background: #140a08; box-shadow: inset 0 3px 0 #2a1810, 0 0 0 3px #05070d;
}
.cine-butacas {
display: flex; flex-direction: column; gap: 12px;
margin: 0 -10%; padding: 22px 3% 0; height: 230px; overflow: hidden; box-sizing: border-box;
}
.cine-fila { display: flex; justify-content: center; gap: 1.2%; }
.cine-butaca {
position: relative; flex: 0 0 auto;
border-radius: 12px 12px 3px 3px;
background: linear-gradient(180deg, #3a1018, #1c070c);
box-shadow: inset 0 3px 0 rgba(255,220,180,.18), inset -4px 0 0 rgba(0,0,0,.25), 0 0 0 3px #05070d;
}
.cine-fila-1 .cine-butaca { width: 5.6%; height: 34px; }
.cine-fila-2 .cine-butaca { width: 8.6%; height: 52px; }
.cine-fila-3 .cine-butaca { width: 15.5%; height: 96px; }
.cine-fila-1 .cine-butaca:nth-child(7),
.cine-fila-2 .cine-butaca:nth-child(5) { margin-left: 3%; }
.cine-butaca.con-cabeza::before {
content: ''; position: absolute; left: 28%; width: 44%; top: -55%; height: 62%;
border-radius: 45% 45% 30% 30%; background: #07070d;
box-shadow: inset 0 2px 0 rgba(255,220,180,.18);
}
.cine-cartelera {
position: relative; z-index: 5;
display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
padding: 18px 24px 20px;
background: #07070a; border-top: 2px solid var(--cine-dorado);
}
.cine-en-cartel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cine-etiqueta {
margin: 0; font-family: var(--font-pixel); font-size: 8px; font-weight: 400;
letter-spacing: 2px; color: var(--cine-dorado);
}
.cine-posters { display: flex; gap: 12px; overflow-x: auto; padding: 10px 4px 4px; scrollbar-width: thin; }
.cine-cartel-item {
position: relative; flex: 0 0 auto; width: 68px; height: 102px; padding: 0; border: 0; cursor: pointer;
background: #111; box-shadow: 0 0 0 2px #2a2620;
opacity: .55; filter: grayscale(.5); transition: opacity .15s steps(2), filter .15s steps(2);
}
.cine-cartel-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cine-cartel-item:hover, .cine-cartel-item:focus-visible { opacity: .9; filter: none; }
.cine-cartel-item:focus-visible { outline: 2px solid var(--cine-texto); outline-offset: 3px; }
.cine-cartel-item.activo { opacity: 1; filter: none; box-shadow: 0 0 0 3px var(--cine-dorado); }
.cine-ahora {
position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
font-family: var(--font-pixel); font-size: 6px; color: #07070a; background: var(--cine-dorado);
padding: 3px 4px; white-space: nowrap;
}
.cine-info { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cine-titulo {
margin: 0; font-family: var(--font-pixel); font-size: 17px; font-weight: 400; line-height: 1.4;
letter-spacing: 2px; color: var(--cine-texto);
}
.cine-meta { margin: 0; font-family: var(--font-body); font-size: 21px; line-height: 1.1; color: var(--cine-apagado); }
.cine-frase { margin: 0; font-size: 15px; line-height: 1.45; font-style: italic; color: #cfc6b0; }
.cine-acciones { display: flex; gap: 12px; }
.cine-btn {
min-height: 44px; padding: 13px 16px; border: 0; cursor: pointer;
font-family: var(--font-pixel); font-size: 9px; letter-spacing: 1px;
}
.cine-btn-principal { color: #07070a; background: var(--cine-dorado); }
.cine-btn-principal:hover { background: #c4a468; }
.cine-btn:focus-visible { outline: 2px solid var(--cine-texto); outline-offset: 3px; }
@media (max-width: 640px) {
.cine-sala { padding: 50px 8% 0; }
.cine-bambalina span { font-size: 8px; letter-spacing: 2px; }
.cine-pantalla { aspect-ratio: 16 / 9; }
.cine-cortina { width: 10%; }
.cine-cortina-izq { left: -8%; }
.cine-cortina-der { right: -8%; }
.cine-butacas { height: 120px; gap: 8px; }
.cine-fila-1 .cine-butaca { height: 20px; }
.cine-fila-2 .cine-butaca { height: 30px; }
.cine-fila-3 .cine-butaca { height: 56px; }
.cine-cartelera { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
.cine-info { flex: none; }
.cine-acciones .cine-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
.cine-cartel-item { transition: none; }
}