/* ==========================================================================
   GOA 007 — El inicio (nació como "propuesta 2", de ahí el nombre del archivo)
   Va encima de goa.css: la misma letra, el mismo oro y las mismas piezas. Aquí
   solo está lo que cambia respecto de la primera versión: el próximo evento en grande en la cartelera, la
   sección "Somos GOA" que junta tres, el pie con el mapa y apariciones más
   ágiles para que nada se quede en negro esperando.
   ========================================================================== */

/* Apariciones: más cortas (y en goa.js empiezan un poco antes de entrar) */
.js [data-reveal] { transition-duration: 0.7s, 0.8s; }
.line-mask > span { transition-duration: 0.9s; }

/* --------------------------------------------------------------------------
   Cartelera: el próximo evento en grande
   -------------------------------------------------------------------------- */
.spot--home { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.spot--home .spot__flyer { width: 100%; max-width: 560px; position: sticky; top: calc(var(--nav-h) + 24px); }
.spot--home .spot__flyer-in { display: block; }
.spot--home .spot__name { font-size: clamp(60px, 6.4vw, 116px); margin-top: 20px; }
.spot--home .spot__when { margin-top: 20px; }
.spot--home .clock { margin-top: 22px; }
.spot--home .spot__desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.spot--home .lineup { margin-top: 24px; }
.spot--home .spot__ctas { margin-top: 30px; }

/* Cada noche del inicio va en grande: entre una y otra, aire y una línea */
.spot--home + .spot--home { margin-top: clamp(56px, 7vw, 110px); padding-top: clamp(56px, 7vw, 110px); border-top: 1px solid var(--line); }
/* Lo vende otra productora: de quién son las entradas y su precio, bajo el botón */
.productora { font-size: 13px; line-height: 1.5; color: var(--text-3); }
.productora b { font-weight: 600; color: var(--text-2); }
.productora span { display: block; }
.spot__productora { margin-top: 14px; }
.cartelera__ig {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
  margin-top: clamp(44px, 5vw, 72px); padding-top: 22px; border-top: 1px solid var(--line);
  font-family: var(--f-serif); font-style: italic; font-size: clamp(19px, 1.6vw, 24px); color: var(--text-2);
}
.cartelera__ig .link-arrow { font-style: normal; }

@media (max-width: 900px) {
  .spot--home { grid-template-columns: 1fr; }
  .spot--home .spot__flyer { max-width: 420px; position: relative; top: auto; }
}
@media (max-width: 760px) {
  .spot--home { gap: 30px; }
  .spot--home .spot__name { font-size: clamp(52px, 15vw, 80px); }
  .spot--home .clock { gap: 6px; }
  .spot--home .clock div { padding: 12px 6px 10px; }
  .spot--home .spot__ctas { grid-template-columns: 1fr; }
  .cartelera__ig { flex-direction: column; gap: 12px; }
}

/* --------------------------------------------------------------------------
   Somos GOA: qué es, la casa y quiénes somos en una sola sección
   -------------------------------------------------------------------------- */
.manifiesto__media .m2--neon { background: #000; }
.manifiesto__media .m2--neon img { object-position: 50% 40%; animation: flicker 6s infinite; }

.casa { margin-top: var(--sec-aire); }

/* --------------------------------------------------------------------------
   Lo que ya se vivió: dos enlaces en la cabecera
   -------------------------------------------------------------------------- */
.section__links { display: flex; flex-wrap: wrap; gap: 14px 30px; }

/* --------------------------------------------------------------------------
   Pie con el mapa: Cómo llegar ya no es una sección aparte
   -------------------------------------------------------------------------- */
/* Las preguntas ya dejan su aire abajo: el pie no suma otro igual */
.foot--v2 { padding-top: clamp(72px, 8vw, 130px); }
.foot--v2 .foot__mark { margin-top: clamp(80px, 10vw, 160px); }
.foot--v2 .foot__mark img { width: min(70vw, 900px); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__nav a { transition: color 0.3s; }
.foot__nav a:hover { color: var(--gold-2); }

@media (max-width: 760px) {
  .foot--v2 { padding-top: 64px; }
  .foot--v2 .foot__mark { margin-top: 72px; }
  .foot--v2 .foot__bottom { flex-direction: column; align-items: flex-start; }
}