/** * Maquetación funcional mínima de los bloques de Cine Manager. El tema * (fases 7-8) es quien decide la apariencia final; esto solo garantiza * que los bloques sean usables con cualquier tema. */ .cine-bloque-vacio { opacity: 0.7; font-style: italic; } .cine-cartelera { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; } .cine-cartelera-columnas-2 { grid-template-columns: repeat(2, 1fr); } .cine-cartelera-columnas-3 { grid-template-columns: repeat(3, 1fr); } .cine-cartelera-columnas-4 { grid-template-columns: repeat(4, 1fr); } .cine-cartelera-columnas-5 { grid-template-columns: repeat(5, 1fr); } /* ------------------------------------------------------------------- Carrusel: tira horizontal de tarjetas TODAS del mismo ancho. (Antes compartía grid-template-columns con .cine-cartelera, así que las tres primeras tarjetas caían en las columnas explícitas y el resto en columnas implícitas de otro tamaño: se veían desiguales.) ------------------------------------------------------------------- */ .cine-carrusel { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x proximity; list-style: none; margin: 0; padding: 0 0 0.5rem; scrollbar-width: thin; } .cine-carrusel > * { flex: 0 0 180px; scroll-snap-align: start; } /* ------------------------------------------------------------------- Marco del carrusel: flechas y avance automático (assets/js/carrusel.js) ------------------------------------------------------------------- */ .cine-carrusel-marco { position: relative; } /* Las flechas no hacen nada sin JavaScript, así que solo se muestran cuando hay JS (el tema añade la clase "js" al en cuanto carga). */ .cine-carrusel-controles { display: none; gap: 0.5rem; justify-content: flex-end; margin-top: 0.75rem; } .js .cine-carrusel-controles { display: flex; } .cine-carrusel-controles[hidden] { display: none; } .cine-carrusel-flecha { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; line-height: 1; cursor: pointer; border: 1px solid var( --cine-borde, rgba(0, 0, 0, 0.2) ); border-radius: 50%; background: transparent; color: inherit; } .cine-carrusel-flecha:hover, .cine-carrusel-flecha:focus-visible { border-color: var( --cine-cyan, #29abe2 ); color: var( --cine-cyan, #29abe2 ); } .cine-tarjeta-pelicula { position: relative; } .cine-tarjeta-pelicula a { text-decoration: none; color: inherit; display: block; } /* Proporción de cartel de cine (2:3) recortando lo que sobre: así todas las tarjetas miden lo mismo aunque el cartel subido a mano tenga otra proporción que los de TMDB. */ .cine-tarjeta-pelicula img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; } .cine-tarjeta-pelicula h4 { margin: 0.5rem 0 0; font-size: 1rem; } .cine-etiqueta-estreno { display: inline-block; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; padding: 0.2em 0.6em; background: var( --cine-red, #e63329 ); color: #fff; } .cine-pelicula-destacada { position: relative; overflow: hidden; } .cine-pelicula-destacada-imagen { width: 100%; height: auto; display: block; } .cine-pelicula-destacada-info h3 { margin: 0.5rem 0; } .cine-boton-comprar { display: inline-block; padding: 0.6em 1.4em; background: var( --cine-red, #e63329 ); color: #fff; text-decoration: none; font-weight: bold; } .cine-tarjeta-precios ul { list-style: none; margin: 0; padding: 0; } .cine-tarjeta-precios li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4em 0; border-bottom: 1px solid rgba( 0, 0, 0, 0.1 ); } .cine-sala img { width: 100%; height: auto; display: block; } .cine-sala-datos { list-style: none; margin: 0.5rem 0 0; padding: 0; } .cine-aviso { padding: 0.8em 1.2em; font-weight: bold; } .cine-aviso a { color: inherit; } .cine-aviso-info { background: var( --cine-cyan, #29abe2 ); color: #fff; } .cine-aviso-alerta { background: var( --cine-red, #e63329 ); color: #fff; }