/* ══════════════════════════════════════════════════════════════
   FOTOFEST COLOMBIA 2026 — styles.css
   Versión responsive completa · Producción
   Breakpoints: 1200 · 992 · 768 · 576 · 420
   ══════════════════════════════════════════════════════════════ */

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:     #090909;
  --ink2:    #0f0f0f;
  --panel:   #151515;
  --border:  #252525;
  --mid:     #444;
  --muted:   #787878;
  --body:    #b8b8b8;
  --hi:      #dedede;
  --white:   #fff;
  --off:     #f0ede6;
  --teal:    #1a4a3a;
  --teal-m:  #2a6650;
  --teal-lt: #3db88a;
  --pad:     clamp(1.2rem, 5vw, 5rem);
  --fd: 'Bebas Neue', sans-serif;
  --fs: 'Instrument Serif', Georgia, serif;
  --fb: 'DM Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--fb);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }

/* ── CURSOR ─────────────────────────────────────────────────── */
#cur { position: fixed; pointer-events: none; z-index: 10000; top: 0; left: 0; }
#cring {
  position: absolute; width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .5s cubic-bezier(.23,1,.32,1), height .5s, border-color .3s;
}
#cdot {
  position: absolute; width: 6px; height: 6px;
  background: #fff; border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, opacity .2s;
}
body.hov #cdot  { width: 0; height: 0; opacity: 0; }
body.hov #cring { width: 50px; height: 50px; border-color: var(--teal-lt); }

/* ── NAV ─────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--pad);
  transition: background .5s, border-color .5s;
}
nav.scrolled {
  background: rgba(9,9,9,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  height: 32px; width: auto; display: block;
  filter: brightness(0) invert(1); opacity: .9;
  transition: opacity .3s; flex-shrink: 0;
}
.nav-logo:hover { opacity: 1; }
.nav-right { display: flex; align-items: center; gap: 2.5rem; }
.nav-links  { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .25s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--white); }
.nav-cta {
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--white); color: var(--ink);
  padding: .52rem 1.4rem; text-decoration: none; font-weight: 500;
  transition: background .25s, color .25s; white-space: nowrap;
}
.nav-cta:hover { background: var(--teal-lt); color: var(--white); }

/* ── HAMBURGER (solo móvil) ─────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 4px; z-index: 600;
}
.nav-hamburger span {
  display: block; width: 24px; height: 1px;
  background: var(--white); transition: transform .3s, opacity .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menú móvil desplegable */
.nav-mobile-menu {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(9,9,9,.98);
  z-index: 550;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  font-family: var(--fd); font-size: clamp(2rem, 8vw, 3.5rem);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  transition: color .2s;
}
.nav-mobile-menu a:hover { color: var(--teal-lt); }
.nav-mobile-menu .nav-cta-mobile {
  margin-top: 1rem;
  font-family: var(--fb); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--white); color: var(--ink);
  padding: .8rem 2.2rem; text-decoration: none;
}

/* ── HOME SLIDER ────────────────────────────────────────────── */
#home-slider {
  width: 100%; height: 100vh;
  position: relative; overflow: hidden; background: #000;
}
.slider-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}
.slider-image.active { opacity: 1; }

/* ── HERO ────────────────────────────────────────────────────── */
#hero {
  display: flex; align-items: stretch;
  height: 100svh; min-height: 700px;
  overflow: hidden; position: relative;
}
.hero-flyer {
  width: 42%; flex-shrink: 0;
  position: relative; overflow: hidden; cursor: zoom-in;
}
.hero-flyer-img{
  display:block;

  width:100%;
  height:auto;

  object-fit:contain;
  object-position:center center;

  transition:opacity .5s ease;
}
.hero-flyer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 65%, var(--ink) 100%);
  pointer-events: none;
}
.flyer-badge {
  position: absolute; bottom: 1.2rem; right: 1.4rem; z-index: 2;
  background: rgba(9,9,9,.7); color: rgba(255,255,255,.8);
  font-size: .55rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .28rem .65rem; backdrop-filter: blur(6px);
  pointer-events: none; transition: opacity .3s;
}
.flyer-hint {
  position: absolute; bottom: 3rem; right: 1.4rem; z-index: 2;
  background: rgba(9,9,9,.6); color: rgba(255,255,255,.5);
  font-size: .5rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .22rem .6rem; backdrop-filter: blur(4px); pointer-events: none;
}
#flyerImg {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center top;
  transition: opacity 1s ease;
}
.hero-text {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad) clamp(3rem,8vh,5.5rem) 3.5rem;
  background: var(--ink); position: relative;
}
.hero-eyebrow {
  position: absolute; top: calc(80px + 2rem); left: 3.5rem;
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--teal-lt);
  opacity: 0; animation: fadeUp .8s .2s forwards;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 24px; height: 1px; background: var(--teal-lt);
}
.hero-h1 {
  font-family: var(--fd); line-height: .87; letter-spacing: .01em;
  color: var(--white); text-shadow: 0 2px 40px rgba(0,0,0,.35);
  opacity: 0; animation: fadeUp .9s .4s forwards;
}
.hero-h1 .line-fotofest {
  display: block;
  font-size: clamp(4.5rem, 11vw, 11rem);
  white-space: nowrap;
}
.hero-h1 .line-colombia {
  display: block;
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  color: #fff;
}
.hero-h1 .line-year {
  display: block;
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  color: rgba(255,255,255,.95);
}
.hero-h1 .line-sub {
  display: block;
  font-family: var(--fs); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 4.8rem);
  color: #37a16c; letter-spacing: 0; line-height: 1.1; margin-top: .3rem;
}
.hero-meta {
  display: flex; align-items: center; gap: 1.5rem;
  margin-top: 2rem; margin-bottom: 2.5rem;
  opacity: 0; animation: fadeUp .9s .6s forwards;
  flex-wrap: wrap;
}
.hero-meta-item {
  font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
}
.hero-meta-sep { width: 1px; height: 16px; background: rgba(255,255,255,.18); }
.hero-buttons {
  display: flex; gap: 1rem; flex-wrap: wrap;
  opacity: 0; animation: fadeUp .9s .8s forwards;
}
.btn-primary {
  display: inline-block; padding: .88rem 2.2rem;
  background: var(--white); color: var(--ink);
  font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; transition: background .25s, color .25s;
}
.btn-primary:hover { background: var(--teal-lt); color: var(--white); }
.btn-outline {
  display: inline-block; padding: .88rem 2.2rem;
  border: 1px solid rgba(255,255,255,.3); color: var(--white);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; transition: border-color .25s, background .25s;
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.07); }
.hero-scroll-ind {
  position: absolute; bottom: 2.5rem; right: var(--pad);
  display: flex; align-items: center; gap: .8rem;
  opacity: 0; animation: fadeUp .9s 1.1s forwards;
}
.hero-scroll-ind span {
  font-size: .5rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.32);
}
.scroll-line {
  width: 34px; height: 1px; background: rgba(255,255,255,.1);
  position: relative; overflow: hidden;
}
.scroll-line::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%; background: var(--teal-lt);
  animation: scrollAnim 2.2s ease-in-out infinite;
}
@keyframes scrollAnim { 0%{left:-100%} 50%{left:0} 100%{left:100%} }

