/* Secciones posteriores a la invitación: cartelera, desplegable «Descubre más»,
   visión, recorrido, cinta de marcas, preguntas y cierre. Escala editorial de la invitación. */

.wrap { max-width: 860px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

.eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 10px/1.35 "Vivita Bashan", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--red); flex: none; }
.eyebrow--oro { color: var(--gold); justify-content: center; }
.eyebrow--oro::before { background: var(--gold); }

.titulo-seccion {
  margin: 20px 0 0;
  font-family: "Vivita Bashan", sans-serif;
  font-weight: 500;
  font-size: var(--fl-h2);
  line-height: 1.035;
  letter-spacing: -.024em;
}

/* ---------- Botón dorado con respiración ---------- */
@keyframes respirar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes halo {
  0% { box-shadow: 0 0 0 0 rgba(221, 186, 132, .5); }
  70%, 100% { box-shadow: 0 0 0 20px rgba(221, 186, 132, 0); }
}
.btn-oro {
  position: relative;
  min-height: 56px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  text-decoration: none;
  font: 500 13px/1.2 "Vivita Bashan", sans-serif;
  letter-spacing: .045em;
  animation: respirar 2.6s var(--ease-in-out) infinite;
  transition: box-shadow 160ms var(--ease-out), filter 100ms var(--ease-out);
}
.btn-oro:hover { box-shadow: 0 8px 24px rgba(221, 186, 132, .45); }
/* El activo no usa scale: la animación «respirar» pisa cualquier transform. */
.btn-oro:active { animation-play-state: paused; filter: brightness(.93); }
.btn-oro::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  pointer-events: none;
  animation: halo 2.6s var(--ease-out) infinite;
}
.btn-oro--quieto, .btn-oro--quieto::after { animation: none; }

