@font-face {
  font-family: "acumin-pro-condensed";
  src: url("https://cdn.cartem.es/landings/leonardo-svelato/fonts/acumin-pro-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "acumin-pro-condensed";
  src: url("https://cdn.cartem.es/landings/leonardo-svelato/fonts/acumin-pro-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "acumin-pro-condensed";
  src: url("https://cdn.cartem.es/landings/leonardo-svelato/fonts/acumin-pro-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --brown: #481b06;
  --cream: #f8e2bd;
  --grey: #707070;
  --white: #ffffff;

  --font: "acumin-pro-condensed", "Arial Narrow", sans-serif;

  --u: min(100vw / 1920, 1px);
  --gutter: max(16px, calc(125 * var(--u)));
  --radius-pill: calc(109 * var(--u));
  --card: max(12px, calc(24 * var(--u)));
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);
  color: var(--grey);
  font-family: var(--font);
  font-size: max(17px, calc(45 * var(--u)));
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
strong { font-weight: 600; }

.container {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.center { text-align: center; }

.section-title {
  font-size: max(30px, calc(80 * var(--u)));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: .9;
  text-align: center;
  text-wrap: balance;
}

.caption {
  font-size: max(16px, calc(45 * var(--u)));
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: max(44px, calc(76 * var(--u)));
  padding: 0 max(24px, calc(32 * var(--u)));
  border: 2px solid var(--grey);
  border-radius: 999px;
  background: var(--white);
  color: var(--grey);
  font: inherit;
  font-size: max(16px, calc(35 * var(--u)));
  text-decoration: none;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover,
.btn:focus-visible { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.btn--lg { min-height: max(48px, calc(100 * var(--u))); border-width: 1px; font-size: max(16px, calc(40 * var(--u))); padding-inline: max(28px, calc(60 * var(--u))); }

.pill {
  border-radius: var(--radius-pill);
  min-height: calc(532 * var(--u));
}
.pill--filled { background: var(--brown); color: var(--cream); }

:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }

.intro {
  position: relative;
  padding: calc(220 * var(--u)) var(--gutter) calc(30 * var(--u));
  text-align: center;
}

.brand {
  position: absolute;
  top: max(14px, calc(28 * var(--u)));
  left: max(14px, calc(32 * var(--u)));
  display: block;
  width: max(72px, calc(140 * var(--u)));
  transition: opacity .25s;
}
.brand:hover,
.brand:focus-visible { opacity: .7; }
.brand img { width: 100%; height: auto; }
.intro__claim {
  font-size: max(34px, calc(107 * var(--u)));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.title {
  padding-top: calc(110 * var(--u));
  text-align: center;
}
.title__name {
  font-size: max(46px, calc(157 * var(--u)));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: .95;
}
.title__sub {
  font-size: max(22px, calc(89 * var(--u)));
  letter-spacing: -0.01em;
  line-height: 1;
}

.duo {
  display: grid;
  grid-template-columns: calc(718 * var(--u)) calc(124 * var(--u)) 1fr;
  align-items: stretch;
  margin-top: calc(110 * var(--u));
}
.duo__image {
  grid-column: 1 / 3;
  grid-row: 1;
  border-radius: calc(64 * var(--u));
  overflow: hidden;
  height: calc(532 * var(--u));
}
.duo__image img { width: 100%; height: 100%; object-fit: cover; object-position: 100% center; }
.duo__text {
  grid-column: 2 / 4;
  grid-row: 1;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: calc(60 * var(--u)) calc(64 * var(--u));
  font-size: max(18px, calc(53 * var(--u)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.008em;
  text-align: center;
}

.presale {
  padding-top: calc(150 * var(--u));
  text-align: center;
}
.presale__title {
  font-size: max(32px, calc(99 * var(--u)));
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin-bottom: calc(70 * var(--u));
}
.presale__perks {
  margin-top: calc(30 * var(--u));
  font-size: max(16px, calc(35 * var(--u)));
  line-height: 1.3;
}
.presale__perks li::before { content: "✓ "; }

.book {
  max-width: calc(1295 * var(--u) + 2 * var(--gutter));
  margin: calc(140 * var(--u)) auto 0;
  padding-inline: var(--gutter);
}
.slider { position: relative; overflow: hidden; }
.slider__track {
  display: flex;
  transition: transform .8s var(--ease);
  touch-action: pan-y;
}
.slider__slide { flex: 0 0 100%; }
.slider__slide img { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.slider__dots { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.slider__dots button {
  width: 10px; height: 10px; padding: 0;
  border: 1px solid var(--grey); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background .3s;
}
.slider__dots button[aria-current] { background: var(--brown); border-color: var(--brown); }

.lead {
  padding-top: calc(120 * var(--u));
  max-width: calc(1725 * var(--u) + 2 * var(--gutter));
  font-size: max(20px, calc(70 * var(--u)));
  line-height: 1.04;
  text-align: center;
  text-wrap: balance;
}

.specs {
  display: grid;
  grid-template-columns: calc(673 * var(--u)) calc(264 * var(--u)) 1fr;
  margin-top: calc(150 * var(--u));
}
.specs__list {
  grid-column: 1 / 3;
  grid-row: 1;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: calc(60 * var(--u));
  font-size: max(20px, calc(60 * var(--u)));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.specs__list li::before { content: "· "; }
.specs__photo {
  grid-column: 2 / 4;
  grid-row: 1;
  min-height: calc(532 * var(--u));
  margin-right: calc(60 * var(--u));
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.specs__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 100% center; translate: 14% 0; }

.flip { padding-top: calc(180 * var(--u)); }
.flip .section-title { margin-bottom: calc(30 * var(--u)); }
.flip__player {
  position: relative;
  max-width: calc(1750 * var(--u));
  margin-inline: auto;
  aspect-ratio: 1750 / 984;
  cursor: pointer;
  overflow: hidden;
}
.flip__player video { width: 100%; height: 100%; object-fit: cover; }
.flip__play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: max(56px, calc(110 * var(--u)));
  aspect-ratio: 1;
  border: 1px solid var(--grey);
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--brown);
  cursor: pointer;
  transition: opacity .3s, scale .3s var(--ease);
}
.flip__play svg { width: 45%; fill: currentColor; translate: 6% 0; }
.flip__player:hover .flip__play { scale: 1.06; }
.flip__player.is-playing .flip__play { opacity: 0; pointer-events: none; }
.flip__player:not(.has-started) .flip__play:not(:focus-visible) { opacity: 0; }
.flip .caption { margin-top: calc(40 * var(--u)); }

.artsci { padding-top: calc(160 * var(--u)); }
.artsci__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, calc(785 * var(--u))));
  justify-content: center;
  gap: calc(40 * var(--u));
  margin-top: calc(40 * var(--u));
  font-size: max(17px, calc(50 * var(--u)));
  line-height: 1.2;
  text-align: center;
}
.roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: calc(110 * var(--u));
  text-align: center;
}
.roles__item { padding-inline: calc(60 * var(--u)); }
.roles__item + .roles__item { border-left: 1px solid var(--grey); }
.roles h3 {
  font-size: max(24px, calc(60 * var(--u)));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: .8;
  margin-bottom: calc(14 * var(--u));
}
.roles p {
  max-width: calc(378 * var(--u));
  min-width: 10ch;
  margin-inline: auto;
  font-size: max(16px, calc(45 * var(--u)));
  line-height: 1.02;
}

.works { padding-top: calc(160 * var(--u)); }
.carousel {
  display: grid;
  grid-template-columns: auto minmax(0, calc(1505 * var(--u))) auto;
  justify-content: center;
  align-items: start;
  gap: calc(80 * var(--u));
  padding-inline: max(8px, calc(60 * var(--u)));
}
.carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
}
.carousel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel__viewport img { -webkit-user-drag: none; }
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; }
.carousel__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.carousel__item img {
  width: 100%;
  aspect-ratio: 1505 / 777;
  object-fit: cover;
}
.carousel__item figcaption {
  margin-top: calc(30 * var(--u));
  font-size: max(16px, calc(40 * var(--u)));
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}
.carousel__arrow {
  align-self: center;
  margin-top: calc(-60 * var(--u));
  padding: 8px;
  border: 0;
  background: none;
  color: var(--grey);
  font: inherit;
  font-size: max(28px, calc(55 * var(--u)));
  cursor: pointer;
  transition: color .2s, translate .2s var(--ease);
}
.carousel__arrow:hover { color: var(--brown); }
.carousel__arrow--prev:hover { translate: -4px 0; }
.carousel__arrow--next:hover { translate: 4px 0; }
.carousel__arrow:disabled { opacity: .3; cursor: default; translate: none; }
.works .center { margin-top: calc(60 * var(--u)); }

.gallery { padding-top: calc(140 * var(--u)); }
.carousel--gallery .carousel__track { gap: var(--card); }
.carousel--gallery .carousel__item { flex-basis: calc((100% - 2 * var(--card)) / 2.4); }
.carousel--gallery .carousel__item img {
  height: auto;
  aspect-ratio: 1080 / 719;
  border-radius: var(--card);
}
.carousel--gallery .carousel__arrow { margin-top: 0; }
.gallery__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--card);
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.gallery__open img { transition: scale .5s var(--ease); }
.gallery__open:hover img { scale: 1.03; }
.carousel__viewport.is-dragging .gallery__open { cursor: grabbing; }

.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; animation: lightbox-in .3s var(--ease); }
.lightbox::backdrop { background: rgb(24, 9, 2); }
html:has(.lightbox[open]) { overflow: hidden; }
@keyframes lightbox-in { from { opacity: 0; } }
.lightbox__figure { display: grid; justify-items: center; gap: 12px; outline: none; }
.lightbox__figure img {
  max-width: min(88vw, 1080px);
  max-height: 82dvh;
  border-radius: 12px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__count { font-size: 15px; letter-spacing: .08em; opacity: .8; }
.lightbox__close,
.lightbox__arrow {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  transition: opacity .2s, translate .2s var(--ease);
}
.lightbox__close { top: 16px; right: 16px; font-size: 40px; line-height: 1; }
.lightbox__arrow { top: 50%; margin-top: -24px; font-size: 36px; }
.lightbox__arrow--prev { left: max(8px, calc(40 * var(--u))); }
.lightbox__arrow--next { right: max(8px, calc(40 * var(--u))); }
.lightbox__close:hover,
.lightbox__arrow:hover { opacity: .7; }
.lightbox__arrow--prev:hover { translate: -4px 0; }
.lightbox__arrow--next:hover { translate: 4px 0; }
.lightbox :focus-visible { outline-color: var(--cream); }

.qa { padding-top: calc(160 * var(--u)); }
.qa .section-title { margin-bottom: calc(110 * var(--u)); }
.qa__row {
  display: grid;
  grid-template-columns: 1fr calc(870 * var(--u));
  align-items: center;
  min-height: calc(640 * var(--u));
  margin-bottom: calc(80 * var(--u));
}
.qa__row--rev { grid-template-columns: calc(870 * var(--u)) 1fr; }
.qa__row--rev .qa__img { order: -1; }
.qa__text {
  max-width: calc(860 * var(--u));
  margin-inline: auto;
  padding-inline: max(16px, calc(30 * var(--u)));
  text-align: center;
}
.qa__text h3 {
  font-size: max(22px, calc(63 * var(--u)));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: .85;
  margin-bottom: calc(14 * var(--u));
  text-wrap: balance;
}
.qa__text p { font-size: max(16px, calc(45 * var(--u))); line-height: 1.02; }
.qa__page {
  display: inline-block;
  margin-top: calc(6 * var(--u));
  font-size: max(16px, calc(45 * var(--u)));
  font-weight: 700;
}
.qa__img { height: 100%; overflow: hidden; }
.qa__img img {
  width: 100%;
  height: 100%;
  min-height: calc(600 * var(--u));
  object-fit: cover;
  transition: scale 1.2s var(--ease);
}
.qa__row:hover .qa__img img { scale: 1.04; }

.band {
  display: grid;
  place-items: center;
  min-height: calc(443 * var(--u));
  margin-top: calc(80 * var(--u));
  padding-block: calc(60 * var(--u));
  background: var(--brown);
  color: var(--white);
}
.band p {
  max-width: calc(1476 * var(--u) + 2 * var(--gutter));
  font-size: max(22px, calc(70 * var(--u)));
  line-height: 1.04;
  text-align: center;
}

.booking { padding-top: calc(150 * var(--u)); }
.booking__cta { margin-top: calc(60 * var(--u)); text-align: center; }
.btn--buy {
  gap: max(10px, calc(16 * var(--u)));
  min-height: max(60px, calc(110 * var(--u)));
  padding-inline: max(36px, calc(70 * var(--u)));
  border-color: var(--brown);
  background: var(--brown);
  color: var(--cream);
  font-size: max(20px, calc(48 * var(--u)));
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(72, 27, 6, .25);
  transition: background .3s var(--ease), translate .3s var(--ease), box-shadow .3s;
}
.btn--buy svg { width: 1.1em; height: 1.1em; }
.btn--buy:hover,
.btn--buy:focus-visible { background: #5e2409; translate: 0 -3px; box-shadow: 0 14px 34px rgba(72, 27, 6, .35); }

.footer {
  display: grid;
  place-items: center;
  gap: max(14px, calc(28 * var(--u)));
  padding: calc(160 * var(--u)) var(--gutter) calc(200 * var(--u));
  text-align: center;
}
.footer__logo img { width: max(120px, calc(280 * var(--u))); height: auto; }
.footer a { color: inherit; }
.footer__official { font-size: max(16px, calc(32 * var(--u))); }
.footer__official a { font-weight: 600; text-decoration: none; }
.footer__official a:hover,
.footer__legal a:hover { color: var(--brown); }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px max(16px, calc(36 * var(--u)));
  font-size: max(14px, calc(26 * var(--u)));
}
.footer__legal a { text-decoration: none; }
.footer__copy { font-size: max(13px, calc(24 * var(--u))); opacity: .8; }

.cart-fab {
  position: fixed;
  right: max(16px, calc(40 * var(--u)));
  bottom: max(16px, calc(40 * var(--u)));
  z-index: 20;
  display: grid;
  place-items: center;
  width: max(66px, calc(100 * var(--u)));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brown);
  color: var(--cream);
  box-shadow: 0 8px 24px rgba(72, 27, 6, .3);
  opacity: 0;
  scale: .6;
  pointer-events: none;
  transition: opacity .35s var(--ease), scale .35s var(--ease), box-shadow .3s, translate .3s var(--ease);
}
.cart-fab svg { width: 48%; height: 48%; }
.cart-fab.is-visible { opacity: 1; scale: 1; pointer-events: auto; }
.cart-fab:hover { translate: 0 -3px; box-shadow: 0 12px 28px rgba(72, 27, 6, .4); }
.cart-fab:focus-visible { outline: 2px solid var(--brown); outline-offset: 4px; }

.js .reveal {
  opacity: 0;
  translate: 0 30px;
  transition: opacity .9s var(--ease), translate .9s var(--ease);
}
.js .reveal.is-visible { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; translate: none; transition: none; }
  .slider__track,
  .qa__img img,
  .gallery__open img,
  .lightbox[open] { transition: none; animation: none; }
}

