* {
  box-sizing: border-box;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
button {
  color: inherit;
} /* Accepted v4 review build. */
:root {
  --lush: #00d66b;
  --emerald: #005c3c;
  --deep: #02352a;
  --chalk: #f7f9f5;
  --sunken: #eaefe6;
  --graphite: #202622;
  --text: #414a44;
  --muted: #5a6259;
  --on: #edf3ef;
  --on2: #bad1c4;
  --hair: #dce3d8;
  --arena: #e9dec9;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
html {
  background: var(--chalk);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height, 83px) + 16px);
}
body {
  min-width: 320px;
  color: var(--graphite);
  font-family: "Hanken Grotesk", sans-serif;
  background: var(--chalk);
}
body::before {
  display: none;
}
* {
  box-sizing: border-box;
}
img {
  display: block;
  max-width: 100%;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
.wrap {
  width: min(1228px, calc(100% - 52px));
  margin: auto;
}
.skip {
  position: fixed;
  z-index: 20;
  top: 8px;
  left: 8px;
  padding: 10px;
  background: var(--graphite);
  color: var(--on);
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}
body > header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--chalk);
}
.bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  height: 80px;
}
.bar.wrap { width: min(1440px, calc(100% - 52px)); }
.bar > a { justify-self: start; }
.bar > a img {
  height: 42px;
  width: auto;
}
.nav {
  display: flex;
  gap: 22px;
  margin-left: 0;
}
.nav a,
.footer-links a,
.footer-links button {
  border: 0;
  background: none;
  color: var(--text);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.14em;
  text-decoration: none;
}
.nav a:hover {
  color: var(--emerald);
}
.nav a[aria-current="location"], #menu a[aria-current="location"] {
  color: var(--emerald);
  text-decoration: underline;
  text-decoration-color: var(--lush);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.actions {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
  white-space: nowrap;
}
.language {
  overflow: hidden;
  border: 1px solid #c0c9bc;
  border-radius: 99px;
}
.language button {
  border: 0;
  background: transparent;
  padding: 7px 12px;
  color: var(--text);
  font-size: 12px;
}
.language button[aria-pressed="true"] {
  background: var(--lush);
  color: var(--graphite);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 20px;
  color: var(--graphite);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition:
    transform 0.24s var(--ease),
    background 0.24s var(--ease),
    box-shadow 0.24s var(--ease);
}
.button:hover {
  box-shadow: 0 8px 20px rgba(32, 38, 34, 0.18);
  transform: translateY(-2px);
}
.lush {
  background: var(--lush);
}
.lush:hover {
  background: var(--chalk);
}
.dark {
  background: var(--graphite);
  color: var(--on);
}
.outline {
  border-color: var(--graphite);
  background: transparent;
}
.outline:hover {
  background: var(--graphite);
  color: var(--on);
}
.menu {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid #c0c9bc;
  border-radius: 50%;
  background: transparent;
  font-size: 22px;
}
.top-rule {
  display: block;
  height: 3px;
  background: linear-gradient(to right, var(--lush) 30%, var(--hair) 30%);
}
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 0;
  background: var(--emerald);
  color: var(--on);
}
.backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.13;
}
.hero .wrap {
  position: relative;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.kicker i {
  height: 1px;
  flex: 1;
  background: rgba(237, 243, 239, 0.35);
}
.kicker span:last-child {
  color: var(--on2);
}
.hero h1 {
  margin: 40px 0 0;
  font:
    300 clamp(64px, 9.69vw, 124px) / 0.94 Newsreader,
    serif;
  letter-spacing: -0.045em;
}
.hero h1 span {
  display: block;
  padding-left: 196px;
}
.hero em,
.section h2 em,
.close h2 em {
  font-style: italic;
  color: var(--lush);
}
.hero-copy {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-top: 40px;
}
.hero-copy > div {
  padding-left: 196px;
}
.hero-copy p {
  max-width: 440px;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}
.hero-copy small {
  display: block;
  margin-top: 14px;
  color: var(--on2);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.loop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 64px;
}
.loop figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 22px 22px 0 0;
  background: #00482f;
}
.loop figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: cycle 12s linear infinite;
}
.loop figure img:nth-of-type(2) {
  animation-delay: -4s;
}
.loop figure img:nth-of-type(3) {
  animation-delay: -8s;
}
.loop figure:nth-child(2) img {
  animation-delay: -1.4s;
}
.loop figure:nth-child(2) img:nth-of-type(2) {
  animation-delay: -5.4s;
}
.loop figure:nth-child(2) img:nth-of-type(3) {
  animation-delay: -9.4s;
}
.loop figure:nth-child(3) img {
  animation-delay: -2.8s;
}
.loop figure:nth-child(3) img:nth-of-type(2) {
  animation-delay: -6.8s;
}
.loop figure:nth-child(3) img:nth-of-type(3) {
  animation-delay: -10.8s;
}
.loop figcaption {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--lush);
  color: var(--graphite);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.16em;
}
.loop button {
  color: var(--graphite);
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--chalk);
  font:
    700 12px "Space Mono",
    monospace;
}
.loop-label {
  display: none;
}
.ticker {
  overflow: hidden;
  padding: 18px 0;
  background: var(--graphite);
  color: var(--on);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: marquee var(--ticker-duration, 42s) linear infinite;
}
.ticker-group {
  display: flex;
  flex: none;
}
.ticker-group > span {
  flex: none;
  padding-right: 1em;
}
.ticker b {
  color: var(--lush);
}
.paused .loop img,
.paused .ticker-track {
  animation-play-state: paused;
}
.section {
  padding: 104px 0;
}
.intro > .wrap {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.intro > .wrap > img {
  width: 130px;
}
.eyebrow {
  color: var(--muted);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.intro h2,
.history h2,
.map-card h2,
.employment h2 {
  max-width: 760px;
  margin: 16px 0 0;
  font:
    300 44px/1.16 Newsreader,
    serif;
  letter-spacing: -0.02em;
}
.intro h2 em {
  font-style: italic;
  color: var(--emerald);
}
.intro p {
  max-width: 640px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.68;
}
.italic {
  font-style: italic;
  color: var(--muted) !important;
  font-size: 15px !important;
}
.experience-index {
  padding: 30px 0 26px;
  background: var(--lush);
}
.experience-index h2 {
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  margin: 0;
  font-size: 17px;
}
.experience-index nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 92, 60, 0.25);
}
.experience-index a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 122px;
  padding: 18px 8px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms var(--ease);
}
.experience-index a:hover,
.experience-index a:focus-visible {
  color: var(--emerald);
}
.experience-index a:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 4px;
}
.experience-index a:active {
  color: var(--deep);
}
.experience-index small {
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.16em;
}
.experience-index b {
  display: block;
  font:
    400 clamp(18px, 2.2vw, 30px)/1.25 Marcellus,
    serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.experience-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
}
.experience-heading svg {
  flex: 0 0 20px;
}
.experience-index b.is-rolling {
  height: 1.25em;
  overflow: hidden;
  white-space: nowrap;
}
.experience-index .roll-letter {
  position: relative;
  display: inline-block;
  white-space: pre;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.experience-index .roll-letter::after {
  content: attr(data-letter);
  position: absolute;
  top: 100%;
  left: 0;
}
.experience-index a:hover .roll-letter,
.experience-index a:focus-visible .roll-letter {
  transform: translateY(-100%);
  transition-delay: calc(var(--letter) * 14ms);
}
@media (prefers-reduced-motion: reduce) {
  .experience-index .roll-letter {
    transform: none !important;
    transition: none !important;
  }
}
.venue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: max(0px, calc((100% - 1228px) / 2));
  min-height: 620px;
}
.venue-copy {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 96px 56px 96px 26px;
}
.venue-copy > div {
  position: relative;
  align-self: center;
  width: min(100%, 520px);
  margin-left: auto;
}
.num {
  position: absolute;
  right: 28px;
  bottom: -35px;
  opacity: 0.25;
  font:
    300 260px Newsreader,
    serif;
}
.floor,
.pill {
  display: inline-block;
  margin-bottom: 28px;
  padding: 7px 14px;
  border-radius: 99px;
  background: var(--lush);
  color: var(--graphite);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.18em;
}
.lockup {
  width: auto;
  max-height: 110px;
  margin-bottom: 26px;
}
.punto .lockup {
  max-height: 84px;
}
.venue-description {
  margin: 0 0 20px;
  color: var(--venue-ink);
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -0.025em;
}
.venue .tag {
  margin: 0 0 28px;
  color: var(--venue-accent);
  font:
    26px "DM Serif Display",
    serif;
}
.venue-cta {
  background: var(--venue-accent);
  color: var(--venue-button);
}
.endorsement {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--venue-hair);
  color: var(--venue-text);
  font:
    italic 21px Newsreader,
    serif;
}
.endorsement:first-letter {
  color: var(--lush);
}
.venue-images {
  display: grid;
  contain: size;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1.47fr) minmax(0, 1fr);
  gap: 2px;
  min-height: 620px;
}
.venue-images img {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.venue-images img:first-child {
  grid-column: 1/-1;
}
.punto {
  --venue-ink: #2a1b14;
  --venue-accent: #c13b30;
  --venue-button: #fff;
  --venue-hair: #d2c0a6;
  --venue-text: #6e5b4e;
  background: #f3e9dc;
}
.novedades {
  --venue-ink: #1e2a1b;
  --venue-accent: #273224;
  --venue-button: #ece3d3;
  --venue-hair: #c7baa0;
  --venue-text: #55604c;
  background: #eae3d2;
}
.novedades .venue-copy {
  padding: 96px 26px 96px 56px;
}
.novedades .venue-copy > div {
  margin-left: 0;
}
.novedades .venue-description {
  font-family: "Space Grotesk", sans-serif;
}
.novedades .tag {
  font-family: Newsreader, serif;
}
.terraza {
  --venue-ink: #2b2a26;
  --venue-accent: #db7d61;
  --venue-button: #2b2a26;
  --venue-hair: #cfc3ad;
  --venue-text: #6b6155;
  background: #f1ebdd;
}
.terraza .venue-description {
  font:
    500 40px/1.08 "Cormorant Garamond",
    serif;
}
.terraza .tag {
  color: var(--venue-ink);
  font:
    22px Marcellus,
    serif;
  letter-spacing: 0.06em;
}
.vision {
  background: var(--sunken);
}
.vision header {
  text-align: center;
  margin-bottom: 52px;
}
.pill {
  margin: 0;
}
.vision h2,
.principles h2,
.close h2 {
  margin: 26px 0 0;
  font:
    300 64px/1.02 Newsreader,
    serif;
  letter-spacing: -0.03em;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tiles.two {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
}
.tiles figure,
.history figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  margin: 0;
  border-radius: 22px;
}
.tiles.two figure {
  aspect-ratio: 3/2;
}
.tiles img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.42s var(--ease);
}
.tiles figure:hover img {
  transform: scale(1.03);
}
.tiles figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--graphite);
  color: var(--on);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tiles figcaption span {
  color: var(--on2);
}
.vision aside {
  margin: 20px 0;
  padding: 72px 64px;
  border-radius: 22px;
  background: var(--emerald);
  color: var(--on);
  text-align: center;
  font:
    300 36px/1.28 Newsreader,
    serif;
}
.principles > .wrap {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 80px;
}
.principles h2 {
  font-size: 52px;
}
.principles p {
  color: var(--text);
  line-height: 1.7;
}
.principles blockquote {
  margin: 32px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--lush);
  color: var(--emerald);
  font:
    italic 21px/1.55 Newsreader,
    serif;
}
.principles ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--hair);
}
.principles li {
  display: grid;
  grid-template-columns: 76px 1fr 28px;
  gap: 26px;
  align-items: center;
  padding: 20px 12px 20px 4px;
  border-top: 1px solid var(--hair);
  font:
    400 24px/1.28 Newsreader,
    serif;
}
.principles li i {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 22px;
  background: var(--emerald);
  color: var(--lush);
  font-style: normal;
  font-size: 32px;
}
.principles li b {
  color: var(--emerald);
  font:
    700 12px "Space Mono",
    monospace;
}
.history {
  background: var(--arena);
}
.history > .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.history figure {
  min-height: 420px;
}
.history figure > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.history figcaption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--graphite);
  color: var(--on);
  font:
    700 12px "Space Mono",
    monospace;
}
.accordion {
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: #fff;
}
.accordion button,
.accordion > p {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  background: #fff;
  color: var(--graphite);
  text-align: left;
  font:
    400 21px Newsreader,
    serif;
}
.accordion b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--sunken);
  font:
    700 12px "Space Mono",
    monospace;
}
.accordion button b {
  background: var(--lush);
}
.accordion button i {
  margin-left: auto;
  color: var(--emerald);
  font-style: normal;
}
.accordion > div {
  padding: 0 20px 20px 64px;
  border-bottom: 1px solid var(--hair);
}
.accordion > div p {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}
#conchita-copy p + p {
  margin-top: 1em;
}
.location {
  position: relative;
  border-top: 1px solid var(--hair);
}
.map {
  position: relative;
  overflow: hidden;
  height: 460px;
  background: var(--sunken);
}
.map iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
}
.map-card {
  position: absolute;
  top: 50%;
  right: max(96px, calc((100% - 1200px) / 2));
  width: 374px;
  transform: translateY(-50%);
  padding: 32px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(32, 38, 34, 0.1);
}
.map-card address,
.visit address {
  margin: 20px 0;
  font:
    400 20px/1.45 Newsreader,
    serif;
  font-style: normal;
}
.map-card > small:last-child {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.12em;
}
.employment {
  border-top: 1px solid var(--hair);
}
.employment > .wrap {
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  gap: 72px;
}
.employment p {
  color: var(--text);
  font-size: 17px;
  line-height: 1.68;
}
.jobs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.jobs figure {
  position: relative;
  min-height: 165px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
}
.jobs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jobs figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(32, 38, 34, 0.85));
  color: var(--on);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.08em;
}
.close {
  background: var(--lush);
  text-align: center;
}
.close > .wrap > img {
  width: 72px;
  margin: auto;
}
.close h2 {
  font-size: 112px;
}
.close h2 em {
  color: var(--emerald);
}
.close p {
  font-size: 18px;
}
.close ul {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
  margin: 34px auto;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.close li {
  padding: 8px 12px;
  border: 1px solid rgba(32, 38, 34, 0.38);
  border-radius: 99px;
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.08em;
}
.close > .wrap > div {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.visit {
  padding: 88px 0;
  background: var(--emerald);
  color: var(--on);
}
.visit > .wrap {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 60px;
}
.visit .eyebrow {
  color: var(--on2);
}
.visit address {
  font-size: 36px;
}
.venue-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.venue-cards .visit-card {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border: 0;
  border-radius: 14px;
  background: #00482f;
  color: var(--on);
  text-align: left;
  font:
    400 24px/1.15 Marcellus,
    serif;
}
.venue-cards small {
  font:
    700 12px "Space Mono",
    monospace;
}
.card-floor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--on2);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.16em;
}
.venue-cards .visit-card {
  transition:
    background 240ms var(--ease),
    transform 240ms var(--ease);
}
.venue-cards .visit-card:hover {
  background: var(--deep);
  transform: translateY(-2px);
}
.venue-cards b {
  font-weight: 400;
}
.card-floor i {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(237, 243, 239, 0.16);
}
.punto-dot {
  background: #c13b30;
}
.novedades-dot {
  background: #273224;
}
.terraza-dot {
  background: #db7d61;
}
.footer-links {
  padding: 68px 0;
  background: #00482f;
  color: var(--on);
}
.footer-links > .wrap {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 28px;
}
.footer-links img {
  height: 38px;
  width: auto;
}
.footer-links p {
  font:
    italic 21px Newsreader,
    serif;
}
.footer-links > div small {
  color: var(--on2);
  font:
    700 12px "Space Mono",
    monospace;
}
.footer-links nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links nav > b {
  color: var(--lush);
  font:
    700 12px "Space Mono",
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-links a,
.footer-links button {
  width: max-content;
  max-width: 100%;
  padding: 0;
  text-align: left;
  letter-spacing: normal;
  color: var(--on);
  font:
    500 14px "Hanken Grotesk",
    sans-serif;
}
.legal {
  padding: 48px 26px 24px;
  background: var(--deep);
  color: var(--on);
}
.legal > p {
  margin: 0;
  color: var(--lush);
  text-align: center;
  font:
    400 clamp(56px, 10vw, 128px) / 0.8 Marcellus,
    serif;
  letter-spacing: 0.06em;
}
.legal > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 46px;
  color: var(--on2);
  font-size: 12px;
  flex-wrap: wrap;
}
.legal img {
  width: 24px;
}
.legal button {
  border: 0;
  background: none;
  color: var(--on);
}
dialog {
  width: min(540px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  border: 0;
  border-radius: 22px;
  padding: 30px;
  background: var(--chalk);
  color: var(--graphite);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}
dialog::backdrop {
  background: rgba(2, 53, 42, 0.7);
}
.x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 1px solid #c0c9bc;
  border-radius: 50%;
  background: var(--chalk);
  font-size: 22px;
}
dialog > img {
  height: 28px;
  width: auto;
}
dialog nav {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
dialog nav a {
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--graphite);
  font:
    400 32px Newsreader,
    serif;
  text-decoration: none;
}
dialog h2 {
  margin: 18px 0 8px;
  font:
    300 38px/1.08 Newsreader,
    serif;
}
dialog p {
  color: var(--text);
  line-height: 1.6;
}
form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
form input,
form textarea,
form select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #c0c9bc;
  border-radius: 8px;
  background: #fff;
}
.error {
  display: none;
  margin: -6px 0;
  color: #a8382a;
  font-size: 13px;
}
.error.show {
  display: block;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 214, 107, 0.35);
}
@keyframes cycle {
  0%,
  27% {
    opacity: 1;
  }
  33%,
  94% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 1199px) {
  .bar { display: flex; justify-content: space-between; }
  .bar.wrap { width: calc(100% - 40px); }
  .nav { display: none; }
  .actions { margin-left: auto; }
  .menu { display: block; }
  .head-cta { display: none; }
}
@media (max-width: 1023px) {
  .nav {
    display: none;
  }
  .actions {
    margin-left: auto;
  }
  .menu {
    display: block;
  }
  .head-cta {
    display: none;
  }
  .hero h1 span,
  .hero-copy > div {
    padding-left: 0;
  }
  .principles > .wrap {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .history > .wrap {
    grid-template-columns: 1fr;
  }
  .history figure {
    min-height: 0;
    aspect-ratio: 16/9;
  }
  .map-card {
    position: static;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .map-card > * {
    max-width: 420px;
  }
  .employment > .wrap {
    grid-template-columns: 1fr;
  }
  .visit > .wrap {
    grid-template-columns: 1fr;
  }
  .footer-links > .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-links > .wrap > div {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .bar {
    height: 68px;
  }
  .bar > a img {
    height: 34px;
  }
  .hero {
    padding-top: 30px;
  }
  .kicker {
    font-size: 12px;
    letter-spacing: 0.12em;
  }
  .kicker span:last-child {
    display: none;
  }
  .hero h1 {
    margin-top: 30px;
    font-size: 50px;
  }
  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 28px;
  }
  .hero-copy p {
    font-size: 16px;
  }
  .loop {
    gap: 8px;
    margin-top: 42px;
  }
  .loop figure {
    border-radius: 12px 12px 0 0;
  }
  .loop figcaption {
    top: 8px;
    left: 8px;
    padding: 4px 6px;
    font-size: 12px;
  }
  .loop button {
    top: auto;
    right: 8px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
  .loop-label {
    display: block;
    color: var(--on2);
    font:
      700 12px "Space Mono",
      monospace;
  }
  .ticker {
    padding: 13px 0;
    font-size: 12px;
  }
  .section {
    padding: 40px 0;
  }
  .intro > .wrap {
    display: block;
  }
  .intro > .wrap > img {
    display: none;
  }
  .intro > .wrap > div {
    border-left: 5px solid var(--lush);
    padding-left: 15px;
  }
  .intro h2,
  .history h2,
  .employment h2 {
    font-size: 32px;
  }
  .experience-index {
    padding: 22px 0;
  }
  .experience-index nav {
    grid-template-columns: 1fr;
  }
  .experience-index a {
    min-height: 112px;
  }
  .experience-index b {
    font-size: 24px;
  }
  .venue {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }
  .venue-copy,
  .novedades .venue-copy {
    padding: 40px 20px;
  }
  .venue-copy > div,
  .novedades .venue-copy > div {
    margin: 0;
  }
  .novedades .venue-images {
    order: 2;
  }
  .novedades .venue-copy {
    order: 1;
  }
  .num {
    right: 14px;
    bottom: -18px;
    font-size: 150px;
  }
  .lockup,
  .punto .lockup {
    max-height: 72px;
  }
  .novedades .lockup {
    max-height: 84px;
  }
  .venue-description {
    font-size: 26px;
  }
  .terraza .venue-description {
    font-size: 32px;
  }
  .venue-images {
    min-height: 320px;
  }
  .vision header {
    margin-bottom: 30px;
  }
  .vision h2,
  .principles h2 {
    font-size: 40px;
  }
  .tiles,
  .tiles.two {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
  }
  .tiles figure,
  .tiles.two figure {
    aspect-ratio: 2/1;
  }
  .desktop-tile {
    display: none;
  }
  .vision aside {
    margin: 14px 0;
    padding: 48px 24px;
    font-size: 28px;
  }
  .principles li {
    grid-template-columns: 52px 1fr 22px;
    gap: 14px;
    padding: 14px 4px;
    font:
      400 18px/1.45 "Hanken Grotesk",
      sans-serif;
  }
  .principles li i {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 24px;
  }
  .history figure {
    aspect-ratio: 4/3;
  }
  .jobs {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .jobs figure {
    min-height: 145px;
  }
  .jobs figcaption {
    font-size: 12px;
  }
  .close {
    padding: 44px 0;
  }
  .close h2 {
    font-size: 52px;
  }
  .close > .wrap > div {
    flex-direction: column;
  }
  .visit {
    padding: 56px 0;
  }
  .visit address {
    font-size: 30px;
  }
  .venue-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .venue-cards .visit-card {
    min-height: 120px;
  }
  .footer-links > .wrap {
    gap: 32px 16px;
  }
  .legal > div {
    margin-top: 32px;
  }
  .legal span {
    width: 100%;
    text-align: center;
  }
  dialog {
    padding: 26px 20px;
  }
  .menu {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .loop img,
  .ticker-track {
    animation-play-state: paused !important;
  }
  .loop img {
    animation: none !important;
  }
  .loop img:not(:first-of-type) {
    display: none;
  }
}

/* Source fidelity and semantic layout adjustments. */
.intro > .wrap {
  max-width: 1228px;
}
.venue h3 {
  margin: 0;
}
.punto .venue-description {
  font-family: "Bricolage Grotesque", sans-serif;
}
.principles li i svg {
  width: 44px;
  height: 44px;
}
.vision h2 em,
.principles h2 em {
  color: var(--emerald);
}
.map-card h2.pill {
  font:
    700 12px "Space Mono",
    monospace;
  margin: 0;
  text-transform: uppercase;
}
.map-card p {
  font-size: 16px;
  line-height: 1.62;
}
.map-card address {
  font:
    600 15px/1.5 "Hanken Grotesk",
    sans-serif;
}
.map-card .button,
.close .button {
  border-radius: 100px;
}
.employment > .wrap {
  grid-template-columns: 1fr 1.15fr;
  gap: 52px;
}
.jobs {
  grid-template-columns: 1fr 1fr;
}
.jobs figure {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  min-height: 0;
  background: white;
  border: 1px solid var(--hair);
}
.jobs img {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 8px;
}
.jobs figcaption {
  position: static;
  padding: 0;
  background: none;
  color: var(--graphite);
  letter-spacing: normal;
  font:
    400 15px/1.4 "Hanken Grotesk",
    sans-serif;
}
.close h2 {
  max-width: 980px;
  margin: 22px auto 0;
  line-height: 0.92;
}
.close h2 em {
  color: var(--graphite);
}
.close p {
  max-width: 540px;
  margin: 28px auto 0;
  font-size: 17px;
  line-height: 1.68;
}
.close li {
  background: var(--graphite);
  color: var(--on);
  font:
    600 12px "Hanken Grotesk",
    sans-serif;
}
.review-notice {
  padding: 12px;
  border: 1px solid var(--hair);
  background: var(--sunken);
}
[hidden] {
  display: none !important;
}
.notice h2 {
  padding-right: 36px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 4px;
}
@media (max-width: 1023px) {
  .employment > .wrap {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: clamp(52px, 7.5vw, 76px);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .principles ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  .principles li {
    grid-template-columns: 52px 1fr;
    gap: 14px;
    font-size: 21px;
  }
  .principles li i {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
  .principles li b {
    display: none;
  }
  .jobs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .hero h1 {
    font-size: clamp(42px, 12.8vw, 50px);
  }
  .principles li i svg {
    width: 30px;
    height: 30px;
  }
  .experience-index a {
    padding: 20px 16px;
    gap: 12px;
  }
  .experience-index b {
    font-size: clamp(18px, 5.5vw, 24px);
  }
  .map {
    height: 360px;
    overflow: hidden;
  }
  .jobs figure {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .jobs img {
    width: 100%;
    height: 112px;
  }
  .jobs figcaption {
    font-size: 13px;
  }
  .legal > p {
    font-size: clamp(26px, 8vw, 60px);
  }
  .venue-images {
    min-height: 0;
    height: 450px;
  }
  .intro > .wrap > div {
    min-width: 0;
  }
  .venue-description {
    font-size: 26px;
  }
  .terraza .venue-description {
    font-size: 32px;
  }
  .close h2 {
    max-width: 350px;
  }
}

/* Careers: photographic invitation; the grid remains the no-JS fallback. */
.employment > .wrap { display: block; }
.employment-intro { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.employment .employment-intro h2 { margin: 24px auto; font-size: clamp(44px, 5.5vw, 72px); line-height: 1.04; }
.employment-intro h2 em { display: block; color: var(--emerald); font-weight: inherit; }
.employment-intro p { max-width: 580px; margin: 0 auto; }
.employment .jobs-label { margin: 0 0 24px; font-size: 15px; text-align: center; color: var(--muted); }
.employment .jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.employment .jobs figure { display: block; padding: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.employment .jobs img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.employment .jobs figcaption { position: static; padding: 16px 0 0; background: none; color: var(--graphite); font: 400 21px/1.3 "Hanken Grotesk", sans-serif; letter-spacing: normal; }
.employment-invitation { max-width: 660px; margin: 56px auto 0; text-align: center; }
.employment-invitation p { margin: 0 0 28px; }
@media (max-width: 767px) {
  .employment-intro { margin-bottom: 40px; }
  .employment .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .employment .jobs img { aspect-ratio: 4 / 5; }
  .employment .jobs figcaption { font-size: 16px; padding-top: 12px; }
  .employment-invitation { margin-top: 40px; }
}

/* Skiper #54 clip-mask composition, adapted to Yeyes' static site. */
.employment { overflow: clip; }
.job-carousel .jobs-frame {
  position: relative;
  width: min(100vw, 1560px);
  left: 50%;
  transform: translateX(-50%);
  margin: 16px 0 0;
  overflow: hidden;
  padding-top: 16px;
}
.employment .job-carousel .jobs {
  display: block;
  position: relative;
  height: 510px;
  perspective: 1000px;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}
.employment .job-carousel .jobs figure {
  position: absolute;
  top: 0;
  left: calc(50% - clamp(230px, 27vw, 350px) / 2);
  width: clamp(230px, 27vw, 350px);
  height: 100%;
  margin: 0;
  will-change: transform;
}
.job-photo {
  display: block;
  width: 100%;
  height: 410px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 28px;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.job-mask {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(var(--mask-top, 0%) var(--mask-right, 0%) var(--mask-bottom, 0%) var(--mask-left, 0%) round 28px);
}
.employment .job-carousel .jobs img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  transform: translate3d(var(--photo-x, 0%), var(--photo-y, 0%), 0) scale(1.09);
  pointer-events: none;
}
.employment .job-carousel .jobs figcaption {
  margin: 0 auto;
  max-width: 300px;
  padding: 22px 12px 12px;
  text-align: center;
  text-wrap: balance;
  font: 400 25px/1.15 Newsreader, serif;
  opacity: var(--caption-opacity, 1);
}
.jobs-seal {
  position: absolute;
  width: 94px;
  height: 94px;
  right: max(28px, calc((100% - 1080px) / 2));
  top: 0;
  transform: rotate(12deg);
  z-index: 15;
  pointer-events: none;
}
.jobs-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px auto 0;
}
.jobs-arrow,
.jobs-pause {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid var(--hair);
  color: var(--emerald);
  border-radius: 100px;
  background: transparent;
  transition: background 180ms ease, color 180ms ease;
}
.jobs-arrow { width: 44px; font-size: 23px; }
.jobs-pause { padding: 0 16px; font: 500 13px "Hanken Grotesk", sans-serif; }
.jobs-arrow:hover,
.jobs-pause:hover { background: var(--emerald); color: var(--chalk); }
.jobs-arrow:active { transform: scale(0.94); }
.jobs-pagination { display: flex; gap: 0; }
.jobs-pagination button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 20px;
}
.jobs-pagination button::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #99a99b;
  border-radius: 100px;
  transform: scaleX(1);
  transition: transform 300ms ease, background 300ms ease;
}
.jobs-pagination button[aria-current="true"]::after { transform: scaleX(3.333333); background: var(--emerald); }
.jobs-count { font: 400 11px "Space Mono", monospace; color: var(--muted); }
.employment .jobs-hint { text-align: center; font-size: 12px; color: var(--muted); margin: 16px 0 0; }
.jobs-touch-hint { display: none; }
@media (max-width: 767px) {
  .employment .job-carousel .jobs { height: 402px; }
  .employment .job-carousel .jobs figure { width: 66vw; left: 17%; }
  .job-photo { height: 320px; }
  .employment .job-carousel .jobs figcaption { font-size: 22px; padding-top: 18px; }
  .jobs-seal { width: 66px; height: 66px; right: 16px; }
  .jobs-controls { gap: 6px; }
  .jobs-pagination button { width: 26px; }
  .jobs-count { display: none; }
  .jobs-pause { padding: 0 10px; }
  .jobs-arrow { width: 38px; }
}
@media (hover: none) {
  .jobs-desktop-hint { display: none; }
  .jobs-touch-hint { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .jobs-arrow, .jobs-pause, .jobs-pagination button::after { transition: none; }
}

/* Only the seals move; the introduction stays anchored. */
.intro > .wrap { text-align: center; }
.intro h2, .intro p { margin-inline: auto; }
.brand-carousel { position: relative; width: 100%; max-width: 360px; margin-inline: auto; }
.brand-badges { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.brand-badges img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateX(12%) rotate(8deg) scale(.94); transition: transform 650ms cubic-bezier(.22,1,.36,1), opacity 650ms ease; }
.brand-badges img.is-active { opacity: 1; transform: none; }
.brand-controls { position: absolute; top: calc(100% + 12px); inset-inline: 0; display: flex; justify-content: center; }
.brand-controls[hidden] { display: none; }
.brand-controls button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--emerald); cursor: pointer; font-size: 11px; opacity: .4; }
.brand-controls button[aria-current], .brand-controls .brand-play { opacity: 1; }
.brand-controls button:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
@media (max-width: 767px) {
  .intro > .wrap { display: grid; grid-template-columns: 1fr; gap: 64px; text-align: center; }
  .intro > .wrap > div { border: 0; padding: 0; }
  .brand-carousel { max-width: 280px; }
  .intro h2, .intro p { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-badges img { transition: none; }
}

/* Experience bento — a mixed grid in the spirit of a brand board: kinetic type, a full
   green scene, one photographic Firma tile, an Instagram card, wavy type and light
   character scenes. Character clips are one-ink illustrations (paper normalised to white
   at encode time, so they multiply onto any ground). Everything that loops is gated by
   visibility, the pause control and prefers-reduced-motion. */
.principles-bento {
  --yd-graphite: #202622; --yd-emerald: #005c3c; --yd-lush: #00d66b; --yd-hair: #dce3d8;
  --yd-paper: #f7f9f1; --yd-arena: #e9dec9; --yd-sage: #eaefe6; --yd-on-dark: #edf3ef;
  --pa-red: #c13b30; --pa-cream: #f6eee2; --tz-blush: #e2ad9c;
  --yd-ease: cubic-bezier(.2, 0, 0, 1); --yd-settle: cubic-bezier(.22, 1, .36, 1);
  --yd-base: 240ms; --yd-slow: 420ms; --yd-e3: 0 10px 30px rgb(32 38 34 / 10%);
}
.principles-bento > .wrap { display: block; }
.principles-bento .principles-intro { max-width: 800px; margin: 0 auto 48px; text-align: center; }
.principles-bento h2 { max-width: 800px; margin-inline: auto; text-wrap: balance; }
.principles-bento .principles-intro p { max-width: 630px; margin: 24px auto 0; }
.principles-bento blockquote { max-width: 780px; margin: 48px auto 0; padding: 0; border: 0; text-align: center; font-size: 28px; }

/* Grid: 12 columns, fixed-height rows so the Firma tile lands square and the Instagram
   card runs two rows tall. The legacy .principles list rules are neutralised here. */
.principles-bento .experience-bento {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 23vw, 300px);
  grid-template-areas:
    "type type type type type type type green green green green green"
    "firma firma firma share share share share share social social social social"
    "wavy wavy wavy wavy espacios espacios espacios espacios social social social social";
  gap: 20px; margin: 0; padding: 0; list-style: none; border: 0;
}
.principles-bento .tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 0; min-width: 0; min-height: 0; padding: 20px 28px 26px; overflow: hidden; border: 0; border-radius: 22px; color: var(--yd-graphite); font: inherit; transition: transform var(--yd-base) var(--yd-ease), box-shadow var(--yd-base) var(--yd-ease), opacity var(--yd-slow) var(--yd-ease); }
.principles-bento .tile.is-active { transform: translateY(-2px); box-shadow: var(--yd-e3); }
.tile h3 { position: relative; z-index: 2; margin: 0; max-width: 30ch; font: 400 clamp(20px, 1.7vw, 25px)/1.15 Newsreader, serif; text-wrap: balance; }
.principles-bento .ground-paper { background: var(--yd-paper); box-shadow: inset 0 0 0 1px var(--yd-hair); }
.principles-bento .ground-arena { background: var(--yd-arena); }
.principles-bento .ground-sage { background: var(--yd-sage); }
.tile-type { grid-area: type; } .tile-green { grid-area: green; } .tile-firma { grid-area: firma; }
.tile-share { grid-area: share; } .tile-social { grid-area: social; } .tile-wavy { grid-area: wavy; } .tile-espacios { grid-area: espacios; }
.tile-scene { position: relative; z-index: 1; display: block; flex: 1; width: calc(100% + 36px); min-height: 0; margin: 0 -18px 10px; object-fit: contain; mix-blend-mode: multiply; }

/* Kinetic type: the house line in Newsreader with the cast's faces set between words.
   Words rise out of their line on arrival, then hop in a wave every few seconds. */
.principles-bento .tile-type { justify-content: space-between; padding: 30px 34px 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--yd-hair); }
.kinetic { display: flex; flex-direction: column; gap: .06em; margin: 0; color: var(--yd-emerald); font: 400 clamp(30px, 3.5vw, 52px)/1 Newsreader, serif; letter-spacing: -.03em; }
.k-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: .22em; }
.k-em { font-style: italic; color: var(--yd-graphite); }
.kw { display: inline-block; overflow: hidden; padding: .04em .02em .12em; margin: -.04em -.02em -.12em; }
.kw > span { display: inline-block; }
.tile-type.is-settled .kw > span { animation: k-hop 6s var(--yd-ease) infinite; animation-delay: calc(1.2s + var(--i, 0) * 90ms); }
.kface { width: .9em; height: .9em; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--yd-emerald); background: var(--yd-paper); }
.tile-type.is-settled .kface { animation: k-bob 3.2s ease-in-out infinite; }
.k-line .kface:last-child { animation-delay: -1.1s; background: var(--yd-lush); }
.k-em .kface { animation-delay: -2.2s; }
.tile-type h3 { max-width: 38ch; font: 500 15px/1.45 "Hanken Grotesk", sans-serif; color: #414a44; }
@keyframes k-hop { 0%, 82%, 100% { transform: none; } 88% { transform: translateY(-.16em); } 94% { transform: translateY(.02em); } }
@keyframes k-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-.1em) rotate(5deg); } }