.btn-rojo-grande {
  min-height: 56px;
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--red);
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  font: 500 13px/1.2 "Vivita Bashan", sans-serif;
  letter-spacing: .035em;
  transition: background 160ms var(--ease-out), transform 100ms var(--ease-out);
}
.btn-rojo-grande:hover { background: #8F101F; border-color: #8F101F; }
.btn-rojo-grande:active { transform: scale(.98); }

.pildora-gala {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font: 500 12px/1 "Vivita Bashan", sans-serif;
  letter-spacing: .05em;
}

/* ---------- Guía de vestimenta: tableros de Pinterest ---------- */
.dresscode-guia { margin: 16px 0 0; font-size: 14.5px; color: var(--muted); }
.dresscode-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.cartelera .dresscode-links { justify-content: center; }
.dresscode-link {
  min-height: 44px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(221, 186, 132, .55);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font: 500 12px/1 "Vivita Bashan", sans-serif;
  letter-spacing: .06em;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 100ms var(--ease-out);
}
.dresscode-link:hover { background: rgba(221, 186, 132, .14); border-color: var(--gold); }
.dresscode-link:active { transform: scale(.98); }
.dresscode-link svg { flex: none; color: var(--muted); }

/* ---------- #cartelera: riel horizontal ---------- */
.cartelera { background: var(--white); padding: 104px 0 96px; }
.riel {
  list-style: none;
  margin: 48px 0 0;
  padding: 8px max(24px, calc((100vw - 860px) / 2 + 8px)) 28px;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.riel::-webkit-scrollbar { display: none; }
.riel-item { flex: none; width: 260px; scroll-snap-align: start; }
.riel-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  border-radius: 10px;
  background: var(--ink);
  box-shadow: 0 18px 44px rgba(22, 22, 22, .16);
}
/* El título del póster va en tinta: el dorado sobre blanco no llega al contraste mínimo. */
.riel-titulo { margin: 20px 0 0; font: 500 21px/1.1 "Vivita Bashan", sans-serif; letter-spacing: -.01em; color: var(--ink); }
.riel-origen { margin: 8px 0 0; font: 500 10.5px/1.3 "Vivita Bashan", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cartelera .centro { text-align: center; }
.cartelera .pildora-gala { margin-top: 44px; }

/* ---------- Botón «Descubre más sobre Bashan» ---------- */
.btn-descubrir {
  width: 100%;
  max-width: 480px;
  min-height: 64px;
  margin: 40px auto 0;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font: 500 15px/1 "Vivita Bashan", sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  transition: box-shadow 160ms var(--ease-out), transform 100ms var(--ease-out);
}
.btn-descubrir:hover { box-shadow: 0 8px 24px rgba(221, 186, 132, .45); }
.btn-descubrir:active { transform: scale(.99); }
.btn-descubrir svg { flex: none; transition: transform 240ms var(--ease-out); }
.btn-descubrir[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Sin JavaScript el contenido queda visible y el botón no hace falta. */
html:not(.js) .btn-descubrir { display: none; }

/* ---------- Desplegable ---------- */
.mas {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 500ms var(--ease-drawer), opacity 420ms var(--ease-drawer), visibility 0s linear 0s;
}
.mas > .mas-interior { min-height: 0; overflow: hidden; }
html.js .mas.mas-cerrado {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 500ms var(--ease-drawer), opacity 420ms var(--ease-drawer), visibility 0s linear 500ms;
}

/* ---------- #festival: la visión ---------- */
.seccion-festival { background: var(--ivory); padding: 88px 0 104px; }
.vision { margin: 28px 0 0; max-width: 62ch; font-size: 19px; line-height: 1.58; color: var(--muted); }
.vision strong { color: var(--ink); font-weight: 600; }
.seccion-festival .btn-oro { margin-top: 40px; }

/* ---------- #recorrido ---------- */
.seccion-recorrido { background: var(--white); padding: 104px 0; }
.tiempos { list-style: none; margin: 56px 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.tiempos li {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.hora { font: 500 21px/1 "Vivita Bashan", sans-serif; letter-spacing: -.01em; color: var(--red); white-space: nowrap; }
.hora small { font-size: 12px; letter-spacing: .06em; }
.tiempos p { margin: 0; max-width: 62ch; font-size: 20px; line-height: 1.4; }
.tiempos p small { display: block; margin-top: 8px; font-size: 14.5px; color: var(--muted); }

.cintas-label {
  margin: 72px 0 0;
  font: 500 10px/1.35 "Vivita Bashan", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.cintas-label::before { content: ""; width: 24px; height: 2px; background: var(--red); flex: none; }
.cintas { list-style: none; margin: 8px 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.cintas li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.cintas h3 { margin: 0; font-family: "Vivita Bashan", sans-serif; font-weight: 500; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -.02em; }
.cintas span { font: 500 11px/1 "Vivita Bashan", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.seccion-recorrido .pildora-gala { margin-top: 48px; }
.seccion-recorrido .btn-oro { margin-top: 32px; }

/* ---------- Cinta de marcas ---------- */
.marcas { position: relative; background: var(--ink); padding: 64px 0 72px; overflow: hidden; }
/* Grano de película estático sobre la franja oscura. */
.marcas::after { content: ""; position: absolute; inset: 0; background-image: var(--grano); opacity: .05; pointer-events: none; }
.marquee {
  margin-top: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 76px;
  width: max-content;
  padding-right: 76px;
  animation: desfile 38s linear infinite;
}
@keyframes desfile {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.marca { flex: none; display: inline-flex; align-items: center; }
.marca img { height: var(--h, 30px); width: auto; display: block; }
.marca-nombre {
  font: 500 13px/1 "Vivita Bashan", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.marca-nombre--principal { font-size: 21px; letter-spacing: .1em; }

/* ---------- #preguntas: acordeón ---------- */
.seccion-preguntas { background: var(--ivory); padding: 104px 0 112px; }
.preguntas { margin-top: 52px; border-bottom: 1px solid var(--line); }
.qa { border-top: 1px solid var(--line); }
.qa summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  font: 500 17px/1.35 "Vivita Bashan", sans-serif;
  letter-spacing: -.005em;
  color: var(--ink);
  transition: background 150ms var(--ease-out);
}
.qa summary:hover { background: rgba(22, 22, 22, .035); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .qa-cheuron { flex: none; display: inline-flex; transition: transform 220ms var(--ease-out); }
.qa[open] summary .qa-cheuron { transform: rotate(180deg); }
.qa-respuesta { margin: 0; padding: 0 44px 28px 0; max-width: 62ch; font-size: 16.5px; line-height: 1.55; color: var(--muted); }
.qa-respuesta strong { color: var(--ink); font-weight: 600; }

/* ---------- Cierre ---------- */
.cierre { position: relative; background: var(--ink); color: var(--ivory); padding: 120px 0 0; text-align: center; }
/* Mismo grano de película que la cinta de marcas. */
.cierre::after { content: ""; position: absolute; inset: 0; background-image: var(--grano); opacity: .05; pointer-events: none; }
.cierre h2 {
  margin: 0 auto;
  max-width: 760px;
  font-family: "Vivita Bashan", sans-serif;
  font-weight: 500;
  font-size: var(--fl-h2b);
  line-height: 1.04;
  letter-spacing: -.024em;
  color: var(--ivory);
}
.cierre-linea {
  margin: 28px auto 0;
  font: 500 12.5px/1.6 "Vivita Bashan", sans-serif;
  letter-spacing: .18em;
  color: var(--gold);
  text-transform: uppercase;
}
.cierre .btn-rojo-grande { margin-top: 44px; }
.cierre-pie {
  margin-top: 112px;
  border-top: 1px solid rgba(221, 186, 132, .24);
  padding: 28px 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cierre-pie img { width: auto; opacity: .92; }
.cierre-pie a { min-height: 44px; display: inline-flex; align-items: center; transition: opacity 150ms var(--ease-out); }
.cierre-pie a:hover { opacity: .72; }
.pie-bashan { height: 19px; }
.pie-onset-oscuro { height: 15px; }
.pie-x { color: rgba(248, 248, 248, .4); font-size: 13px; }
.pie-texto { font: 500 10.5px/1 "Vivita Bashan", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(248, 248, 248, .55); }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .eyebrow { font-size: 9px; letter-spacing: .13em; gap: 8px; }
  .eyebrow::before { width: 18px; }
  .titulo-seccion { margin-top: 12px; }

  .cartelera { padding: 88px 0 80px; }
  .riel { margin-top: 36px; gap: 20px; padding-top: 4px; padding-bottom: 20px; }
  .riel-item { width: 220px; }
  .riel-titulo { font-size: 18px; margin-top: 16px; }
  .cartelera .pildora-gala { margin-top: 36px; }
  .dresscode-links { flex-direction: column; align-items: stretch; }
  .btn-descubrir { min-height: 60px; font-size: 14px; margin-top: 32px; }

  .seccion-festival { padding: 72px 0 88px; }
  .vision { margin-top: 20px; font-size: 16.5px; line-height: 1.5; }
  .btn-oro { width: 100%; min-height: 52px; font-size: 12px; }

  .seccion-recorrido { padding: 88px 0; }
  .tiempos { margin-top: 44px; }
  .tiempos li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .hora { font-size: 18px; }
  .tiempos p { font-size: 17.5px; }
  .cintas-label { margin-top: 56px; }
  .cintas li { padding: 24px 0; }
  .seccion-recorrido .pildora-gala { margin-top: 40px; font-size: 11px; }

  .marcas { padding: 56px 0 60px; }
  .marquee { margin-top: 32px; }
  .marquee-track { gap: 56px; padding-right: 56px; }
  .marca-nombre { font-size: 11px; }
  .marca-nombre--principal { font-size: 17px; }

  .seccion-preguntas { padding: 88px 0 96px; }
  .preguntas { margin-top: 40px; }
  .qa summary { font-size: 16px; padding: 20px 0; }
  .qa-respuesta { font-size: 15.5px; padding-right: 0; }

  .cierre { padding: 96px 0 0; }
  .cierre-linea { font-size: 10.5px; letter-spacing: .14em; max-width: 320px; }
  .cierre .btn-rojo-grande { width: calc(100% - 44px); max-width: 340px; }
  .cierre-pie { margin-top: 88px; gap: 12px; }
}