/* ── MARQUEE ────────────────────────────────────────────────── */
.marquee-strip {
  background: var(--teal); padding: .7rem 0;
  overflow: hidden; white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  animation: marquee 24s linear infinite;
}
.marquee-item {
  font-family: var(--fd); font-size: .88rem;
  letter-spacing: .18em; color: rgba(255,255,255,.5); padding: 0 2.5rem;
}
.marquee-item b { color: var(--teal-lt); font-weight: 400; margin-right: 2.5rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── SECTIONS ───────────────────────────────────────────────── */
.section {
  padding: clamp(4rem,10vh,9rem) var(--pad);
  max-width: 1380px; margin: 0 auto;
}
.section-dark   { background: var(--ink); }
.section-darker { background: var(--ink2); }
.section-panel  { background: var(--panel); }

.eyebrow {
  font-size: .56rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2.5rem;
  display: flex; align-items: center; gap: 1.2rem;
}
.eyebrow::before { content: attr(data-n); color: var(--mid); font-size: .52rem; }
.eyebrow::after  { content: ''; flex: 1; max-width: 34px; height: 1px; background: var(--border); }

.sec-h { font-family: var(--fd); line-height: .88; color: var(--white); margin-bottom: 3.5rem; }
.sec-h .big   { display: block; font-size: clamp(3rem, 6.5vw, 7rem); letter-spacing: .01em; }
.sec-h .serif {
  display: block; font-family: var(--fs); font-style: italic;
  font-size: clamp(1.6rem, 3vw, 3.5rem); color: var(--teal-lt);
  letter-spacing: 0; line-height: 1.15; margin-top: .15rem;
}
.sec-h .dim   { display: block; font-size: clamp(2rem, 4vw, 4.5rem); color: rgba(255,255,255,.45); }

/* ── SOBRE ──────────────────────────────────────────────────── */
.sobre-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 8rem); align-items: start;
}
.sobre-img {
  overflow: hidden; height: 390px;
  background: var(--panel); margin-top: 2.5rem;
}
.sobre-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.72);
  transition: transform .9s cubic-bezier(.23,1,.32,1);
}
.sobre-img:hover img { transform: scale(1.04); }
.sobre-text p {
  font-size: clamp(.9rem, 1.2vw, 1.06rem);
  line-height: 2; color: var(--hi); margin-bottom: 1.5rem;
}
.sobre-text p strong { color: var(--white); font-weight: 400; }

.pillars {
  display: grid; grid-template-columns: repeat(3,1fr);
  margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border);
}
.pillar {
  padding: 1.4rem 1rem 1.4rem 0;
  border-right: 1px solid var(--border);
}
.pillar:last-child { border-right: none; padding-right: 0; }
.pillar-icon  { font-size: 1rem; margin-bottom: .6rem; color: var(--teal-lt); }
.pillar-name  { font-family: var(--fd); font-size: 1.25rem; letter-spacing: .04em; color: var(--white); margin-bottom: .3rem; }
.pillar-desc  { font-size: .75rem; color: var(--body); line-height: 1.65; }

