/* ============================================================
   COLABORACIONES STYLE — negro, dorado Diamond, rojo acento.
   Igual que exhib-style.css. Diseño fiel al brief: nav corto,
   divisor diamante, pósteres 3:4.
   ============================================================ */
:root {
  --mk-primario: #C0C0C0;   /* dorado Diamond */
  --mk-secundario: #8A0F1D; /* oscuro vino */
  --mk-fondo: #050505;
  --mk-texto: #F2F2F0;
  --mk-rojo: #E03A2F;
}

* { box-sizing: border-box; }
body.exhib-page {
  margin: 0;
  background: var(--mk-fondo);
  color: var(--mk-texto);
  font-family: 'Work Sans', system-ui, sans-serif;
  min-height: 100svh;
  overflow-x: clip;
}

/* ---------- Header ---------- */
.exhib-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 3rem);
  background: rgba(3,3,3,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(192,192,192,.18);
}
.logo-script { flex-shrink: 0; }
.logo-script img { height: 1.35rem; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.7)); }
.exhib-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(1.2rem, 3.5vw, 2.6rem); }
.exhib-nav a {
  color: rgba(242,242,240,.82); text-decoration: none;
  font-size: clamp(.72rem, 1.6vw, .85rem); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding-bottom: .3rem; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.exhib-nav a:hover { color: var(--mk-primario); }
.exhib-nav a.activo { color: var(--mk-primario); border-bottom-color: var(--mk-primario); }

/* ---------- Main ---------- */
.exhib-main { padding: clamp(4rem, 10vw, 6rem) clamp(1rem, 4vw, 2rem) 4rem; max-width: 1250px; margin: 0 auto; text-align: center; }
.exhib-logo-img { display: block; max-width: min(64vw, 320px); height: auto; margin: 0 auto clamp(1.2rem, 3vw, 2rem); filter: drop-shadow(0 6px 24px rgba(0,0,0,.8)); }
.exhib-titulo { font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .04em; color: #fff; line-height: 1; text-shadow: 0 4px 24px rgba(0,0,0,.85); }
.exhib-divider { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: clamp(1.4rem, 3.5vw, 2.2rem) auto clamp(2.5rem, 6vw, 3.8rem); }
.exhib-divider::before, .exhib-divider::after { content: ""; width: clamp(60px, 12vw, 130px); height: 1px; background: linear-gradient(90deg, transparent, rgba(192,192,192,.7)); }
.exhib-divider::after { background: linear-gradient(90deg, rgba(192,192,192,.7), transparent); }
.exhib-divider .diamante { width: 10px; height: 10px; background: var(--mk-primario); transform: rotate(45deg); box-shadow: 0 0 12px rgba(192,192,192,.8); flex-shrink: 0; }

/* ---------- Grid de pósteres ---------- */
.exhib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3.5vw, 2.6rem); margin-bottom: clamp(2.6rem, 6vw, 4rem); }
.exhib-grid--single { grid-template-columns: 1fr; max-width: 1250px; margin: 0 auto clamp(2.6rem, 6vw, 4rem); }
.exhib-grid--single .exhib-evento { width: 100%; max-width: 400px; justify-self: center; margin: 0; }
.exhib-evento { min-width: 0; }
.poster {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; padding: clamp(1.2rem, 3vw, 2rem) clamp(.9rem, 2.5vw, 1.5rem);
  border: 1px solid rgba(255,255,255,.08); background: linear-gradient(170deg, #1b1b1d 0%, #0c0c0d 55%, #070708 100%);
  text-decoration: none; color: inherit; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
a.poster:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -20px rgba(192,192,192,.35); }
.poster--proximo { background: linear-gradient(170deg, #232324 0%, #101011 60%, #080809 100%); }

/* póster con foto: la imagen rellena TODO el sobrecuadro (la foto ya contiene su info) */
.poster--imagen .p-foto {
  position: absolute; inset: 0; margin: 0; border: none; box-shadow: none;
  width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center;
}

/* textos del póster de texto */
.poster .mini-script { font-family: 'Great Vibes', cursive; font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: #fff; line-height: 1; margin-bottom: .4rem; }
.poster .badge { position: absolute; top: clamp(.9rem, 2.5vw, 1.4rem); right: clamp(.9rem, 2.5vw, 1.4rem); background: rgba(192,192,192,.92); color: #0A0A0B; font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(.65rem, 1.5vw, .8rem); letter-spacing: .1em; padding: .25rem .6rem; border-radius: 3px; line-height: 1.15; text-align: center; }
.poster .p-fecha-top { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(1rem, 2.4vw, 1.35rem); letter-spacing: .12em; color: #fff; }
.poster .p-titulo-top { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(.95rem, 2.2vw, 1.25rem); letter-spacing: .14em; color: #fff; }
.poster .p-grande { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: .95; letter-spacing: .03em; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.8); }
.poster .p-grande .y-roja { color: var(--mk-rojo); font-style: italic; }
.poster .p-fecha-linea { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(1.05rem, 2.5vw, 1.45rem); letter-spacing: .1em; color: #fff; }
.poster .p-patrocina { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(.85rem, 1.9vw, 1.05rem); letter-spacing: .08em; color: #fff; margin-top: .4rem; }
.poster .p-patrocina b { color: var(--mk-primario); }
.poster .p-presentado-por { font-size: clamp(.6rem, 1.4vw, .72rem); letter-spacing: .05em; color: rgba(242,242,240,.6); }

/* fila fecha/edición bajo cada póster */
.exhib-fecha-row { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: 1.1rem; text-align: left; }
.exhib-fecha-row .cal-icon { width: clamp(30px, 6vw, 38px); height: clamp(30px, 6vw, 38px); border: 1.5px solid var(--mk-primario); border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.exhib-fecha-row .cal-icon svg { width: 55%; height: 55%; stroke: var(--mk-primario); }
.exhib-fecha-row .fecha-txt strong { display: block; font-size: clamp(.8rem, 1.8vw, .95rem); font-weight: 700; letter-spacing: .08em; color: #fff; text-transform: uppercase; }
.exhib-fecha-row .fecha-txt span { display: block; font-size: clamp(.75rem, 1.7vw, .88rem); color: rgba(242,242,240,.6); font-style: italic; }

/* footer */
.exhib-footer { text-align: center; padding: clamp(2rem, 6vw, 3rem) clamp(1rem, 4vw, 2rem) 2.5rem; border-top: 1px solid rgba(192,192,192,.25); }
.exhib-footer p { font-size: clamp(.8rem, 1.9vw, .9rem); color: rgba(242,242,240,.55); }
.exhib-legal { margin-top: .7rem; font-size: .78rem; color: rgba(242,242,240,.4); }
.exhib-legal a { color: var(--mk-primario); text-decoration: none; }
.exhib-legal a:hover { text-decoration: underline; }

/* ---------- Toggle de menú (3 dots) ---------- */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 9001;
}
.menu-toggle .dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mk-texto);
  margin: 2px;
  transition: background .2s;
}
.menu-toggle:hover .dot { background: var(--mk-primario); }

/* ---------- Menú móvil ---------- */
@media (max-width: 900px) {
  .exhib-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }

  /* Menú toggle con 3 puntos */
  .menu-toggle {
    display: inline-flex;
    width: 32px;
    height: 32px;
    padding: 2px;
  }
  .menu-toggle .dot { width: 5px; height: 5px; margin: 2px; }

  /* Nav de escritorio oculto en móvil */
  .exhib-header > .exhib-nav { display: none !important; }

  /* Menú móvil: dropdown alineado a los 3 dots (no pantalla completa) */
  .exhib-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 0.5rem;
    background: rgba(5,5,6,.96);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(192,192,192,.35);
    border-radius: 8px;
    padding: clamp(0.8rem, 2vw, 1rem) clamp(1rem, 3vw, 1.4rem);
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    z-index: 9000;
  }
  .exhib-mobile-menu.open {
    display: grid !important;
    gap: 0.75rem;
    grid-template-columns: 1fr;
  }
  .exhib-mobile-menu a {
    color: rgba(242,242,240,.88);
    text-decoration: none;
    font-size: clamp(0.9rem, 2.2vw, 1rem);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(192,192,192,.12);
    display: block;
  }
  .exhib-mobile-menu a:hover { color: var(--mk-primario); }
  .exhib-mobile-menu a.activo { color: var(--mk-primario); }
}