/* =====================================================
   CINES SUNSTAR — main.css
   Variables, reset, tipografía, utilidades, animaciones
   ===================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

   /* ── Variables globales (Solo Modo Oscuro Profesional) ── */
   :root {
     --bg-primary:    #0a0f1a;
     --bg-secondary:  #0d1320;
     --bg-card:       #111827;
     --bg-card-hover: #1a2236;
     --bg-overlay:    rgba(10, 15, 26, 0.9);
   
     --gold:          #c6a54b;
     --gold-light:    #dbbf69;
     --gold-dim:      rgba(198, 165, 75, 0.18);
     --gold-glow:     rgba(198, 165, 75, 0.10);
   
     --crimson:       #9e001f;
     --crimson-vivid: #c40035;
     --crimson-dim:   rgba(158, 0, 31, 0.25);
   
     --text-primary:  #e2e8f0;
     --text-secondary:#94a3b8;
     --text-muted:    #64748b;
   
     --border-gold:   rgba(198, 165, 75, 0.22);
     --border-subtle: rgba(255, 255, 255, 0.06);
   
     --shadow-card:   0 8px 40px rgba(0,0,0,0.7);
     --shadow-gold:   0 0 40px rgba(198, 165, 75, 0.12);
     --shadow-up:     0 -4px 20px rgba(0,0,0,0.5);
     --shadow-button: 0 6px 20px rgba(198, 165, 75, 0.2);
   
     --radius-sm:  6px;
     --radius-md:  12px;
     --radius-lg:  20px;
     --radius-xl:  28px;
   
     --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
     --transition: 0.35s var(--ease-out);
   
     --font-display:   'Poppins', sans-serif;
     --font-body:      'Inter', sans-serif;
     --font-condensed: 'Poppins', sans-serif; /* unificamos con Poppins */
   
     --header-h: 72px;
     --max-w: 1260px;
   
     --dock-bg: rgba(10, 15, 26, 0.95);
     --dock-border: var(--border-gold);
   }
   
   /* ── Reset ── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
   body {
     background: var(--bg-primary);
     color: var(--text-primary);
     font-family: var(--font-body);
     font-weight: 400;
     line-height: 1.65;
     min-height: 100vh;
     overflow-x: hidden;
   }
   a   { color: inherit; text-decoration: none; }
   ul  { list-style: none; }
   img { max-width: 100%; display: block; }
   button { font-family: inherit; cursor: pointer; border: none; background: none; }
   select, input { font-family: inherit; }
   
   /* Grain texture solo dark */
   body::after {
     content: '';
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 9998;
     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%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
     opacity: 0.4;
   }
   
   /* ── Scrollbar ── */
   ::-webkit-scrollbar { width: 5px; }
   ::-webkit-scrollbar-track { background: var(--bg-primary); }
   ::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }
   ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
   
   /* ── Contenedor ── */
   .container {
     width: 100%;
     max-width: var(--max-w);
     margin: 0 auto;
     padding: 0 1rem;
   }
   @media (min-width: 600px)  { .container { padding: 0 1.5rem; } }
   @media (min-width: 1024px) { .container { padding: 0 2.5rem; } }
   
   /* ── Utilidades de texto ── */
   .section-title {
     font-family: var(--font-display);
     font-size: clamp(1.6rem, 3.5vw, 2.2rem);
     font-weight: 700;
     letter-spacing: -0.02em;
     line-height: 1.2;
   }
   .section-subtitle {
     color: var(--text-secondary);
     font-size: 0.95rem;
     margin-top: 0.4rem;
   }
   .section-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 0.75rem;
     margin-bottom: 2rem;
   }
   
   .view-all-link {
     font-family: var(--font-display);
     font-size: 0.9rem;
     font-weight: 600;
     letter-spacing: 0.02em;
     color: var(--gold);
     transition: color 0.2s;
   }
   .view-all-link:hover { color: var(--gold-light); }
   
   /* ── Vista ── */
   .view-section {
     padding: 2.5rem 0 5rem;
     min-height: calc(100vh - var(--header-h) - 100px);
     animation: fadeInView 0.45s var(--ease-out) both;
   }
   
   /* ── Animaciones ── */
   @keyframes fadeInView {
     from { opacity: 0; transform: translateY(18px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   @keyframes fadeInUp {
     from { opacity: 0; transform: translateY(28px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   @keyframes shake {
     0%, 100% { transform: translateX(0); }
     20%      { transform: translateX(-8px); }
     40%      { transform: translateX(8px); }
     60%      { transform: translateX(-6px); }
     80%      { transform: translateX(4px); }
   }
   .shake { animation: shake 0.5s ease-in-out; }
   
   /* Scrol reveal */
   .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
   }
   .reveal.revealed {
     opacity: 1;
     transform: translateY(0);
   }
   
   .gold-link {
     color: var(--gold);
     text-decoration: underline;
     transition: color 0.2s;
   }
   .gold-link:hover { color: var(--gold-light); }
   
   /* Loading */
   .loading {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 1.2rem;
     min-height: 50vh;
     color: var(--text-muted);
     font-size: 0.95rem;
   }
   .loading-ring {
     width: 44px; height: 44px;
     border: 3px solid var(--border-gold);
     border-top-color: var(--gold);
     border-radius: 50%;
     animation: spin 0.75s linear infinite;
   }
   
   .gold-divider {
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
     margin: 2rem 0;
   }
   
   /* Form inputs */
   .filter-input {
     background: var(--bg-card);
     color: var(--text-primary);
     border: 1px solid var(--border-gold);
     border-radius: var(--radius-sm);
     padding: 0.55rem 0.9rem;
     font-family: var(--font-body);
     font-size: 0.9rem;
     font-weight: 500;
     min-width: 200px;
   }
   .filter-input::placeholder { color: var(--text-muted); }
   .filter-input:focus {
     outline: none;
     border-color: var(--gold);
     box-shadow: 0 0 0 3px var(--gold-glow);
   }