@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); .cartelera-wrapper { background-color: #080d14; color: #ffffff; font-family: 'Plus Jakarta Sans', sans-serif; padding: 40px 20px; box-sizing: border-box; } /* HERO SECTION */ .hero-section { position: relative; background: linear-gradient(180deg, rgba(8, 13, 20, 0.4) 0%, #080d14 100%), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat; padding: 60px 40px 40px; border-radius: 16px; margin-bottom: 30px; overflow: hidden; } .hero-tagline { color: #FF4500; font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .hero-title { font-size: 3rem; font-weight: 800; line-height: 1.1; margin: 0 0 10px 0; letter-spacing: -0.5px; } .hero-title span { color: #FF4500; display: block; } .hero-subtitle { color: #94a3b8; font-size: 1.1rem; margin: 0; } /* BARRA DE FILTROS */ .filtros-container { background-color: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 16px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) auto; gap: 16px; align-items: center; margin-bottom: 40px; } .filtro-group { display: flex; flex-direction: column; gap: 6px; } .filtro-label { font-size: 0.8rem; color: #94a3b8; font-weight: 600; display: flex; align-items: center; gap: 6px; } .filtro-select { background-color: #080d14; color: #f8fafc; border: 1px solid #334155; border-radius: 8px; padding: 10px 14px; font-size: 0.9rem; outline: none; cursor: pointer; transition: border-color 0.2s; } .filtro-select:focus { border-color: #FF4500; } .btn-limpiar { background: transparent; border: 1px solid #00e5ff; color: #FF4500; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 42px; align-self: flex-end; transition: background 0.2s, color 0.2s; } .btn-limpiar:hover { background: #00e5ff; color: #080d14; } /* GRILLA DE TARJETAS */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .card-item { background-color: #0f172a; border: 1px solid #1e293b; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; } .card-item:hover { transform: translateY(-6px); border-color: #FF4500; box-shadow: 0 12px 30px rgba(0, 229, 255, 0.15); } .card-image-wrapper { position: relative; width: 100%; height: 220px; overflow: hidden; } .card-image { width: 100%; height: 100%; object-fit: cover; } .card-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; } .card-tags { display: flex; gap: 8px; margin-bottom: 12px; } .tag-pill { background-color: #1e293b; color: #ffffff; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; border: 1px solid #334155; } .card-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 4px 0; color: #ffffff; } .card-company { font-size: 0.85rem; color: #94a3b8; margin-bottom: 16px; } .card-details { display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; color: #cbd5e1; margin-bottom: 20px; } .detail-row { display: flex; align-items: center; gap: 8px; } .btn-reserva-card { background-color: #FF4500; color: #080d14; border: none; padding: 12px 16px; border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer; text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; transition: background-color 0.2s, transform 0.1s; } .btn-reserva-card:hover { background-color: #33ebff; }