/* ── EDICIONES ──────────────────────────────────────────────── */
#ediciones { background: var(--ink2); padding: 0; }
.ediciones-header {
  padding: clamp(3.5rem,8vh,7rem) var(--pad) 2.5rem;
  max-width: 1380px; margin: 0 auto;
}
.ediciones-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.ed-card { position: relative; cursor: pointer; overflow: hidden; }
.ed-card img {
  width: 100%; height: clamp(240px, 40vw, 560px);
  object-fit: cover; object-position: center top;
  filter: brightness(.48);
  transition: filter .7s, transform .8s cubic-bezier(.23,1,.32,1);
}
.ed-card:hover img { filter: brightness(.65); transform: scale(1.03); }
.ed-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,9,9,.99) 0%, rgba(9,9,9,.65) 42%, rgba(9,9,9,.12) 72%, transparent 100%);
}
.ed-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.2rem 2rem; }
.ed-roman { font-family: var(--fd); font-size: 3.5rem; color: rgba(255,255,255,.05); line-height: 1; margin-bottom: .3rem; }
.ed-year  { font-size: .54rem; letter-spacing: .3em; text-transform: uppercase; color: var(--teal-lt); margin-bottom: .5rem; display: block; }
.ed-title { font-family: var(--fs); font-style: italic; font-size: clamp(1.2rem,2.2vw,2.2rem); color: var(--white); line-height: 1.2; margin-bottom: .4rem; text-shadow: 0 1px 20px rgba(0,0,0,.9); }
.ed-loc   { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: #888; }
.ed-badge {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: var(--teal-lt); color: var(--ink);
  font-size: .5rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .3rem .8rem; font-weight: 500;
}

/* ── CONCEPTO EDITORIAL ─────────────────────────────────────── */
.concepto-editorial {
  display: grid; grid-template-columns: 420px 1fr;
  gap: 70px; align-items: start;
}
.concepto-side { position: sticky; top: 120px; }
.concepto-title { margin-bottom: 30px; }
.concepto-title h2 { font-size: 4rem; line-height: .9; margin: 0; }
.concepto-title .big { font-size: clamp(3rem, 5vw, 5.5rem); color: var(--accent); }
.concepto-subtitle {
  display: block; margin-top: 1rem;
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(243,234,234,.98);
}
.concepto-title span {
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.concepto-photo img { width: 100%; display: block; border-radius: 12px; }
.concepto-content { max-width: 900px; }
.concepto-content p {
  font-size: 1rem; line-height: 1.95;
  color: rgba(255,255,255,.78); margin-bottom: 1.8rem;
}
.concepto-content .quote { margin: 3rem 0; padding-left: 2rem; border-left: 2px solid rgba(255,255,255,.25); }
.concepto-content .quote p { font-size: 1.5rem; color: #fff; line-height: 1.4; margin-bottom: .6rem; }
.concepto-content .quote cite { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.45); }
.concepto-text { max-width: 760px; }
.concepto-text p { font-size: 1rem; line-height: 1.9; color: rgba(255,255,255,.78); margin-bottom: 1.5rem; }
.concepto-text strong { color: #fff; letter-spacing: .08em; text-transform: uppercase; }
.quote { margin: 3rem 0; padding: 1.5rem 2rem; border-left: 2px solid rgba(255,255,255,.25); }
.quote p { font-size: 1.25rem; line-height: 1.5; color: #fff; margin-bottom: .6rem; }
.quote cite { color: rgba(255,255,255,.45); letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; }

/* ── PILARES ────────────────────────────────────────────────── */
.pilares-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--border);
}
.pilar {
  padding: 3rem 2.5rem; border-right: 1px solid var(--border);
  position: relative; overflow: hidden; transition: background .3s;
}
.pilar:last-child { border-right: none; }
.pilar::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 2px; height: 100%; background: var(--teal-lt);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.pilar:hover::before { transform: scaleY(1); }
.pilar:hover { background: rgba(255,255,255,.02); }
.pilar-bg   { font-family: var(--fd); font-size: 5rem; color: rgba(255,255,255,.025); line-height: 1; position: absolute; top: 1rem; right: 1.5rem; }
.pilar-icon { font-size: 1.3rem; margin-bottom: 1.5rem; color: var(--teal-lt); }
.pilar-name { font-family: var(--fd); font-size: clamp(2rem,3vw,2.6rem); color: var(--white); margin-bottom: .8rem; }
.pilar-desc { font-size: .9rem; color: #c4c4c4; line-height: 1.78; margin-bottom: 1.2rem; }
.pilar-list { list-style: none; }
.pilar-list li {
  font-size: .8rem; color: #909090;
  padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.055);
  display: flex; align-items: center; gap: .7rem;
}
.pilar-list li::before { content: ''; width: 3px; height: 3px; background: var(--teal-lt); border-radius: 50%; flex-shrink: 0; }

/* ── PROGRAMA ───────────────────────────────────────────────── */
.prog-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 3.5rem;
  padding-bottom: 2rem; border-bottom: 1px solid var(--border);
}
.prog-date { font-family: var(--fd); font-size: clamp(1.3rem,2.2vw,2.2rem); color: var(--teal-lt); display: block; }
.prog-loc  { font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; display: block; }
.prog-tabs { display: flex; margin-bottom: 2.5rem; flex-wrap: wrap; }
.tab-btn {
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .65rem 1.4rem; background: none;
  border: 1px solid var(--border); border-right: none;
  color: var(--muted); cursor: pointer; transition: all .25s; font-family: var(--fb);
}
.tab-btn:last-child { border-right: 1px solid var(--border); }
.tab-btn.active { background: var(--white); color: var(--ink); border-color: var(--white); }
.tab-btn:hover:not(.active) { color: var(--white); background: rgba(255,255,255,.04); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.prog-row {
  display: grid; grid-template-columns: 82px 1fr 145px;
  gap: 2rem; padding: 1.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  align-items: start; opacity: 0; transform: translateX(-10px);
  transition: opacity .45s, transform .45s;
}
.prog-row.visible { opacity: 1; transform: translateX(0); }
.prog-date-col { font-family: var(--fd); font-size: 1.05rem; color: var(--mid); line-height: 1.2; }
.prog-title    { font-family: var(--fs); font-style: italic; font-size: clamp(1.1rem,1.7vw,1.5rem); color: var(--white); margin-bottom: .4rem; }
.prog-desc     { font-size: .87rem; color: var(--body); line-height: 1.72; }
.prog-venue    { font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: right; line-height: 1.8; }

/* Program slider */
.program-slider{
  position:relative;
  width:100%;
  max-width:1000px;
  margin:3rem auto;

  aspect-ratio:19/9;

  overflow:hidden;
  border-radius:16px;
}

.program-img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;

  opacity:0;

  transition:opacity 1.2s ease;
}

.program-img.active{
  opacity:1;
  z-index:2;
}

.program-caption{
  max-width:900px;
  margin:auto;
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.8;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ── LA IMAGEN ES EL PUENTE ─────────────────────────────────── */
.bridge-text {
  max-width: 900px; margin: 1rem auto 3rem;
  text-align: center; color: var(--muted);
  letter-spacing: .15em; text-transform: uppercase; font-size: .75rem;
}
.bridge-slider { position: relative; overflow: hidden; width: 100%; }
.bridge-slider::before, .bridge-slider::after {
  content: ''; position: absolute; top: 0; width: 120px; height: 100%;
  z-index: 2; pointer-events: none;
}
.bridge-slider::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.bridge-slider::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.bridge-track {
  display: flex; gap: 18px; width: max-content;
  animation: bridgeScroll 90s linear infinite;
}
.bridge-track img {
  width: clamp(260px, 30vw, 420px); height: clamp(180px, 20vw, 280px);
  object-fit: cover; flex-shrink: 0; border-radius: 10px;
  filter: grayscale(15%) brightness(.82);
  transition: transform .6s ease, filter .6s ease;
}
.bridge-track img:hover { transform: scale(1.03); filter: grayscale(0%) brightness(1); }
@keyframes bridgeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── GALERÍA ────────────────────────────────────────────────── */
#galeria { background: var(--ink2); }
.gallery-grid {
  display: grid; grid-template-columns: repeat(12,1fr);
  grid-auto-rows: 195px; gap: 2px; margin-top: 2.5rem;
}
.gal-item { overflow: hidden; background: var(--panel); cursor: pointer; }
.gal-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(15%) brightness(.7);
  transition: filter .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1);
}
.gal-item:hover img { filter: grayscale(0%) brightness(1); transform: scale(1.06); }
.gal-item.g1 { grid-column: span 7; grid-row: span 2; }
.gal-item.g2 { grid-column: span 5; }
.gal-item.g3 { grid-column: span 5; }
.gal-item.g4 { grid-column: span 4; grid-row: span 2; }
.gal-item.g5 { grid-column: span 8; grid-row: span 2; }
.gallery-foot { display: flex; justify-content: space-between; margin-top: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.gal-caption  { font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* Galería carrusel infinito */
.galeria-slider { position: relative; width: 100%; overflow: hidden; margin: 2.5rem 0 2rem; }
.galeria-slider::before, .galeria-slider::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: clamp(60px, 8vw, 140px); z-index: 2; pointer-events: none;
}
.galeria-slider::before { left: 0;  background: linear-gradient(to right, var(--ink2) 0%, transparent 100%); }
.galeria-slider::after  { right: 0; background: linear-gradient(to left,  var(--ink2) 0%, transparent 100%); }
.galeria-track {
  display: flex; align-items: center; gap: 12px;
  width: max-content;
  animation: galeria-scroll 40s linear infinite;
  will-change: transform;
}
.galeria-slider:hover .galeria-track { animation-play-state: paused; }
.galeria-track img {
  height: clamp(180px, 28vw, 380px); width: auto;
  object-fit: cover; flex-shrink: 0; display: block;
  filter: brightness(.85);
  transition: filter .4s ease, transform .4s ease;
}
.galeria-track img:hover { filter: brightness(1); transform: scale(1.02); position: relative; z-index: 1; }
@keyframes galeria-scroll { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }

/* ── ALIADOS — Cinta infinita ───────────────────────────────── */
.aliados-banda {
  background: var(--ink2);
  padding: clamp(4rem,9vh,8rem) 0 clamp(3rem,7vh,6rem);
  overflow: hidden;
}
.aliados-header {
  max-width: 1380px; margin: 0 auto;
  padding: 0 var(--pad); margin-bottom: 3.5rem;
}
.aliados-cinta-wrap { position: relative; width: 100%; overflow: hidden; }
.aliados-fade {
  position: absolute; top: 0; bottom: 0;
  width: clamp(80px, 12vw, 180px); z-index: 2; pointer-events: none;
}
.aliados-fade-left  { left: 0;  background: linear-gradient(to right, var(--ink2) 0%, transparent 100%); }
.aliados-fade-right { right: 0; background: linear-gradient(to left,  var(--ink2) 0%, transparent 100%); }
.aliados-cinta {
  display: flex; width: max-content;
  animation: cinta-scroll 28s linear infinite;
  will-change: transform;
}
.aliados-cinta-wrap:hover .aliados-cinta { animation-play-state: paused; }
.aliados-track {
  display: flex; align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
  padding: 0 clamp(1.5rem, 3vw, 3rem);
}
.aliado-logo {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; height: clamp(60px, 10vw, 120px);
}
.aliado-logo img {
  height: 100%; width: auto; max-width: 220px;
  object-fit: contain; filter: none; opacity: 1;
}
@keyframes cinta-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── CONVOCATORIA ───────────────────────────────────────────── */
#convocatoria { background: var(--teal); padding: 0; }
.conv-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 75vh;
}
.conv-left {
  padding: clamp(3rem,8vh,7rem) var(--pad);
  display: flex; flex-direction: column; justify-content: center;
}
.conv-h { font-family: var(--fd); line-height: .88; color: var(--white); margin-bottom: 1.8rem; }
.conv-h .t1 { display: block; font-size: clamp(2.5rem,5vw,5.5rem); }
.conv-h .t2 { display: block; font-size: clamp(2.5rem,5vw,5.5rem); }
.conv-h .t3 {
  display: block; font-family: var(--fs); font-style: italic;
  font-size: clamp(2rem,4vw,4.5rem); color: var(--off);
  line-height: 1.1; letter-spacing: 0; margin-top: .2rem;
}
.conv-left p {
  font-size: clamp(.88rem,1.15vw,1.02rem);
  line-height: 1.9; color: rgba(255,255,255,.75); max-width: 480px;
}
.conv-right {
  padding: clamp(2.5rem,6vh,5rem) var(--pad);
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(0,0,0,.28); overflow-y: auto;
}

