/* ═══════════════════════════════════════════════════ PuppetHunt.tv — Estilos globales Teatro Barroco Oscuro: el Gran Teatro de Marionetas ═══════════════════════════════════════════════════ */ /* ─── Variables ──────────────────────────────────── */ :root { /* Oscuros — el fondo del escenario */ --bg-deep: #05040a; --bg-primary: #0a0910; --bg-card: #100f18; --bg-card-hover: #181724; --bg-surface: #161520; /* Acentos — la luz del foco y el terciopelo */ --accent-gold: #d4a843; --accent-gold-dim: #a07a28; --accent-gold-bright: #f0c96a; --accent-gold-glow: rgba(212, 168, 67, 0.12); --accent-crimson: #7a1525; --accent-crimson-bright: #b02035; --accent-ivory: #f5efe0; /* Texto */ --text-primary: #ede8dc; --text-secondary: #9a9490; --text-dim: #524e4a; /* Bordes */ --border-subtle: rgba(255, 255, 255, 0.055); --border-glow: rgba(212, 168, 67, 0.22); --border-focus: var(--accent-gold); --border-ornament: rgba(212, 168, 67, 0.15); /* Sombras */ --shadow-card: 0 4px 28px rgba(0, 0, 0, 0.55); --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 40px rgba(212, 168, 67, 0.07); --shadow-spotlight: 0 0 80px rgba(212, 168, 67, 0.07); --shadow-glow: 0 0 24px rgba(212, 168, 67, 0.14); /* Espaciado */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; /* Tipografía — Moderno y legible */ --font-display: 'DM Serif Display', Georgia, serif; --font-heading: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; /* Radios */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; /* Grid */ --max-width: 1440px; --poster-ratio: 2 / 3; } /* ─── Reset ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 17px; /* scroll-behavior: smooth quitado (2026-07-14, Miguel: scroll no fluido en Chrome, "echo de menos que se deslice") — en Chrome esta propiedad reemplaza el scroll nativo de rueda/trackpad por una animación propia que se encola con scroll continuo, dando sensación de escalones en vez de deslizamiento. El scroll nativo del navegador ya es fluido sin esto. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Mismo fondo que body: sin esto, el raíz pinta el fondo por defecto del navegador (blanco) durante el primer frame, antes de que las reglas de body se apliquen — se ve como un parpadeo breve al cargar. color-scheme:dark ayuda pero no lo garantiza en todos los navegadores. Auditoría 2026-07-14. */ background-color: var(--bg-deep); } body { font-family: var(--font-body); font-size: 1rem; background-color: var(--bg-deep); color: var(--text-primary); line-height: 1.65; min-height: 100vh; /* Grano de telón + focos teatrales */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"), radial-gradient(ellipse 70% 50% at 50% 0%, rgba(212, 168, 67, 0.04) 0%, transparent 60%), radial-gradient(circle at 15% 85%, rgba(122, 21, 37, 0.04) 0%, transparent 40%), radial-gradient(circle at 85% 20%, rgba(122, 21, 37, 0.025) 0%, transparent 35%); } a { color: var(--accent-gold); text-decoration: none; transition: color 0.25s ease; } a:hover { color: var(--accent-gold-bright); } img { max-width: 100%; height: auto; display: block; } /* ─── Contenedor ─────────────────────────────────── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } /* ─── Animaciones globales ───────────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes curtainRise { from { opacity: 0; transform: translateY(30px) scaleY(0.97); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scaleY(1); filter: blur(0); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes pulseGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes spotlightPulse { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.7; } 50% { transform: translateX(-50%) scale(1.08); opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ─── Header / Nav ───────────────────────────────── */ .site-header { border-bottom: 1px solid var(--border-subtle); padding: 0.9rem 0; position: sticky; top: 0; z-index: 100; /* Blur reducido 24px→12px (2026-07-14, Miguel: scroll con saltos/glitches en Chrome) — un backdrop-filter con radio grande sobre un elemento sticky obliga a recomponer el blur en cada frame de scroll; 12px se ve casi igual pero es mucho más barato de renderizar. */ backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); background: rgba(5, 4, 10, 0.9); } .site-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent-gold-dim) 20%, var(--accent-gold) 50%, var(--accent-gold-dim) 80%, transparent 100%); opacity: 0.45; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); } /* ─── Logo ───────────────────────────────────────── */ .site-logo { display: flex; align-items: baseline; gap: 0; text-decoration: none; flex-shrink: 0; transition: opacity 0.25s; } .site-logo:hover { opacity: 0.82; } .logo-icon { width: 34px; height: 27px; color: var(--accent-gold); opacity: 0.85; flex-shrink: 0; transition: opacity 0.25s; } .site-logo:hover .logo-icon { opacity: 1; } .logo-wordmark { display: flex; align-items: baseline; gap: 0; line-height: 1; } .logo-puppet { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; font-style: italic; background: linear-gradient(160deg, var(--accent-gold-bright) 0%, var(--accent-gold) 60%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; /* 2026-07-17, Miguel: la cursiva itálica de la "t" final se comía casi todo el letter-spacing negativo y quedaba pegada a "Hunt" — un pelín de aire real entre las dos palabras. */ margin-right: 2px; } .logo-hunt { font-family: var(--font-body); font-size: 1.35rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.04em; text-transform: uppercase; } .logo-tv { font-family: var(--font-body); font-size: 1.3rem; font-weight: 400; color: var(--text-dim); letter-spacing: 0.02em; margin-left: 0px; align-self: baseline; } /* ─── Search icon (SVG) ─────────────────────────── */ .search-icon-svg { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-dim); pointer-events: none; } /* ─── Buscador ───────────────────────────────────── */ .search-bar { flex: 1; max-width: 480px; position: relative; } .search-input { width: 100%; padding: 0.65rem 1rem 0.65rem 2.6rem; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border-subtle); border-radius: 2px; color: var(--text-primary); font-size: 1rem; font-family: var(--font-body); transition: all 0.3s ease; } .search-input::placeholder { color: var(--text-dim); font-style: italic; } .search-input:focus-visible { outline: none; border-color: var(--accent-gold-dim); background: rgba(255, 255, 255, 0.055); box-shadow: 0 0 0 3px var(--accent-gold-glow), var(--shadow-glow); } /* ─── Search overlay ─────────────────────────────── */ .search-backdrop { display: none; position: fixed; inset: 0; z-index: 99; } .search-backdrop.visible { display: block; } .search-overlay { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #13121c; border: 1px solid rgba(212,168,67,0.18); border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5); z-index: 100; overflow: hidden; max-height: 520px; overflow-y: auto; } .search-overlay.visible { display: block; } .search-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--text-primary); border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.12s; cursor: pointer; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover, .search-result-item.active { background: rgba(212,168,67,0.08); } .sr-poster { width: 34px; height: 50px; object-fit: cover; border-radius: 2px; flex-shrink: 0; background: #1a1928; } .sr-poster-empty { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-dim); } .sr-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sr-title { font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-title mark { background: transparent; color: var(--accent-gold-bright); font-weight: 700; } .sr-meta { display: flex; gap: 8px; align-items: center; } .sr-type { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-gold-dim); } .sr-year { font-size: 0.75rem; color: var(--text-secondary); } .sr-dirs { font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-no-results { padding: 20px 16px; font-size: 0.85rem; color: var(--text-secondary); text-align: center; } .search-no-results em { color: var(--text-primary); font-style: normal; } /* ─── Nav links ──────────────────────────────────── */ .nav-links { display: flex; align-items: center; gap: var(--space-xs); list-style: none; } .nav-links a { display: block; color: var(--text-dim); font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.45rem 0.9rem; border: 1px solid transparent; border-radius: 2px; transition: all 0.2s; } .nav-links a:hover { color: var(--text-primary); border-color: var(--border-subtle); background: rgba(255,255,255,0.04); } .nav-about { color: var(--accent-gold-dim) !important; border-color: var(--border-ornament) !important; } .nav-about:hover { color: var(--accent-gold) !important; background: rgba(212, 168, 67, 0.06) !important; border-color: var(--accent-gold-dim) !important; } /* ─── Menú hamburguesa (solo móvil, ver breakpoint 768px) ──────── */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-subtle); border-radius: 4px; background: transparent; cursor: pointer; flex-shrink: 0; } .nav-burger span { display: block; width: 18px; height: 1.5px; margin: 0 auto; background: var(--text-secondary); transition: transform 0.2s, opacity 0.2s; } .nav-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-burger.is-open span:nth-child(2) { opacity: 0; } .nav-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ═══ HERO ════════════════════════════════════════════ */ .hero { text-align: center; padding: var(--space-xl) 0 var(--space-lg); position: relative; overflow: hidden; } /* Foco principal — dramático */ .hero::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 700px; height: 500px; background: radial-gradient( ellipse at center top, rgba(212, 168, 67, 0.09) 0%, rgba(212, 168, 67, 0.03) 35%, transparent 65% ); pointer-events: none; animation: spotlightPulse 8s ease-in-out infinite; } /* Líneas de cortina — efecto terciopelo sutil */ .hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( to right, rgba(80, 15, 25, 0.022) 0px, rgba(80, 15, 25, 0.01) 6px, transparent 6px, transparent 24px ); pointer-events: none; } .hero-content { position: relative; z-index: 1; } .hero-counting { font-family: 'Caveat', cursive; font-size: 3rem; color: #d4a843; text-align: center; display: block; width: 100%; margin-top: -0.3rem; margin-bottom: -0.6rem; transform: rotate(-1.5deg); } .hero .hero-pending { font-family: var(--font-body); font-size: 0.905rem; /* 2026-07-27: +2px a petición de Miguel (antes 0.78rem). */ color: var(--text-dim); text-align: center; margin-top: calc(1.2rem + 4px); /* 2026-07-18: +2px, luego +2px más, a petición de Miguel. */ letter-spacing: 0.02em; } .hero .hero-pending a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.15); transition: color 0.15s, border-color 0.15s; } .hero .hero-pending a:hover { color: var(--accent-gold); border-color: var(--accent-gold); } .beta-badge { display: inline-block; font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--accent-gold); border: 1.5px solid var(--accent-gold); border-radius: 4px; padding: 4px 14px; margin-bottom: 14px; animation: fadeInUp 0.7s ease-out both; } .hero-eyebrow { font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-gold-dim); margin-bottom: 8px; animation: fadeInUp 0.7s ease-out both; } .hero h1 { font-family: var(--font-heading); font-size: 3.2rem; font-weight: 400; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.1; animation: curtainRise 1s ease-out 0.1s both; } .hero h1 em { font-style: normal; color: var(--accent-gold-bright); position: relative; } .hero h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 2px; background: var(--accent-gold-dim); } /* Divisor ornamental */ .hero-divider { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin: 8px auto; max-width: 360px; animation: fadeInUp 0.8s ease-out 0.25s both; } .hero-divider::before, .hero-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-ornament)); } .hero-divider::after { background: linear-gradient(90deg, var(--border-ornament), transparent); } .hero-divider-gem { color: var(--accent-gold-dim); font-size: 0.65rem; letter-spacing: 0.2em; } .hero p { color: var(--text-secondary); font-size: 1.05rem; max-width: 520px; margin: 0 auto; animation: fadeInUp 0.8s ease-out 0.3s both; position: relative; line-height: 1.4; } .hero-stats { display: flex; justify-content: center; gap: var(--space-3xl); margin-top: 12px; animation: fadeInUp 0.8s ease-out 0.45s both; position: relative; z-index: 1; } /* .hero-stats-track/.hero-stats-set solo existen para el modo "slider automático" en móvil (ver breakpoint 540px) — en escritorio se "aplanan" con display:contents para que los .hero-stat reales sigan siendo hijos directos del flex de .hero-stats, igual que antes de que existiera esta envoltura. El segundo set es una copia duplicada (aria-hidden) para el bucle continuo del marquee; en escritorio no se muestra nunca. */ .hero-stats-track, .hero-stats-set { display: contents; } .hero-stats-set--dup { display: none; } .hero-stat { text-align: center; position: relative; } /* Separador sutil entre stats */ .hero-stat + .hero-stat::before { content: ''; position: absolute; left: calc(-1 * var(--space-3xl) / 2); top: 50%; transform: translateY(-50%); width: 1px; height: 32px; background: var(--border-ornament); } .hero-stat .number { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; display: block; background: linear-gradient(180deg, var(--accent-gold-bright) 0%, var(--accent-gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; } .hero-stat .label { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; margin-top: 4px; } /* 2026-07-18: causa real encontrada tras horas de ida y vuelta — ".hero p" (más abajo en este mismo fichero) tiene MÁS especificidad (clase+elemento) que ".hero-counting" sola (solo clase), así que ganaba ella (1.05rem) pase lo que pasara con el valor puesto aquí, sin importar el orden en el fichero. Confirmado con getComputedStyle() real en Chrome headless: 17.85px (=1.05rem) en vez de los 6.4rem escritos abajo. Subir la especificidad del selector (".hero-content .hero-counting") es la corrección real — cambiar solo el font-size no iba a arreglar nada nunca, por eso no se veía ningún cambio por mucho que se subiera el número. */ .hero-content .hero-counting { font-family: 'Caveat', cursive; /* 2026-07-18: historial de idas y venidas sobre este único número — 1.6rem (demasiado pequeño, causa real: ver comentario arriba de esta regla en el fichero fuente sobre la especificidad de ".hero p") → 6.4rem ("x4" literal, partía el texto en 2 líneas) → 1.07rem ("/6" literal, minúsculo otra vez) → 2.8rem: probado en Chrome headless contra la maqueta real hasta encontrar el punto en que cabe en una sola línea y se ve proporcionado con los números de arriba. NO cambiar este valor por una petición de "más grande"/"más pequeño" sin probarlo antes en un render real — es la lección de todo este hilo. 2026-07-18: -2px sobre 2.8rem (47.6px) a petición de Miguel. */ font-size: 2.68rem; font-weight: 600; line-height: 0.9; color: var(--accent-gold); text-align: center; /* 2026-07-18: -8px a petición de Miguel (antes var(--space-lg)=1.5rem). */ margin-top: calc(var(--space-lg) - 8px); opacity: 0.85; transform: rotate(-1.5deg); display: inline-block; width: 100%; animation: fadeInUp 0.8s ease-out 0.6s both; } /* ═══ FILTROS ════════════════════════════════════════ */ /* Botón "Filters" — solo visible en móvil (ver breakpoint 768px), abre .filters-bar como panel colapsable en vez de mostrarlo siempre entero. */ .filters-toggle { display: none; align-items: center; gap: var(--space-xs); width: 100%; margin-top: -10px; margin-bottom: var(--space-md); padding: 0.6rem 1rem; background: transparent; border: 1px solid var(--border-subtle); border-radius: 4px; color: var(--text-secondary); font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; } .filters-toggle svg { margin-left: auto; transition: transform 0.2s; } .filters-toggle.is-open svg { transform: rotate(180deg); } .filters-bar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; /* 2026-07-18, Miguel: "sube todo ~1cm", luego "10px más" — quita aire sobrante entre los filtros y "Mostrando X obras"/la rejilla. Se toca solo el padding inferior, el superior se deja igual. */ /* 2026-07-18: "sube el doble" — ya no queda margen abajo (0.2rem→0), se recorta también el padding de arriba (antes var(--space-lg)=1.5rem). */ padding: 0.5rem 0 0; margin-top: -10px; border-bottom: 1px solid var(--border-subtle); /* 2026-07-18: este margin-bottom (antes var(--space-xl)=2rem=34px) era el verdadero causante del hueco que quedaba tras tocar el padding — no aparecía en los primeros vistazos a la regla por estar más abajo. +8px sobre 0.3rem tras pasarse de frenada, +3px más después. */ margin-bottom: calc(0.3rem + 11px); } .filters-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: auto; } .filters-selects { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; } .filter-btn { background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); color: var(--text-secondary); padding: 0.42rem 0.9rem; border-radius: 20px; font-size: 0.82rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: all 0.18s ease; white-space: nowrap; } .filter-btn:hover { border-color: var(--accent-gold-dim); color: var(--text-primary); background: rgba(212,168,67,0.06); } .filter-btn.active { background: var(--accent-gold); color: #0a0810; border-color: var(--accent-gold); font-weight: 700; box-shadow: 0 2px 10px rgba(212, 168, 67, 0.25); } .filter-btn--sub { font-size: 0.76rem; padding: 0.32rem 0.75rem; opacity: 0.75; border-style: dashed; } .filter-btn--sub:hover, .filter-btn--sub.active { opacity: 1; } .filter-select { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-dim); padding: 0.45rem 1.8rem 0.45rem 0.8rem; border-radius: 2px; font-size: 0.88rem; font-family: var(--font-body); cursor: pointer; transition: all 0.2s ease; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23524e4a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; } .filter-select:hover { border-color: var(--border-ornament); color: var(--text-secondary); } .filter-select:focus-visible { outline: none; border-color: var(--accent-gold-dim); box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.12); } .filter-select option { background: var(--bg-card); color: var(--text-primary); } .filter-separator { width: 1px; height: 20px; background: var(--border-subtle); margin: 0 0.2rem; flex-shrink: 0; } /* ═══ GRID DE OBRAS ══════════════════════════════════ */ .works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: var(--space-lg); padding-bottom: var(--space-3xl); } @media (max-width: 640px) { .works-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: var(--space-md); } } /* ═══ CARD DE OBRA ═══════════════════════════════════ */ .work-card { position: relative; border-radius: 3px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-subtle); transition: all 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; text-decoration: none; display: block; /* Evita pintar tarjetas fuera de pantalla en catálogos largos — no cambia nada visualmente, solo el coste de renderizado durante el scroll. */ content-visibility: auto; contain-intrinsic-size: 300px 500px; } /* Esquinas ornamentales */ .work-card::before { content: ''; position: absolute; inset: 0; border-radius: 3px; opacity: 0; transition: opacity 0.38s; background: /* esquina superior izquierda */ linear-gradient(to right, var(--accent-gold-dim) 1px, transparent 1px) 0 0 / 10px 1px no-repeat, linear-gradient(to bottom, var(--accent-gold-dim) 1px, transparent 1px) 0 0 / 1px 10px no-repeat, /* esquina superior derecha */ linear-gradient(to left, var(--accent-gold-dim) 1px, transparent 1px) 100% 0 / 10px 1px no-repeat, linear-gradient(to bottom, var(--accent-gold-dim) 1px, transparent 1px) 100% 0 / 1px 10px no-repeat, /* esquina inferior izquierda */ linear-gradient(to right, var(--accent-gold-dim) 1px, transparent 1px) 0 100% / 10px 1px no-repeat, linear-gradient(to top, var(--accent-gold-dim) 1px, transparent 1px) 0 100% / 1px 10px no-repeat, /* esquina inferior derecha */ linear-gradient(to left, var(--accent-gold-dim) 1px, transparent 1px) 100% 100% / 10px 1px no-repeat, linear-gradient(to top, var(--accent-gold-dim) 1px, transparent 1px) 100% 100% / 1px 10px no-repeat; pointer-events: none; z-index: 3; } .work-card:hover::before { opacity: 1; } .work-card:hover { transform: translateY(-7px); border-color: rgba(212, 168, 67, 0.18); box-shadow: var(--shadow-card-hover); } .work-card-poster { aspect-ratio: var(--poster-ratio); background: var(--bg-surface); position: relative; overflow: hidden; } .work-card-poster--wide { aspect-ratio: 16 / 9; } /* Fondo desenfocado — se muestra siempre, visible cuando la imagen no es vertical (YouTube 16:9, RTVE, etc.) */ .work-card-poster .poster-blur { position: absolute; inset: -12px; background-size: cover; background-position: center; filter: blur(16px) brightness(0.28) saturate(0.5); transform: scale(1.05); z-index: 0; } .work-card-poster img { position: relative; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.55s ease, filter 0.55s ease; } .work-card:hover .work-card-poster img { transform: scale(1.04); filter: brightness(1.06) contrast(1.03); } .work-card-poster .no-poster, .work-detail-poster .no-poster { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 2.2rem; background: linear-gradient(160deg, var(--bg-surface) 0%, #0e0d18 100%); opacity: 0.7; } /* Overlay gradiente inferior del póster */ .work-card-poster::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background: linear-gradient(to top, rgba(5, 4, 10, 0.92) 0%, transparent 100%); pointer-events: none; opacity: 0.8; transition: opacity 0.38s; } .work-card:hover .work-card-poster::after { opacity: 0.55; } .work-card-info { padding: var(--space-sm) var(--space-md) var(--space-md); position: relative; } .work-card-title { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .work-card-meta { font-size: 0.84rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.5rem; } .work-card-rating { color: var(--accent-gold); font-weight: 600; font-size: 0.84rem; } .work-card-type { display: inline-block; padding: 3px 8px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(8px); color: var(--accent-gold-dim); border: 1px solid rgba(212, 168, 67, 0.15); border-radius: 20px; font-size: 0.65rem; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 2; } /* ═══ FILAS DE VÍDEO APAISADO (16:9) en la home ═══════ */ /* Bloque a ancho completo dentro de la rejilla de pósters. */ .video-row-block { grid-column: 1 / -1; margin: var(--space-lg) 0 var(--space-sm); } /* 2026-07-29, Miguel: "cuando hay dos filas de vídeo... están demasiado separadas" — el margin-top de cada fila se sumaba al gap de .works-grid Y al margin-bottom de la fila anterior, triplicando el hueco entre dos filas de vídeo consecutivas. El margin-top solo hace falta al pasar de pósters a vídeo; entre dos filas de vídeo seguidas basta con el gap del grid + el margin-bottom ya existente. */ .video-row-block + .video-row-block { margin-top: 0; } .video-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } @media (max-width: 768px) { .video-row { grid-template-columns: repeat(2, 1fr); } } .video-card { display: block; text-decoration: none; color: inherit; } .video-card .vframe { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; position: relative; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); transition: transform 0.18s ease; } .video-card:hover .vframe { transform: translateY(-3px); } .video-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .video-card .vplay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.92; } .video-card .vplay span { width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; } .video-card .vplay span::after { content: ""; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 3px; } /* Etiqueta de tipo idéntica a la de los pósters (.work-card-type), discreta. */ .video-card .vbadge { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 2; display: inline-block; padding: 3px 8px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(8px); color: var(--accent-gold-dim); border: 1px solid rgba(212, 168, 67, 0.15); border-radius: 20px; font-size: 0.65rem; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; } .video-card .vtitle { font-size: 0.82rem; margin-top: 9px; line-height: 1.25; } .video-card .vmeta { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; } /* Rejilla 16:9 al filtrar por un tipo de vídeo (Commercials, Music Videos…). */ .video-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); padding-bottom: var(--space-3xl); } /* ═══ FICHA INDIVIDUAL ══════════════════════════════ */ .work-detail { max-width: 1100px; margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-3xl); } /* ── TMDb-style two-column layout ── */ .work-detail-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-2xl); align-items: start; } .work-detail-aside { position: sticky; top: var(--space-xl); } /* Metadata list in aside */ .meta-list { margin-top: var(--space-lg); display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-md); font-size: 0.82rem; font-family: var(--font-body); } .meta-list dt { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.72rem; padding-top: 2px; white-space: nowrap; } .meta-list dd { color: var(--text-secondary); margin: 0; } /* ─── Watch section (streaming + YouTube + official) ─ */ .aside-watch { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); } .aside-section-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); margin-bottom: var(--space-xs); font-family: var(--font-body); } .providers-grid { display: flex; flex-wrap: wrap; gap: 6px; } .providers-grid.providers-grid--compact { gap: 4px; } .providers-grid.providers-grid--compact .provider-badge { width: 36px; height: 36px; } .providers-grid.providers-grid--compact .provider-badge.provider-badge--text { width: auto; min-width: 36px; padding: 3px 8px; } .aside-country-flag { display: inline-block; font-size: 0.95em; margin-left: 4px; vertical-align: middle; filter: saturate(1.1); } .aside-other-countries { margin-top: var(--space-xs); border-top: 1px dashed var(--border-subtle); padding-top: var(--space-sm); } .aside-other-countries[open] .aside-other-countries-summary::after { transform: rotate(90deg); } .aside-other-countries-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; margin-bottom: 0; padding: 4px 0; } .aside-other-countries-summary::-webkit-details-marker { display: none; } .aside-other-countries-summary::after { content: "›"; margin-left: auto; font-size: 1.1rem; line-height: 1; color: var(--text-dim); transition: transform 0.15s ease; } .aside-other-countries-summary:hover { color: var(--text-primary); } .aside-other-countries-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); } .aside-country-block { display: flex; flex-direction: column; gap: 4px; } .aside-country-heading { font-size: 0.72rem; color: var(--text-secondary); margin: 0; display: flex; align-items: center; gap: 6px; font-family: var(--font-body); } .aside-country-heading .aside-country-flag { margin-left: 0; font-size: 1em; } .aside-country-name { font-weight: 500; } .provider-badge { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.04); transition: all 0.2s; } .provider-badge:hover { border-color: var(--border-ornament); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .provider-badge img { width: 100%; height: 100%; object-fit: cover; } .provider-name { font-size: 0.6rem; color: var(--text-secondary); text-align: center; padding: 2px; line-height: 1.2; } /* Badge textual (fallback sin logo): auto-ancho para que el nombre completo sea legible */ .provider-badge.provider-badge--text { width: auto; min-width: 44px; padding: 4px 10px; gap: 6px; color: var(--text-secondary); } .provider-badge.provider-badge--text .provider-name { font-size: 0.75rem; padding: 0; white-space: nowrap; } .provider-fallback-icon { flex-shrink: 0; opacity: 0.7; } .youtube-watch-btn, .official-site-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; transition: opacity 0.2s, transform 0.15s; text-decoration: none; } .youtube-watch-btn { background: #FF0000; color: #fff; } .youtube-watch-btn:hover { opacity: 0.85; transform: translateY(-1px); } .official-site-btn { background: rgba(255,255,255,0.05); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .official-site-btn:hover { border-color: var(--accent-gold-dim); color: var(--accent-gold-dim); transform: translateY(-1px); } .work-detail-main { min-width: 0; } @media (max-width: 700px) { .work-detail-layout { grid-template-columns: 1fr; } .work-detail-aside { position: static; } } .work-detail-poster { border-radius: 3px; overflow: hidden; aspect-ratio: var(--poster-ratio); background: var(--bg-surface); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); position: relative; } /* Esquinas ornamentales en la ficha */ .work-detail-poster::before { content: ''; position: absolute; inset: 6px; border-radius: 2px; background: linear-gradient(to right, var(--accent-gold-dim) 1px, transparent 1px) 0 0 / 14px 1px no-repeat, linear-gradient(to bottom, var(--accent-gold-dim) 1px, transparent 1px) 0 0 / 1px 14px no-repeat, linear-gradient(to left, var(--accent-gold-dim) 1px, transparent 1px) 100% 0 / 14px 1px no-repeat, linear-gradient(to bottom, var(--accent-gold-dim) 1px, transparent 1px) 100% 0 / 1px 14px no-repeat, linear-gradient(to right, var(--accent-gold-dim) 1px, transparent 1px) 0 100% / 14px 1px no-repeat, linear-gradient(to top, var(--accent-gold-dim) 1px, transparent 1px) 0 100% / 1px 14px no-repeat, linear-gradient(to left, var(--accent-gold-dim) 1px, transparent 1px) 100% 100% / 14px 1px no-repeat, linear-gradient(to top, var(--accent-gold-dim) 1px, transparent 1px) 100% 100% / 1px 14px no-repeat; pointer-events: none; z-index: 2; opacity: 0.5; } .work-detail-poster img { width: 100%; height: 100%; object-fit: cover; } /* Contenido de vídeo (anuncios, music videos…): la imagen es 16:9, no 2:3. Se muestra en su forma natural, sin recortar ni distorsionar la estructura. */ .work-detail-poster--video { aspect-ratio: 16 / 9; } /* ─── Eyebrow line: type · year · runtime ─────────── */ .work-detail-eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); margin-bottom: var(--space-md); border-bottom: 1px solid var(--border-subtle); } .work-detail-eyebrow { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-gold); font-weight: 600; } /* ─── Share button + modal ─────────────────────────── */ .share-trigger-btn { display: flex; align-items: center; gap: 6px; flex-shrink: 0; background: transparent; border: 1px solid var(--border-glow); color: var(--text-secondary); border-radius: 20px; padding: 6px 14px; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .share-trigger-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold-bright); background: var(--accent-gold-glow); } .share-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(5, 4, 10, 0.8); backdrop-filter: blur(3px); z-index: 500; align-items: center; justify-content: center; padding: var(--space-lg); } .share-modal-overlay.open { display: flex; } .share-modal { width: 100%; max-width: 380px; background: var(--bg-card); border: 1px solid var(--border-glow); border-radius: 12px; box-shadow: var(--shadow-card-hover); overflow: hidden; max-height: 88vh; display: flex; flex-direction: column; } .share-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-subtle); } .share-modal-head h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin: 0; } .share-modal-close { background: none; border: none; color: var(--text-dim); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 4px; } .share-modal-close:hover { color: var(--text-primary); } .nl-popup-modal { max-width: 420px; } .nl-popup-body { padding: var(--space-lg); } .nl-popup-body .nl-form { max-width: none; } .nl-popup-hero { position: relative; overflow: hidden; background: var(--bg-deep); } .nl-popup-hero img { display: block; width: 100%; height: 200px; object-fit: cover; object-position: top center; filter: brightness(0.75); } .nl-popup-hero-close { position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 2; background: rgba(5, 4, 10, 0.55); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .nl-popup-hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px var(--space-lg) var(--space-md); background: linear-gradient(to top, rgba(5,4,10,0.97) 25%, rgba(5,4,10,0.55) 70%, transparent 100%); } .nl-popup-eyebrow { font-family: var(--font-body); font-size: 0.8rem; color: var(--accent-gold-bright); margin: 0 0 4px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .nl-popup-eyebrow em { font-style: italic; color: var(--text-primary); } .nl-popup-hero-text h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,0.5); } /* Tarjeta de vista previa realista — imita cómo se ve un link card real (iMessage/WhatsApp/Twitter) para que quien comparte sepa qué va a enviar. */ .share-modal-preview { position: relative; border-bottom: 1px solid var(--border-subtle); overflow: hidden; background: var(--bg-deep); } .share-modal-preview img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: top center; } .share-modal-preview-noimg { width: 100%; height: 140px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; } .share-modal-preview-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px var(--space-lg) var(--space-md); background: linear-gradient(to top, rgba(5,4,10,0.95) 30%, rgba(5,4,10,0.4) 75%, transparent 100%); } .share-modal-preview-text .brand { font-family: var(--font-heading); font-style: italic; color: var(--accent-gold-bright); font-size: 0.78rem; margin: 0 0 3px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .share-modal-preview-text .title { font-family: var(--font-body); font-size: 1.15rem; color: var(--text-primary); font-weight: 700; margin: 0; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 1px 6px rgba(0,0,0,0.5); } .share-modal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); padding: var(--space-lg); } .share-option { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: var(--space-sm) 4px; font-family: var(--font-body); font-size: 0.68rem; text-decoration: none; border-radius: 8px; transition: background 0.15s, color 0.15s; } .share-option:hover { background: var(--bg-card-hover); color: var(--text-primary); } .share-option-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-surface); display: flex; align-items: center; justify-content: center; color: var(--text-primary); } .share-option[data-copied="true"] .share-option-icon { background: var(--accent-gold); color: var(--bg-deep); } .share-modal-more { border-top: 1px solid var(--border-subtle); padding: var(--space-sm) var(--space-lg) var(--space-lg); } .share-modal-more[hidden] { display: none; } .share-modal-more .share-modal-grid { padding: var(--space-md) 0 0; } .work-detail-share-bottom { display: flex; justify-content: center; padding-top: var(--space-xl); margin-top: var(--space-lg); border-top: 1px solid var(--border-subtle); } .work-detail-eyebrow .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-dim); display: inline-block; } .work-detail-title { font-family: var(--font-heading); font-style: normal; font-size: 3.4rem; font-weight: 600; margin-bottom: var(--space-sm); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; } .work-detail-subtitle { color: var(--text-secondary); font-family: var(--font-body); font-style: normal; font-size: 0.95rem; margin-bottom: var(--space-lg); } /* ─── Ratings strip (editorial, top+bottom borders) ── */ .work-detail-ratings { display: flex; gap: var(--space-2xl); flex-wrap: wrap; padding: var(--space-md) 0 var(--space-lg); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); margin: var(--space-md) 0 var(--space-lg); } .rating-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; background: transparent; border: 0; text-align: left; transition: none; } .rating-badge:hover { border-color: transparent; } /* Bajo el póster: nota secundaria, no protagonista (Miguel, 2026-07-14). */ .work-detail-ratings--aside { gap: var(--space-lg); padding: var(--space-sm) 0; margin: var(--space-md) 0 0; } .work-detail-ratings--aside .rating-badge .source { font-size: 0.56rem; letter-spacing: 0.16em; opacity: 0.75; } .work-detail-ratings--aside .rating-badge .value { font-size: 1.05rem; font-weight: 500; } .public-domain-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: var(--space-sm) 0 0; padding: 3px 10px; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); border-radius: 20px; cursor: help; } .rating-badge .source { font-family: var(--font-body); font-size: 0.62rem; color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.22em; font-weight: 600; order: 0; } .rating-badge .value { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; line-height: 1; display: block; color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); background: none; order: 1; } .work-detail-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); } .tag { padding: 3px 10px; background: transparent; border: 1px solid var(--border-subtle); border-radius: 2px; font-size: 0.8rem; font-family: var(--font-body); color: var(--text-secondary); transition: all 0.2s; } .tag:hover { border-color: var(--border-ornament); color: var(--accent-gold-dim); } .work-detail-section { margin-bottom: var(--space-2xl); } .work-detail-section h2 { font-family: var(--font-heading); font-style: normal; font-size: 1.85rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--text-primary); margin-bottom: var(--space-lg); padding-bottom: 0; border-bottom: 0; display: flex; align-items: center; gap: 14px; line-height: 1.1; } .work-detail-section h2::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-gold); box-shadow: 0 0 16px var(--accent-gold); flex-shrink: 0; } .work-detail-section p { color: var(--text-secondary); line-height: 1.85; font-size: 1rem; } /* ─── Sinopsis: párrafo grande legible (DM Sans, no serif) ─── */ .work-detail-synopsis { font-family: var(--font-body); font-style: normal; font-size: 1.1rem; line-height: 1.7; color: var(--text-primary); max-width: 720px; font-weight: 400; letter-spacing: 0.005em; } /* ─── Tráiler embed responsivo ──────────────────── */ .trailer-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 3px; background: var(--bg-deep); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); } .trailer-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .trailer-embed--ig { padding-bottom: 0; height: auto; background: transparent; border: none; overflow: visible; display: flex; justify-content: center; } .trailer-embed--ig blockquote.instagram-media { margin: 0 !important; max-width: 540px !important; width: 100% !important; } /* YouTube thumbnail + play button (evita bloqueos embedding) */ .yt-thumb-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; overflow: hidden; } .yt-thumb-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; display: block; } .yt-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 46px; background: rgba(180, 0, 0, 0.92); border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .yt-thumb-wrap:hover .yt-play-btn { background: rgba(204, 0, 0, 1); } .yt-play-btn::after { content: ''; border-style: solid; border-width: 11px 0 11px 21px; border-color: transparent transparent transparent #fff; margin-left: 5px; } .metadata-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-md); } .metadata-item { padding: var(--space-md); background: rgba(255, 255, 255, 0.018); border-radius: 2px; border: 1px solid var(--border-subtle); transition: border-color 0.25s; } .metadata-item:hover { border-color: var(--border-ornament); } .metadata-item .meta-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 5px; font-family: var(--font-body); } .metadata-item .meta-value { font-size: 1rem; color: var(--text-primary); font-family: var(--font-body); } /* ─── Enlaces externos ──────────────────────────── */ .external-links { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .external-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: transparent; border: 1px solid var(--border-subtle); border-radius: 2px; font-size: 0.83rem; font-family: var(--font-body); color: var(--text-secondary); transition: all 0.25s; } .external-link:hover { border-color: var(--accent-gold-dim); color: var(--accent-gold); background: var(--accent-gold-glow); } /* ═══ FOOTER ══════════════════════════════════════════ */ .site-footer { border-top: 1px solid var(--border-subtle); padding: var(--space-2xl) 0; text-align: center; color: var(--text-dim); font-size: 0.85rem; position: relative; } .site-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-gold-dim), transparent); opacity: 0.4; } .site-footer .attribution { margin-top: var(--space-sm); font-size: 0.7rem; font-style: italic; opacity: 0.7; } /* ─── Resultado vacío ────────────────────────────── */ .empty-state { text-align: center; padding: var(--space-4xl) 0; color: var(--text-dim); } .empty-state .icon { font-size: 3.5rem; margin-bottom: var(--space-md); filter: grayscale(0.6); opacity: 0.6; } .empty-state p { font-size: 1.1rem; font-style: italic; } /* ─── Newsletter footer block ─────────────────────── */ .nl-footer { margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--border-subtle); } .nl-form { display: flex; flex-direction: column; gap: 10px; max-width: 440px; margin: 0 auto; text-align: left; } .nl-form__heading { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; color: var(--accent-ivory); margin: 0; line-height: 1.3; } .nl-form__copy { font-size: 0.82rem; color: var(--text-secondary); margin: 0; } .nl-form__row { display: flex; flex-direction: column; gap: 8px; height: auto; } .nl-form__email { width: 100%; min-width: 0; height: 40px; padding: 0 0.9rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-body); font-size: 0.88rem; transition: border-color 0.2s, background 0.2s; } .nl-form__email::placeholder { color: var(--text-dim); } .nl-form__email:focus-visible { outline: none; border-color: var(--accent-gold-dim); background: rgba(255, 255, 255, 0.09); } .nl-form__submit { width: 100%; height: 40px; padding: 0 1.2rem; background: var(--accent-gold); color: #080710; border: none; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.15s; } .nl-form__submit:hover { background: var(--accent-gold-bright); } .nl-form__consent { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: var(--text-dim); cursor: pointer; line-height: 1.3; } .nl-form__consent input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent-gold); } .nl-form__consent a { color: var(--accent-gold-dim); text-decoration: none; } .nl-form__consent a:hover { color: var(--accent-gold); } .nl-form__consent a:hover { color: var(--accent-gold); text-decoration: underline; } .nl-form__feedback { font-size: 0.8rem; min-height: 1em; color: var(--accent-gold); margin: 0; } /* ─── Contador de resultados ─────────────────────── */ .results-count { color: var(--text-dim); font-size: 0.88rem; /* 2026-07-18: mismo pedido de arriba — menos aire antes de la rejilla. margin-top explícito porque el

tenía el margen por defecto del navegador (~1em) sin resetear — era la mayor parte del hueco sobrante, no el padding de .filters-bar que sí se había tocado. */ margin-top: 0; margin-bottom: 2px; /* 2026-07-18: +2px respecto a la primera fila de pósters, a petición de Miguel. */ font-style: italic; } .catalogue-end-note { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--text-dim); /* 2026-07-27, Miguel: separación excesiva respecto a la última fila de la rejilla — .works-grid ya aporta su propio padding-bottom (--space-3xl, 64px) antes de este elemento, así que sumarle aquí OTRos --space-3xl por arriba dejaba 128px de hueco en total. */ margin: var(--space-lg) auto var(--space-2xl); opacity: 0.55; letter-spacing: 0.02em; } /* ─── Paginación ─────────────────────────────────── */ .pagination { display: flex; justify-content: center; gap: var(--space-sm); padding: var(--space-xl) 0; } .page-btn { padding: 0.45rem 0.9rem; background: transparent; border: 1px solid var(--border-subtle); border-radius: 2px; color: var(--text-secondary); font-size: 0.85rem; font-family: var(--font-body); cursor: pointer; transition: all 0.25s; } .page-btn:hover { border-color: var(--border-ornament); color: var(--text-primary); } .page-btn.active { background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dim)); color: var(--bg-deep); border-color: transparent; font-weight: 600; box-shadow: 0 2px 14px rgba(212, 168, 67, 0.22); } .page-btn:disabled { opacity: 0.25; cursor: not-allowed; } /* ═══ RESPONSIVE ══════════════════════════════════════ */ @media (max-width: 768px) { .hero h1 { font-size: 2rem; } .hero-stats { gap: var(--space-xl); } .hero-stat .number { font-size: 2.1rem; } .header-inner { flex-wrap: wrap; /* 2026-07-16, Miguel: con el buscador cayendo a su propia fila (ver .search-bar order:3/flex-basis:100% más abajo), el `gap` original (var(--space-lg), pensado para huecos horizontales en una sola fila) se aplicaba también como separación VERTICAL entre la fila del logo+hamburguesa y la del buscador, dejándolo demasiado suelto. */ row-gap: 0.5rem; } /* 2026-07-16, Miguel: "About"/"Sign in" quedaban siempre visibles como texto suelto junto al logo — nada que ver con el patrón estándar de navegación móvil (menú hamburguesa, ver investigación en el commit). El nav pasa a panel desplegable, oculto por defecto. */ .nav-burger { display: flex; } nav#site-nav { display: none; order: 4; flex-basis: 100%; } nav#site-nav.nav-open { display: block; } .nav-links { flex-direction: column; align-items: stretch; gap: 2px; padding-top: var(--space-sm); border-top: 1px solid var(--border-subtle); margin-top: var(--space-sm); } .nav-links a { padding: 0.7rem 0.9rem; } /* 2026-07-16, Miguel: pastillas de tipo + 3 selects siempre desplegados debajo del hero antes de llegar a una sola ficha — patrón estándar (Letterboxd, JustWatch) es un botón "Filters" que abre un panel, no todo visible de golpe. En escritorio (>768px) esta regla no aplica: el botón sigue oculto (display:none por defecto) y filters-bar siempre visible, sin cambios respecto a antes. */ .filters-toggle { display: flex; } .filters-bar { display: none; } .filters-bar.filters-open { display: flex; } /* 2026-07-16, Miguel: en móvil real (~500px) 6 stats en una sola fila con nowrap desbordaban el ancho y se recortaban (faltaba la "F" de "Films", "Commercials" cortado). Primer intento fue una rejilla 3x2, luego un slider manual (scroll-snap) — Miguel pidió que el slider se desplace solo (automático, tipo marquee), con más aire entre elementos y sin reducir tanto el título. El resto del hero (texto, "...and counting") se mantiene compacto para no volver a pesar demasiado en pantalla. */ @media (max-width: 540px) { .hero { padding: var(--space-lg) 0 var(--space-md); } .hero h1 { font-size: 1.9rem; margin-bottom: 0.5rem; } .hero-lead { font-size: 0.88rem; margin-bottom: var(--space-lg); } .hero-stats { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } .hero-stats-track { display: flex; width: max-content; animation: heroStatsMarquee 22s linear infinite; } .hero-stats-set { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-2xl); padding-right: var(--space-2xl); } .hero-stats-set--dup { display: flex; } @keyframes heroStatsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hero-stat { flex: 0 0 auto; } .hero-stat .number { font-size: 1.8rem; } .hero-stat .label { font-size: 0.65rem; white-space: nowrap; } .mobile-device .hero-counting { /* 2026-07-18: mismo punto medio que en escritorio, ver comentario junto a .hero-content .hero-counting. */ font-size: 1.9rem; margin-top: 0.4rem; margin-bottom: 0; } .hero .hero-pending { margin-top: 0.6rem; font-size: 0.845rem; /* 2026-07-27: +2px a petición de Miguel (antes 0.72rem). */ } } .search-bar { order: 3; max-width: 100%; flex-basis: 100%; } .site-logo { font-size: 1.1rem; } } /* ── obra/[slug] scoped styles (antes en