@media (max-width: 767px) {
  .intro { padding-top: 80px; padding-bottom: 20px; }
  .title { padding-top: 32px; }

  .duo,
  .specs { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .duo__image { grid-column: 1; height: auto; aspect-ratio: 1122 / 604; border-radius: 28px; }
  .duo__text {
    grid-column: 1; grid-row: 2;
    margin: -20px 12px 0;
    padding: 36px 28px;
    border-radius: 40px;
    min-height: 0;
  }
  .presale { padding-top: 48px; }
  .presale__title { margin-bottom: 20px; }
  .book { margin-top: 40px; }
  .lead { padding-top: 40px; }

  .specs__photo { grid-column: 1; grid-row: 1; min-height: 0; margin: 0; aspect-ratio: 4 / 3; border-radius: 28px; }
  .specs__photo img { translate: none; object-position: 47% center; }
  .specs__list { grid-column: 1; grid-row: 2; margin: -20px 12px 0; border-radius: 40px; min-height: 0; padding: 40px 24px; }

  .flip,
  .artsci,
  .works,
  .qa,
  .booking { padding-top: 56px; }

  .artsci__cols { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .roles { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .roles__item + .roles__item { border-left: 0; border-top: 1px solid var(--grey); padding-top: 24px; }
  .roles p { max-width: none; }

  .carousel { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
  .carousel__arrow,
  .lightbox__arrow { display: none; }
  .lightbox__figure img { max-width: 100vw; border-radius: 0; }
  .carousel__track { gap: 12px; }
  .carousel__item { flex-basis: 88%; }
  .carousel__item img { aspect-ratio: 4 / 3; }
  .carousel__item figcaption { margin-top: 10px; }
  .works .center { margin-top: 28px; }
  .gallery { padding-top: 48px; }
  .carousel--gallery .carousel__item { flex-basis: 85%; }

  .qa .section-title { margin-bottom: 32px; }
  .qa__row,
  .qa__row--rev { grid-template-columns: 1fr; min-height: 0; margin-bottom: 40px; gap: 20px; }
  .qa__row .qa__img,
  .qa__row--rev .qa__img { order: -1; }
  .qa__img img { aspect-ratio: 4 / 3; min-height: 0; }
  .qa__text { max-width: none; }

  .band { margin-top: 16px; padding-block: 48px; }
  .booking__cta { margin-top: 28px; }
  .footer { padding-block: 64px 80px; }
}