/* ── MANUAL LINKS ───────────────────────────────────────────── */
.manual-panel  { margin-bottom: 2rem; }
.manual-title  {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 1rem;
}
.manual-links  { display: flex; flex-direction: column; gap: .8rem; max-width: 320px; }
.manual-link   {
  display: flex; align-items: center; justify-content: space-between;
  text-decoration: none; padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); color: #fff;
  border-radius: 10px; transition: .3s ease;
  font-size: .82rem; letter-spacing: .04em;
}
.manual-link:hover { border-color: #4BB89D; background: rgba(75,184,157,.08); transform: translateX(4px); }
.manual-link span  { opacity: .9; }
.manual-link::after { content: "↗"; color: #4BB89D; font-size: .9rem; }
.manual-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 24px; background: transparent;
  border: 1px solid rgba(255,255,255,.16); color: #fff;
  border-radius: 10px; cursor: pointer; font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; transition: .35s ease;
}
.manual-btn svg    { width: 18px; height: 18px; stroke: currentColor; }
.manual-btn:hover  { background: #fff; color: #000; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* ── FORM ───────────────────────────────────────────────────── */
.form-title    { font-family: var(--fd); font-size: clamp(1.6rem,2.5vw,2.4rem); color: var(--white); margin-bottom: .3rem; letter-spacing: .02em; }
.form-subtitle { font-size: .72rem; color: rgba(255,255,255,.45); letter-spacing: .08em; margin-bottom: 2rem; display: block; }
.form-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .9rem; }
.form-grid.full { grid-template-columns: 1fr; }
.field         { display: flex; flex-direction: column; gap: .35rem; }
.field label   { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.field input,
.field select,
.field textarea {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--white); padding: .68rem 1rem;
  font-size: .88rem; font-family: var(--fb);
  outline: none; width: 100%;
  transition: border-color .25s, background .25s;
  -webkit-appearance: none;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,.22); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--teal-lt); background: rgba(255,255,255,.1); }
