/* IDENTITAT VISUAL INSPIRADA EN EL PERFIL DEL CINECLUB:
   paper càlid, negre, vermell terrós i tipografia editorial. */
:root {
  --paper: #ead0b8;
  --paper-light: #f6eee5;
  --cream: #fffaf3;
  --ink: #11100e;
  --muted: #695f56;
  --red: #a52c22;
  --red-dark: #721a16;
  --olive: #66705a;
  --line: rgba(17,16,14,.17);
  --max-width: 1400px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper-light);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.site-header {
  min-height: 92px;
  padding: 14px max(24px, calc((100% - var(--max-width))/2));
  display: flex;
  align-items: center;
  gap: 36px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,238,229,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.brand, .footer-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.brand { margin-right: auto; }
.brand-main {
  font-family: "Bebas Neue", sans-serif;
  font-size: 38px;
  line-height: .85;
  letter-spacing: .035em;
}
.brand-script {
  font-family: "Nothing You Could Do", cursive;
  font-size: 27px;
  line-height: 1;
  transform: rotate(-4deg);
}
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid transparent;
  padding: 10px 0 6px;
}
.main-nav a:hover, .main-nav a.active { border-color: var(--red); }
.instagram-button {
  padding: 10px 15px;
  border: 1.5px solid var(--ink);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
}
.menu-button { display:none; border:0; background:transparent; }
.menu-button span:not(.sr-only) { display:block; width:28px; height:2px; background:var(--ink); margin:6px; }

.hero {
  min-height: 650px;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .95fr 1.45fr;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.hero-media {
  grid-column: 2;
  grid-row: 1;
  background:
    linear-gradient(90deg, rgba(234,208,184,.08), rgba(0,0,0,.14)),
    url("assets/cineclub-portada.jpg") center 44%/cover no-repeat;
  min-height: 650px;
  filter: saturate(.9) contrast(1.03);
}
.hero-content {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  padding: 76px 50px 68px;
  align-self: center;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow.light { color: #ffd9cf; }
.hero h1 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(65px, 7vw, 112px);
  line-height: .82;
  letter-spacing: .005em;
}
.hero h1 em {
  display: inline-block;
  font-family: "Nothing You Could Do", cursive;
  font-size: .52em;
  font-weight: 400;
  color: var(--red);
  transform: rotate(-4deg);
  margin-top: 20px;
}
.hero-intro { max-width: 48ch; margin: 28px 0; font-size: 18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  padding: 12px 20px;
  border: 1.5px solid var(--ink);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .04em;
  transition: .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background:var(--red); color:white; border-color:var(--red); }
.button-primary:hover { background:var(--red-dark); }
.button-secondary { background:transparent; }
.hero-stamp {
  position:absolute;
  right:24px;
  bottom:22px;
  width:105px;
  height:105px;
  border-radius:50%;
  background:var(--cream);
  display:grid;
  place-content:center;
  text-align:center;
  transform:rotate(8deg);
  border:2px solid var(--ink);
}
.hero-stamp span { font-family:"Bebas Neue"; font-size:39px; line-height:.8; }
.hero-stamp small { font-size:9px; font-weight:900; letter-spacing:.12em; }

.section { max-width:var(--max-width); margin:auto; padding:76px 40px; }
.section-title-row {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:36px;
}
.section h2, .history-section h2 {
  margin:0;
  font-family:"Bebas Neue", sans-serif;
  font-size:clamp(42px,5vw,72px);
  line-height:.95;
  letter-spacing:.01em;
}
.section-note { max-width:430px; color:var(--muted); margin:0; }

.programme-section { background:var(--cream); }
.films-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.film-card {
  background:var(--paper-light);
  border:1px solid var(--line);
  padding:14px;
  display:grid;
  grid-template-columns:145px 1fr;
  gap:20px;
  min-width:0;
}
.poster { aspect-ratio:2/3; overflow:hidden; background:var(--paper); }
.poster img { width:100%; height:100%; object-fit:cover; filter:saturate(.8); transition:.25s; }
.film-card:hover .poster img { transform:scale(1.025); filter:saturate(1); }
.film-content h3 { margin:2px 0 2px; font-family:"Bebas Neue"; font-size:29px; line-height:1; }
.director { margin:0 0 15px; color:var(--muted); font-size:14px; }
.film-meta { list-style:none; padding:0; margin:0 0 16px; display:grid; gap:5px; font-size:13px; }
.info-button { cursor:pointer; }

.marquee {
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
  padding:13px 0;
  font-family:"Bebas Neue";
  font-size:26px;
  letter-spacing:.08em;
  white-space:nowrap;
}
.marquee div { width:max-content; animation:marquee 23s linear infinite; }
@keyframes marquee { to { transform:translateX(-50%); } }

.about-section {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:62px;
  align-items:center;
}
.about-image {
  min-height:520px;
  position:relative;
  background:
    linear-gradient(0deg, rgba(17,16,14,.18), transparent),
    url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=1200&q=85") center/cover;
  filter:saturate(.72);
}
.image-label {
  position:absolute;
  bottom:22px;
  left:22px;
  background:var(--paper);
  border:2px solid var(--ink);
  padding:9px 14px;
  font-family:"Bebas Neue";
  font-size:25px;
  letter-spacing:.05em;
  transform:rotate(-2deg);
}
.about-copy > p:not(.eyebrow) { font-size:18px; color:var(--muted); }
.fact-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:30px; }
.fact-grid div { padding:20px 16px 0 0; }
.fact-grid strong, .fact-grid span { display:block; }
.fact-grid strong { font-family:"Bebas Neue"; color:var(--red); font-size:27px; }
.fact-grid span { font-size:13px; color:var(--muted); }

.history-section { background:var(--red); color:white; padding:80px 24px; }
.history-inner { max-width:950px; margin:auto; text-align:center; }
.history-section p:not(.eyebrow) { max-width:750px; margin:22px auto; font-size:19px; color:#f7ded8; }
.text-link { color:var(--red); font-weight:800; }
.light-link { color:white; border-bottom:1px solid rgba(255,255,255,.5); }

.gallery-section { background:var(--paper-light); }
.gallery-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:14px;
}
.instagram-gallery {
  align-items:stretch;
}
.gallery-card {
  margin:0;
  position:relative;
  min-height:280px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--cream);
}
.gallery-card-large {
  grid-row:span 2;
  min-height:574px;
}
.gallery-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.86) contrast(1.02);
  transition:transform .3s ease, filter .3s ease;
}
.gallery-card:hover img {
  transform:scale(1.025);
  filter:saturate(1);
}
.gallery-card figcaption {
  position:absolute;
  left:14px;
  bottom:14px;
  padding:8px 12px;
  background:rgba(255,250,243,.94);
  border:1.5px solid var(--ink);
  font-family:"Bebas Neue";
  font-size:21px;
  letter-spacing:.04em;
}
.add-photos-note {
  margin-top:18px;
  padding:16px 18px;
  border:1px dashed var(--red);
  color:var(--muted);
  background:rgba(255,250,243,.55);
  font-size:14px;
}
.add-photos-note code {
  color:var(--red-dark);
  font-weight:700;
}

