/* Bring the experience home — illustrated story loops (Oct 2026) */
.venue-images .venue-story {
  grid-column: 1/-1;
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fdfaf2; /* the illustration paper */
}
.venue-home {
  max-width: 32ch;
  margin: -12px 0 28px;
  color: var(--venue-text);
  font: 400 17px/1.5 "Hanken Grotesk", sans-serif;
}
.tiles .tile-story {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fdfaf2;
}
.tiles img[src^="assets/stories/"] {
  background: #fdfaf2;
}
.employment .jobs img[src^="assets/stories/"] {
  background: #fdfaf2;
}
@media (max-width: 760px) {
  .venue-home {
    margin-top: -6px;
    font-size: 16px;
  }
}

/* Jobs carousel: brand cards (photo render + floor badge + kinetic tagline)
   alternate with the illustrations, in the spirit of the Firma and wavy bento tiles. */
.jobs .job-brand { display: none; } /* no-JS grid keeps the plain photo */
.job-carousel .job-mask { position: relative; }
.job-carousel .job-mask .job-brand {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px 24px 28px; pointer-events: none;
}
.job-mask .job-brand::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgb(20 24 21 / 78%) 0%, rgb(20 24 21 / 24%) 46%, rgb(20 24 21 / 0%) 62%),
    linear-gradient(180deg, rgb(20 24 21 / 18%), rgb(20 24 21 / 0%) 30%);
}
.employment .job-carousel .jobs img.job-brand-badge {
  flex: none; width: 92px; height: 92px; aspect-ratio: 1; object-fit: contain;
  border-radius: 50%; transform: none; box-shadow: 0 10px 28px rgb(0 0 0 / 28%);
}
.job-brand-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.job-brand-copy small {
  padding: 6px 12px; border-radius: 99px; background: var(--lush, #00d66b); color: #202622;
  font: 700 11px/1 "Space Mono", monospace; letter-spacing: .16em; text-transform: uppercase;
}
.job-brand-card[data-brand="punto"] .job-brand-copy small { background: #c13b30; color: #fff; }
.job-brand-card[data-brand="novedades"] .job-brand-copy small { background: #ece3d3; color: #273224; }
.job-brand-line {
  display: flex; flex-direction: column; color: #f7f4ec;
  font: 400 clamp(26px, 2.3vw, 34px)/1.04 Newsreader, serif; letter-spacing: -.02em;
}
.job-brand-line .jb-row { display: flex; flex-wrap: wrap; column-gap: .24em; }
.job-brand-line .jb-row + .jb-row { font-style: italic; color: var(--lush, #00d66b); }
.job-brand-card[data-brand="punto"] .jb-row + .jb-row { color: #f6c9b9; }
.job-brand-card[data-brand="novedades"] .jb-row + .jb-row { color: #e4d2ac; }
.job-brand-line .w { display: inline-block; overflow: hidden; padding: .04em .02em .14em; margin: -.04em -.02em -.14em; }
.job-brand-line .w > span { display: inline-block; }

/* Each time a brand card reaches the centre: the badge pops in, the words rise one by one,
   then hop in a slow wave while it stays there. */
.job-brand-card.is-current .job-brand-badge {
  animation: jb-pop 700ms cubic-bezier(.22, 1, .36, 1) 120ms both, jb-bob 4.2s ease-in-out 1s infinite;
}
.job-brand-card.is-current .w > span {
  animation: jb-rise 820ms cubic-bezier(.2, 0, 0, 1) both, jb-hop 6s cubic-bezier(.2, 0, 0, 1) infinite;
  animation-delay: calc(260ms + var(--i, 0) * 85ms), calc(2.4s + var(--i, 0) * 90ms);
}
@keyframes jb-pop { 0% { transform: scale(.4) rotate(-24deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes jb-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes jb-rise { 0% { transform: translateY(110%); } 100% { transform: none; } }
@keyframes jb-hop { 0%, 82%, 100% { transform: none; } 88% { transform: translateY(-.14em); } 94% { transform: translateY(.02em); } }
.jobs-motion-paused .job-brand-card .job-brand-badge,
.jobs-motion-paused .job-brand-card .w > span { animation: none !important; } /* paused = finished, static state */
@media (max-width: 767px) {
  .job-carousel .job-mask .job-brand { padding: 18px 18px 22px; }
  .employment .job-carousel .jobs img.job-brand-badge { width: 68px; height: 68px; }
  .job-brand-line { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .job-brand-card .job-brand-badge, .job-brand-card .w > span { animation: none !important; }
}

/* Every third slide: text-only brand messaging on wavy lines, one per floor colour,
   extending the bento's wavy-type tile. Carousel-only (hidden in the no-JS grid). */
.jobs-column:not(.job-carousel) .job-text-card { display: none; }
.employment .job-carousel .jobs img.job-text-anchor { display: none; }
.jobs .job-text { display: none; }
.job-carousel .job-mask .job-text { position: absolute; inset: 0; display: block; background: var(--jt-bg); }
.job-wavy { position: absolute; inset: 0; width: 100%; height: 100%; }
.job-wavy text { font: 800 31px/1 "Hanken Grotesk", sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.job-wavy .jt-a { fill: var(--jt-a); }
.job-wavy .jt-b { fill: var(--jt-b); }
.job-text-card[data-brand="punto"] { --jt-bg: #c13b30; --jt-a: #f6eee2; --jt-b: #f0b8a5; }
.job-text-card[data-brand="novedades"] { --jt-bg: #273224; --jt-a: #ece3d3; --jt-b: #b7c3a2; }
.job-text-card[data-brand="terraza"] { --jt-bg: #db7d61; --jt-a: #fbf3e8; --jt-b: #2b2a26; }
.job-brand-card[data-brand="terraza"] .job-brand-copy small { background: #db7d61; color: #fff; }
.job-brand-card[data-brand="terraza"] .jb-row + .jb-row { color: #f3c4b0; }
/* Terraza class render: faces sit high, so anchor the crop to the top and keep the badge on hair, not faces. */
.employment .job-carousel .jobs .job-brand-card[data-brand="terraza"] .job-mask > img:first-child { object-position: 50% 0%; transform-origin: 50% 0%; }
.employment .job-carousel .jobs .job-brand-card[data-brand="terraza"] img.job-brand-badge { width: 74px; height: 74px; }
@media (max-width: 767px) {
  .employment .job-carousel .jobs .job-brand-card[data-brand="terraza"] img.job-brand-badge { width: 60px; height: 60px; }
}

/* A native keyboard-operable control per loop; the poster stays static without JS. */
.story-player { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; }
.venue-images > .story-player { grid-column: 1/-1; }
.story-toggle {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  min-height: 44px; padding: 10px 14px; border: 1px solid #202622;
  border-radius: 6px; background: #fdfaf2; color: #202622;
  font: 600 14px/1.2 "Hanken Grotesk", sans-serif; cursor: pointer;
}
.story-toggle:focus-visible { outline: 3px solid #202622; outline-offset: 3px; }
.story-toggle[hidden] { display: none; }