.field textarea { resize: vertical; min-height: 88px; line-height: 1.6; }
.field select option { background: #1a4a3a; color: #fff; }
.field small   { font-size: .7rem; color: rgba(255,255,255,.38); line-height: 1.5; margin-top: .2rem; }

/* Upload */
.upload-zone {
  border: 2px dashed rgba(255,255,255,.18); padding: 1.8rem 1.5rem;
  text-align: center; position: relative;
  transition: border-color .25s, background .25s; cursor: pointer;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--teal-lt); background: rgba(255,255,255,.04); }
.upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-icon  { font-size: 1.6rem; color: rgba(255,255,255,.25); margin-bottom: .5rem; }
.upload-label { font-size: .8rem; color: rgba(255,255,255,.5); }
.upload-label b { color: var(--teal-lt); font-weight: 400; }
.upload-hint  { font-size: .62rem; color: rgba(255,255,255,.28); margin-top: .25rem; }
.file-list    { margin-top: .7rem; text-align: left; }
.file-item    { font-size: .72rem; color: rgba(255,255,255,.6); padding: .18rem 0; display: flex; align-items: center; gap: .5rem; }
.file-item::before { content: '✓'; color: var(--teal-lt); font-size: .6rem; flex-shrink: 0; }

/* Checkboxes */
.check-row { display: flex; align-items: flex-start; gap: .8rem; margin: .9rem 0; }
.check-row input[type=checkbox] {
  width: 16px; height: 16px; margin-top: 2px;
  accent-color: var(--teal-lt); flex-shrink: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  border: 1px solid rgba(255,255,255,.3); border-radius: 3px;
  background: rgba(255,255,255,.06); position: relative;
  transition: border-color .2s, background .2s;
}
.check-row input[type=checkbox]:checked {
  background: var(--teal-lt); border-color: var(--teal-lt);
}
.check-row input[type=checkbox]:checked::after {
  content: '✓'; position: absolute; top: -1px; left: 2px;
  font-size: .7rem; color: var(--ink); font-weight: 700;
}
.check-row label { font-size: .75rem; color: rgba(255,255,255,.6); line-height: 1.5; cursor: pointer; }

.btn-submit {
  display: block; width: 100%; margin-top: 1.4rem;
  padding: .95rem 2rem; background: var(--white); color: var(--teal);
  font-family: var(--fb); font-size: .64rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background .25s, transform .15s;
}
.btn-submit:hover  { background: var(--off); transform: translateY(-1px); }
.btn-submit:active { transform: none; }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.form-success {
  display: none; margin-top: 1rem; padding: 1rem 1.2rem;
  background: rgba(61,184,138,.12); border: 1px solid rgba(61,184,138,.35);
  font-size: .85rem; color: rgba(255,255,255,.9); text-align: center; line-height: 1.6;
}
.form-success.show { display: block; }
.form-deadline {
  margin-top: 1.2rem; font-size: .56rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.32); text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   SECCIÓN DE PAGO — FotoFest 2026
   ══════════════════════════════════════════════════════════════ */
.pago-section {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 1.5rem; padding-top: 1.5rem;
}
.pago-titulo {
  font-family: var(--fd); font-size: 1.3rem;
  color: #fff; letter-spacing: .04em; margin-bottom: .3rem;
}
.pago-desc {
  font-size: .78rem; color: rgba(255,255,255,.45);
  line-height: 1.55; margin-bottom: 1rem;
}