/* Full-green tile: the hospitality scene in full colour on Lush. The clip's paper was
   flood-filled to Lush at encode time (characters keep their own whites), so it plays
   unblended; labels on Lush are always dark. */
.principles-bento .tile-green { background: var(--yd-lush); color: #0f1a14; }
.tile-green .tile-scene { mix-blend-mode: normal; }
/* The clip is painted into a canvas (same colour path as CSS, so its Lush matches the
   tile exactly); the source video stays in the DOM, invisible, to keep decoding. */
.tile-scene-source { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.green-spark { position: absolute; z-index: 2; width: 26px; height: 26px; color: var(--yd-emerald); animation: spark-pop 2.8s ease-in-out infinite; }
.green-spark.s1 { top: 22px; right: 26px; } .green-spark.s2 { top: 44%; left: 22px; width: 18px; height: 18px; animation-delay: -1.4s; }
.ico { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes spark-pop { 0%, 100% { transform: scale(.6) rotate(0); opacity: .4; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

/* Firma: the only photographic tile. Signature pieces rotate under a cherry-mark badge
   whose colours step through the family palette. */
.principles-bento .tile-firma { padding: 18px; background: var(--yd-graphite); color: #fff; }
.firma-photos { position: absolute; inset: 0; z-index: 0; }
.firma-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 900ms var(--yd-ease), transform 2600ms var(--yd-ease); }
.firma-photos img.is-current { opacity: 1; transform: scale(1); }
.firma-photos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(20 24 21 / 72%), rgb(20 24 21 / 0%) 45%); }
.firma-badge { --badge-bg: var(--yd-emerald); --badge-ink: var(--yd-lush); position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: clamp(72px, 34%, 104px); aspect-ratio: 1; margin: 0; border-radius: 50%; background: var(--badge-bg); transform: translate(-50%, -58%); box-shadow: 0 10px 30px rgb(0 0 0 / 22%); transition: background 600ms var(--yd-ease); }
.principles-bento .firma-badge i { display: block; width: 52%; height: auto; aspect-ratio: 48 / 53; border-radius: 0; background: var(--badge-ink); -webkit-mask: url("assets/bento/firma-cherrymark.svg") center / contain no-repeat; mask: url("assets/bento/firma-cherrymark.svg") center / contain no-repeat; transition: background 600ms var(--yd-ease); }
.firma-badge.is-pop { animation: badge-pop 700ms var(--yd-settle); }
.firma-dot { position: absolute; top: 20px; right: 22px; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: var(--yd-graphite); box-shadow: 0 0 0 2px rgb(255 255 255 / 70%); }
.tile-firma h3 { max-width: 22ch; font: 600 14px/1.3 "Hanken Grotesk", sans-serif; color: #fff; }
@keyframes badge-pop { 0% { transform: translate(-50%, -58%) scale(1) rotate(0); } 45% { transform: translate(-50%, -58%) scale(.96) rotate(-3deg); } 100% { transform: translate(-50%, -58%) scale(1) rotate(0); } }

/* Instagram card: real posts rotate; bubbles bob and hearts float up on each new post. */
.principles-bento .tile-social { justify-content: space-between; gap: 20px; padding: 26px 26px 28px; }
.ig-stage { position: relative; display: grid; flex: 1; place-items: center; min-height: 0; }
.ig-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; width: min(100%, 300px); padding: 12px 12px 14px; border-radius: 18px; background: #fff; color: var(--yd-graphite); text-decoration: none; box-shadow: 0 16px 40px rgb(32 38 34 / 14%); transform: rotate(-2.5deg); transition: transform var(--yd-slow) var(--yd-settle); }
.tile-social.is-active .ig-card, .ig-card:focus-visible { transform: rotate(0) translateY(-4px); }
.ig-card:focus-visible { outline: 2px solid var(--yd-emerald); outline-offset: 4px; }
.ig-head { display: flex; align-items: center; gap: 8px; font: 12px/1.2 "Hanken Grotesk", sans-serif; }
.ig-head b { display: block; font-weight: 700; } .ig-head small { color: #5a6259; }
.ig-avatar { width: 30px; height: 30px; border-radius: 50%; }
.ig-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--yd-sage); }
.ig-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(8%); transition: opacity 600ms var(--yd-ease), transform 800ms var(--yd-ease); }
.ig-media img.is-current { opacity: 1; transform: none; }
.ig-media img.is-leaving { opacity: 0; transform: translateX(-8%); }
.ig-actions { display: flex; gap: 12px; height: 22px; color: var(--yd-graphite); }
.ig-actions .ico { width: 22px; height: 22px; flex: none; }
.ig-actions .ig-save { margin-left: auto; }
.ig-like.is-liked { color: var(--pa-red); fill: var(--pa-red); animation: like-pop 520ms var(--yd-settle); }
.ig-caption { display: -webkit-box; overflow: hidden; font: 12.5px/1.4 "Hanken Grotesk", sans-serif; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ig-caption-text { transition: opacity 300ms ease; }
.ig-bubble { position: absolute; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; padding: 15px; border-radius: 50%; background: var(--yd-emerald); color: var(--yd-lush); box-shadow: 0 8px 20px rgb(0 0 0 / 14%); animation: bubble-bob 4s ease-in-out infinite; }
.ig-bubble.b1 { top: 6%; left: 2%; } .ig-bubble.b2 { top: 42%; right: 6%; background: var(--yd-lush); color: var(--yd-emerald); animation-delay: -1.3s; } .ig-bubble.b3 { bottom: 10%; left: 4%; width: 46px; height: 46px; padding: 12px; animation-delay: -2.6s; }
.ig-hearts { position: absolute; right: 18%; bottom: 20%; z-index: 3; width: 0; height: 0; }
.principles-bento .ig-hearts i { position: absolute; display: block; width: 18px; height: 18px; border-radius: 0; background: none; color: var(--pa-red); font-size: inherit; animation: heart-float 1.6s var(--yd-ease) forwards; }
.tile-social h3 { max-width: 26ch; }
@keyframes bubble-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes like-pop { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
.ig-hearts .ico { fill: currentColor; }
@keyframes heart-float { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--hx, 0), -120px) scale(1.1) rotate(var(--hr, 0deg)); } }

/* Wavy type: brand lines run along sine curves in Punto red, cream and Terraza blush. */
.principles-bento .tile-wavy { padding: 0; background: var(--pa-red); }
.wavy { position: absolute; inset: 0; width: 100%; height: 100%; }
.wavy text { font: 800 34px/1 "Hanken Grotesk", sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.wavy .w-a { fill: var(--pa-cream); } .wavy .w-b { fill: var(--tz-blush); }

/* Scenes autoplay while on screen, so the section carries a pause control (WCAG 2.2.2). */
.bento-controls { display: flex; justify-content: flex-end; margin: -24px 0 16px; }
.bento-controls[hidden] { display: none; }
.bento-toggle { min-height: 40px; padding: 8px 18px; border: 1px solid var(--yd-hair); border-radius: 999px; background: transparent; color: var(--yd-graphite); font: 500 13px/1 "Hanken Grotesk", sans-serif; cursor: pointer; transition: background var(--yd-base) var(--yd-ease); }
.bento-toggle:hover { background: var(--yd-sage); }
.bento-toggle:focus-visible { outline: 2px solid #005c3c; outline-offset: 3px; }

/* Arrival (only once JS is running). */
.bento-js .tile { opacity: 0; transform: translateY(16px); transition-delay: var(--tile-d, 0ms); }
.bento-js .tile.is-in { opacity: 1; transform: none; }
.bento-js .tile.is-in.is-active { transform: translateY(-2px); }
.bento-js .tile.is-settled { transition-delay: 0ms; }
.bento-js .tile-type:not(.is-in) .kw > span { transform: translateY(110%); }
.bento-js .tile-type .kw > span { transition: transform 800ms var(--yd-ease); transition-delay: calc(var(--i, 0) * 70ms + 150ms); }
.bento-js .tile-type:not(.is-in) .kface { transform: scale(0) rotate(-30deg); }
.bento-js .tile-type .kface { transition: transform 700ms var(--yd-settle) 500ms; }
/* The pause control and off-screen tiles freeze every CSS loop. */
.bento-paused .tile *, .bento-js .tile:not(.is-visible) * { animation-play-state: paused !important; }

@media (max-width: 900px) {
  .principles-bento .experience-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px;
    grid-template-areas: "type type" "green green" "firma wavy" "share share" "social social" "espacios espacios";
  }
  .principles-bento .tile { min-height: 300px; }
  .principles-bento .tile-firma, .principles-bento .tile-wavy { min-height: 0; aspect-ratio: 1; }
  .principles-bento .tile-social { min-height: 560px; }
}
@media (max-width: 600px) {
  .principles-bento .experience-bento { grid-template-columns: 1fr; grid-template-areas: "type" "green" "firma" "share" "social" "wavy" "espacios"; }
  .principles-bento .tile { padding: 18px 20px 22px; }
  .principles-bento .tile-type { padding: 24px 22px; }
  .principles-bento .tile-wavy { aspect-ratio: 3 / 2; }
  .tile-scene { width: calc(100% + 24px); margin: 0 -12px 10px; }
  .principles-bento .principles-intro { margin-bottom: 32px; }
  .principles-bento blockquote { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .principles-bento *, .principles-bento .tile { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
  .principles-bento .tile.is-active, .bento-js .tile.is-in.is-active { transform: none; }
}