.instagram-section {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  background:var(--paper);
}
.instagram-section p:not(.eyebrow) { color:var(--muted); }

.site-footer {
  max-width:var(--max-width);
  margin:auto;
  padding:55px 40px;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:35px;
  background:var(--ink);
  color:white;
}
.site-footer .brand-main { font-size:34px; }
.site-footer .brand-script { color:var(--paper); }
.site-footer p { color:#cfc5ba; margin:8px 0 0; }
.site-footer a:hover { color:var(--paper); }

.modal { display:none; position:fixed; inset:0; z-index:100; }
.modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); }
.modal-dialog {
  position:relative;
  z-index:2;
  width:min(620px,calc(100% - 32px));
  margin:8vh auto;
  background:var(--cream);
  padding:42px;
  border:2px solid var(--ink);
}
.modal-close { position:absolute; right:16px; top:8px; border:0; background:transparent; font-size:34px; cursor:pointer; }
.modal-dialog h2 { margin:0; font-family:"Bebas Neue"; font-size:48px; line-height:1; }
.modal-details { margin:20px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

@media (max-width:1080px) {
  .main-nav { gap:15px; }
  .instagram-button { display:none; }
  .films-grid { grid-template-columns:1fr; }
  .film-card { grid-template-columns:170px 1fr; }
}
@media (max-width:790px) {
  .site-header { min-height:74px; padding:10px 18px; }
  .brand-main { font-size:30px; }
  .brand-script { font-size:21px; }
  .menu-button { display:block; }
  .main-nav {
    display:none;
    position:absolute;
    top:73px;
    left:0;
    right:0;
    padding:18px 24px 25px;
    flex-direction:column;
    align-items:flex-start;
    background:var(--paper-light);
    border-bottom:1px solid var(--line);
  }
  .main-nav.open { display:flex; }
  .hero { min-height:auto; grid-template-columns:1fr; }
  .hero-media { grid-column:1; grid-row:1; min-height:410px; }
  .hero-content { grid-column:1; grid-row:2; padding:48px 25px; }
  .hero-stamp { top:330px; bottom:auto; right:18px; }
  .section { padding:58px 22px; }
  .section-title-row, .instagram-section { align-items:flex-start; flex-direction:column; }
  .about-section { grid-template-columns:1fr; gap:35px; }
  .about-image { min-height:390px; }
  .gallery-grid { grid-template-columns:1fr; } .gallery-card-large { grid-row:auto; min-height:390px; } .gallery-card { min-height:320px; }
  .site-footer { grid-template-columns:1fr 1fr; padding:45px 25px; }
}
@media (max-width:480px) {
  .film-card { grid-template-columns:1fr; }
  .poster { max-width:220px; }
  .fact-grid { grid-template-columns:1fr; }
  .site-footer { grid-template-columns:1fr; }
}