/* Tarjetas de selección */
.pago-tarjetas { display: flex; gap: 10px; margin-bottom: 1rem; }
.pago-tarjeta {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.04);
  transition: border-color .2s, background .2s;
  font-size: .82rem; color: rgba(255,255,255,.8); line-height: 1.4;
}
.pago-tarjeta:hover      { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.07); }
.pago-tarjeta.seleccionada { border-color: var(--teal-lt); background: rgba(61,184,138,.08); }

/* Radio dentro de tarjeta */
.pago-tarjeta input[type="radio"] {
  width: 15px; height: 15px; flex-shrink: 0;
  accent-color: var(--teal-lt); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 50%;
  aspect-ratio: 1; transition: border-color .15s, background .15s;
  box-sizing: content-box;
}
.pago-tarjeta input[type="radio"]:checked {
  border-color: var(--teal-lt);
  background: var(--teal-lt);
}

.pago-tarjeta-icon {
  font-size: 1.25rem; flex-shrink: 0;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  line-height: 1;
}
.pago-tarjeta-texto {
  display: flex; flex-direction: column;
  font-size: .8rem; color: rgba(255,255,255,.85); line-height: 1.35;
}
.pago-tarjeta-texto small {
  font-size: .7rem; color: rgba(255,255,255,.4); margin-top: 1px;
}

/* Panel de instrucciones */
.pago-box {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 22px; margin-top: 12px;
}
.pago-box:hover { border-color: rgba(255,255,255,.18); }
.pago-instrucciones {
  color: rgba(255,255,255,.75); font-size: .82rem;
  line-height: 1.7; margin-bottom: 18px; letter-spacing: .03em;
}
.pago-box small {
  display: block; margin-top: 16px;
  color: rgba(255,255,255,.45); font-size: .72rem; line-height: 1.6;
}

/* Botón de pago (enlace) */
.pago-link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff; text-decoration: none;
  text-transform: uppercase; letter-spacing: .15em;
  font-size: .72rem; font-weight: 600;
  transition: all .35s ease;
}
.pago-link:hover {
  background: #fff; color: #000;
  border-color: #fff; transform: translateY(-2px);
}

