/* Ficha de una edición de la copa
   Sólo lo PROPIO de esta sección. Lo compartido —fichas de color, menú,
   portada, cifras, hitos, pilares, mosaico, aliados, prensa, eventos,
   contacto, carrusel, video, pie— vive en v2.css, que se carga antes.
   La carga el layout a partir de `hojaSeccion` (ver views/layouts/v2.hbs). */

/* ─── Ficha de edición ────────────────────────────────────────────── */
/* Publicaciones de los clubes: el mismo carrusel de las opiniones, con el
   embed de Instagram dentro. Un escudo transparente tapa el embed: el
   iframe de otro origen se queda con el gesto y el carrusel no se podía
   arrastrar. Con el escudo, arrastrar desliza y tocar abre la publicación. */
.publicaciones {
  display: flex; gap: 14px;
  padding-inline: var(--gutter); padding-block: 2px 6px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.publicaciones::-webkit-scrollbar { display: none; }
.publicacion {
  flex: 0 0 min(340px, 84%); scroll-snap-align: start;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden;
}
.publicacion__club {
  display: flex; align-items: center; gap: 9px; padding: 14px 16px;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
}
/* El punto lleva el color del club; se lo pasa la vista por variable. */
.publicacion__color { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--club, var(--acento)); }
.publicacion__embed { position: relative; height: 470px; background: #000; }
.publicacion__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.publicacion__escudo { position: absolute; inset: 0; z-index: 1; }
.publicacion__escudo:focus-visible { outline: 2px solid var(--acento-chico); outline-offset: -4px; }

/* Detrás de cámaras: un póster que lleva al video, que está en Facebook y
   no se puede embeber. Mismo ancho y proporción que el video principal
   (.video, 16:9 a todo el contenedor). Antes llevaba un tope de 460 px de
   alto que lo encogía a 818 px y lo dejaba pegado a la izquierda. */
.bastidores {
  position: relative; display: block; width: 100%; overflow: hidden;
  border: 1px solid var(--linea); border-radius: var(--radio);
  aspect-ratio: 16 / 9;
  background: var(--superficie) center / cover no-repeat;
}
.bastidores__velo { position: absolute; inset: 0; background: rgba(18,20,24,.52); transition: background .2s; }
.bastidores:hover .bastidores__velo { background: rgba(18,20,24,.34); }
.bastidores__play {
  position: absolute; inset: 0; margin: auto;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--acento); color: var(--negro);
  display: flex; align-items: center; justify-content: center;
}
.bastidores__play svg { width: 28px; height: 28px; margin-left: 4px; }
.bastidores__donde {
  position: absolute; left: 22px; bottom: 20px;
  font-size: 14px; font-weight: 800;
}

/* Paso de una edición a otra: dos controles chicos, uno al lado del otro en
   cualquier ancho, con «Anterior»/«Siguiente» y el año. Al centro, todas. */
.entre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; max-width: 560px; margin-inline: auto; }
.entre__ir {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px;
  padding: 10px 16px; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--radio-sm);
  transition: border-color .15s;
}
.entre__ir:hover { border-color: var(--tinta); }
.entre__ir--sig { justify-content: flex-end; text-align: right; }
.entre__anio { font-size: 18px; font-weight: 900; line-height: 1.1; color: var(--acento); }
.entre__que { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.entre__todas {
  display: flex; align-items: center; justify-content: center; min-width: 52px; padding: 0 14px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-sm);
  color: var(--tinta-2); transition: border-color .15s, color .15s;
}
.entre__todas:hover { border-color: var(--tinta); color: var(--tinta); }
.entre__todas svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .publicacion__embed { height: 420px; }
}