/* Comprobante */
#bloque-comprobante { margin-top: .3rem; animation: fadeInDown .25s ease; }
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CONTACTO ───────────────────────────────────────────────── */
#contacto { background: var(--ink2); padding-bottom: 0; }
.contact-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem; padding-bottom: clamp(4rem,8vh,6rem);
  border-bottom: 1px solid var(--border);
}
.contact-big { font-family: var(--fd); font-size: clamp(2.5rem,5vw,5rem); line-height: .88; color: var(--white); }
.contact-big a { color: var(--white); text-decoration: none; display: block; transition: color .25s; }
.contact-big a:hover { color: var(--teal-lt); }
.contact-col h3 { font-size: .54rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.contact-col a  { display: block; font-size: .9rem; color: #ccc; text-decoration: none; margin-bottom: .45rem; transition: color .25s; }
.contact-col a:hover { color: var(--white); }

.footer-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 0; flex-wrap: wrap; gap: 1rem;
}
.footer-logo { height: 50px; width: auto; filter: none; opacity: 1; transition: opacity .3s; }
.footer-logo:hover { opacity: .8; }
.footer-copy { font-size: clamp(.6rem,.8vw,.68rem); letter-spacing: .07em; color: rgba(255,255,255,.85); }

.instagram-link {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; opacity: .75; transition: all .3s ease;
}
.instagram-link:hover { opacity: 1; transform: translateY(-2px); }
.instagram-link svg   { width: 32px; height: 32px; }

/* ── LIGHTBOX ───────────────────────────────────────────────── */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,.95);
  flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
}
.lightbox.open { display: flex; }
.lightbox-inner {
  position: relative; display: flex; align-items: center; justify-content: center;
  flex: 1; width: 100%; overflow: hidden;
}
.lightbox-img {
  max-width: min(88vw,500px); max-height: 78vh;
  object-fit: contain; display: none;
  box-shadow: 0 0 80px rgba(0,0,0,.9);
}
.lightbox-img.active { display: block; }
.lightbox-close {
  position: fixed; top: 1.5rem; right: 1.8rem; z-index: 8001;
  background: none; border: none; color: rgba(255,255,255,.65);
  font-size: 2.2rem; cursor: pointer; line-height: 1;
  transition: color .2s, transform .2s;
}
.lightbox-close:hover { color: #fff; transform: scale(1.15); }
.lightbox-lang { display: flex; gap: .8rem; margin-bottom: 1.5rem; }
.lb-btn {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .5rem 1.4rem; cursor: pointer; transition: all .25s; font-family: var(--fb);
}
.lb-btn.active { background: rgba(255,255,255,.95); color: #0a0a0a; border-color: transparent; }
.lb-btn:hover:not(.active) { background: rgba(255,255,255,.18); color: #fff; }

/* Lightbox galería */
#galleryLightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.95);
  display: none; justify-content: center; align-items: center; z-index: 9999;
}
#galleryLightbox.open { display: flex; }
#galleryLightboxImg { max-width: 90vw; max-height: 90vh; object-fit: contain; }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .72s ease, transform .72s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
.reveal.d4 { transition-delay: .4s; }

/* Hero flyer */

.hero-flyer{
  position:relative;
  overflow:hidden;
  cursor:zoom-in;

  width:100%;
  max-width:520px;
  margin:auto;

  border-radius:14px;
}

/* Aliados — cats legacy */
.aliados-cats  { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 3.5rem; }
.aliados-label { font-size: .54rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.aliados-row   { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.aliado-pill   { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #b0b0b0; border: 1px solid var(--border); padding: .5rem 1.2rem; transition: color .25s, border-color .25s; }
.aliado-pill:hover { color: var(--white); border-color: #666; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 1200px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .concepto-editorial { grid-template-columns: 360px 1fr; gap: 50px; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .contact-big  { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 992px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  #hero { flex-direction: column; height: auto; min-height: 100svh; }
  .hero-flyer {
    width: 100%; height: 55vw; min-height: 280px; max-height: 420px;
  }
  .hero-flyer::after { background: linear-gradient(to bottom, transparent 55%, var(--ink) 100%); }
  .hero-text {
    flex: none; padding: 2.5rem var(--pad) 4rem;
    justify-content: flex-start;
  }
  .hero-eyebrow { position: static; margin-bottom: 1.2rem; opacity: 1; animation: none; }
  .hero-h1      { opacity: 1; animation: none; }
  .hero-meta    { opacity: 1; animation: none; margin-top: 1.5rem; margin-bottom: 1.8rem; }
  .hero-buttons { opacity: 1; animation: none; }
  .hero-scroll-ind { display: none; }

  .sobre-grid      { grid-template-columns: 1fr; gap: 3rem; }
  .sobre-img       { height: clamp(220px, 50vw, 360px); margin-top: 1.5rem; }
  .pillars         { grid-template-columns: 1fr; }
  .pillar          { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; }
  .pillar:last-child { border-bottom: none; }

  .concepto-editorial { grid-template-columns: 1fr; gap: 40px; }
  .concepto-side      { position: static; }
  .concepto-photo     { max-width: 480px; }

  .ediciones-grid { grid-template-columns: 1fr 1fr; }

  .pilares-grid { grid-template-columns: 1fr; }
  .pilar        { border-right: none; border-bottom: 1px solid var(--border); }
  .pilar:last-child { border-bottom: none; }

  .conv-wrapper { grid-template-columns: 1fr; min-height: auto; }
  .conv-left    { padding: clamp(3rem,6vh,5rem) var(--pad); }
  .conv-left p  { max-width: 100%; }
  .conv-right   { padding: clamp(2rem,5vh,4rem) var(--pad); }

  .program-slider { aspect-ratio: 16/9; max-width: 100%; overflow: hidden; }

  .contact-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 768px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { cursor: auto; }
  #cur { display: none; }

  /* Nav */
  .nav-links { display: none; }
  .nav-right { gap: 1rem; }
  .nav-hamburger { display: flex; }
  nav { padding: 1rem var(--pad); }
  .nav-logo { height: 26px; }
  .nav-cta  { display: none; }

  /* Hero */
  .hero-flyer { height: 50vw; min-height: 220px; }
  .hero-h1 .line-fotofest { white-space: normal; }

  /* Home slider */
  #home-slider { height: auto; min-height: unset; }
 
  /* Ediciones */
  .ediciones-grid { grid-template-columns: 1fr; }
  .ed-card img    { height: clamp(200px, 55vw, 320px); }

  /* Galería grid */
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .gal-item.g1, .gal-item.g2, .gal-item.g3, .gal-item.g4, .gal-item.g5 { grid-column: span 1; grid-row: span 1; }
  .gal-item.g1 { grid-column: span 2; }

  /* Programa */
  .prog-row    { grid-template-columns: 68px 1fr; gap: 1rem; }
  .prog-venue  { display: none; }
  .prog-tabs   { flex-wrap: wrap; }
  .tab-btn     { flex: 1 0 44%; border-right: 1px solid var(--border); text-align: center; }
  .program-slider { border-radius: 10px; margin: 2rem auto; }

  /* Bridge / galería carrusel */
  .bridge-track img { width: clamp(200px,55vw,300px); height: clamp(140px,38vw,200px); }
  .galeria-track img { height: clamp(140px,40vw,220px); }

  /* Contacto */
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-big  { grid-column: auto; }

  /* Footer */
  .footer-bar  { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-copy { font-size: .65rem; }

  /* Sec titles */
  .sec-h { margin-bottom: 2.5rem; }

  /* Concepto */
  .concepto-content p { font-size: .95rem; }
  .concepto-content .quote p { font-size: 1.2rem; }

  /* Aliados */
  .aliados-cinta { animation-duration: 20s; }
  .aliado-logo   { height: 50px; }
  .aliado-logo img { max-width: 110px; }
  .aliados-track { gap: 2.5rem; }

  /* Pago */
  .pago-tarjetas { flex-direction: column; }
  .pago-link     { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 576px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  :root { --pad: 1.2rem; }

  /* Hero */
  .hero-flyer { height: 52vw; }
  .hero-text  { padding: 2rem var(--pad) 3.5rem; }
  .hero-h1 .line-fotofest { font-size: clamp(3rem, 15vw, 5.5rem); }
  .hero-h1 .line-colombia { font-size: clamp(2rem, 9vw, 4rem); }
  .hero-h1 .line-sub      { font-size: clamp(1.6rem, 7vw, 3rem); }
  .hero-meta  { gap: .8rem; flex-wrap: wrap; }
  .hero-meta-sep { display: none; }
  .hero-buttons { flex-direction: column; }
  .btn-primary, .btn-outline { text-align: center; }

  /* Slider */
  #home-slider { height: auto; }

  /* Sección */
  .section { padding: clamp(3rem,8vh,6rem) var(--pad); }
  .eyebrow { margin-bottom: 1.8rem; }
  .sec-h .big { font-size: clamp(2.5rem, 11vw, 5rem); }

  /* Sobre */
  .sobre-img { height: clamp(180px,55vw,280px); }
  .sobre-text p { font-size: .92rem; }

  /* Ediciones */
  .ediciones-header { padding: clamp(2.5rem,6vh,4rem) var(--pad) 1.5rem; }
  .ed-info { padding: 1.5rem 1.2rem; }
  .ed-roman { font-size: 2.5rem; }
  .ed-title { font-size: 1.2rem; }

  /* Concepto */
  .concepto-editorial { gap: 2.5rem; }
  .concepto-content p { font-size: .9rem; line-height: 1.85; }
  .concepto-content .quote p { font-size: 1.1rem; }
  .concepto-photo { max-width: 100%; }

  /* Pilares */
  .pilar { padding: 2rem 1.5rem; }
  .pilar-name { font-size: clamp(1.6rem, 6vw, 2rem); }

  /* Programa */
  .prog-row { grid-template-columns: 60px 1fr; gap: .75rem; padding: 1.2rem 0; }
  .prog-date-col { font-size: .9rem; }
  .prog-title { font-size: 1rem; }
  .prog-desc  { font-size: .82rem; }
  .program-caption { font-size: .78rem; }
  .program-slider{
    aspect-ratio:unset;
    height:auto;
    border-radius:8px;
    margin:1.5rem auto;
  }
  
  .program-img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .program-img.active{
    opacity:1;
    z-index:2;
  }

  /* Bridge */
  .bridge-track { gap: 12px; animation-duration: 60s; }
  .bridge-track img { width: clamp(180px, 60vw, 280px); height: clamp(120px, 40vw, 180px); }

  /* Galería */
  .galeria-track img { height: clamp(130px, 42vw, 200px); }
  .galeria-track { gap: 8px; animation-duration: 28s; }
  .gallery-grid   { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .gal-item.g1    { grid-column: span 1; }

  /* Convocatoria */
  .conv-left  { padding: 2.5rem var(--pad); }
  .conv-right { padding: 2rem var(--pad); }
  .conv-h .t1, .conv-h .t2 { font-size: clamp(2rem, 10vw, 3.5rem); }
  .conv-h .t3 { font-size: clamp(1.6rem, 8vw, 2.8rem); }

  /* Form */
  .form-grid { grid-template-columns: 1fr; }
  .form-title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .manual-links { max-width: 100%; }

  /* Pago */
  .pago-tarjeta { padding: 10px 12px; }
  .pago-tarjeta-icon { font-size: 1.1rem; }
  .pago-box   { padding: 16px; }

  /* Contacto */
  .contact-big { font-size: clamp(2rem, 10vw, 3.5rem); }
  .contact-col a { font-size: .85rem; }

  /* Aliados */
  .aliados-cinta { animation-duration: 18s; }
  .aliado-logo   { height: 38px; }
  .aliado-logo img { max-width: 90px; }
  .aliados-track { gap: 2rem; }

  /* Footer */
  .footer-logo { height: 38px; }

  /* Lightbox */
  .lightbox-img { max-width: 95vw; }
  .lightbox-close { font-size: 1.8rem; top: 1rem; right: 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 420px
   ══════════════════════════════════════════════════════════════ */
   @media (max-width: 420px) {

    .hero-flyer { height: 60vw; }
    .hero-h1 .line-fotofest { font-size: clamp(2.6rem, 16vw, 4.5rem); }
  
    #home-slider {
      height: 55vh;
      min-height: 260px;
    }
  
    .ed-card img { height: clamp(180px, 60vw, 280px); }
  
    .pilar { padding: 1.5rem 1rem; }
  
    .pago-tarjetas { gap: 8px; }
    .pago-link { font-size: .68rem; padding: 10px 18px; }
  
    .btn-primary, .btn-outline { padding: .75rem 1.4rem; }
    .btn-submit { font-size: .6rem; padding: .88rem 1.5rem; }
  
    .sec-h .big { font-size: clamp(2.2rem, 13vw, 4rem); }
    .sec-h .serif { font-size: clamp(1.4rem, 6vw, 2.2rem); }
  
    .tab-btn { font-size: .52rem; padding: .5rem .8rem; }
    .prog-row { grid-template-columns: 1fr; gap: .5rem; }
    .prog-date-col { font-size: .85rem; color: var(--teal-lt); }
  
    .concepto-content .quote { padding-left: 1.2rem; }
    .concepto-content .quote p { font-size: 1rem; }
  
    .footer-copy { font-size: .58rem; }
  
    .aliados-cinta { animation-duration: 14s; }
    .aliado-logo { height: 30px; }
  }
/* ══════════════════════════════════════════════════════════════
   TOUCH & TÁCTIL
   ══════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .ed-card:hover img { filter: brightness(.48); transform: none; }
  .sobre-img:hover img { transform: none; }
  .galeria-track img:hover { transform: none; filter: brightness(.85); }
  .bridge-track img:hover { transform: none; }
  .nav-links a:hover { color: var(--muted); }
}

/* ══════════════════════════════════════════════════════════════
   2K / 4K
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  :root { --pad: clamp(5rem, 8vw, 10rem); }
  .section { max-width: 1600px; }
  .sec-h .big { font-size: clamp(7rem, 8vw, 10rem); }
  .hero-h1 .line-fotofest { font-size: clamp(10rem, 13vw, 14rem); }
  .bridge-track img { width: 520px; height: 340px; }
  .galeria-track img { height: 460px; }
}

/* ── Prevención de overflow horizontal global ──────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
* { min-width: 0; }


@media (max-width:768px){

  .program-slider{

    aspect-ratio:auto;

    min-height:260px;

  }

  .program-img{

    object-fit:contain;

  }

}