/* OnTrack v2 — Night lap. Phone first (390px), desktop 1440px. Tokens in tokens.css; design in DESIGN.md. */

/* ================= base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--gris) var(--negro); scroll-padding-top: 72px; }
body { margin: 0; background: var(--negro); color: var(--white); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; caret-color: var(--rojo); }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
::selection { background: var(--rojo); color: var(--on-rojo); }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ot-wrap { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.lbl { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.num { font-variant-numeric: tabular-nums; }
.ot-nowrap { white-space: nowrap; }
.ot-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--white); }
.ot-slash { flex-shrink: 0; width: 22px; height: 4px; background: var(--rojo); transform: skewX(var(--slash)); }
.ot-h1, .ot-h2, .ot-h3, .ot-detail__name, .ot-board__title, .ot-pkg__name, .ot-done__h {
  font-family: var(--display); font-style: italic; font-stretch: 115%; font-weight: 800; letter-spacing: -.015em; text-wrap: balance;
}
.ot-h1 { font-size: clamp(36px, 10.4vw, 116px); line-height: .92; max-width: 10em; }
.ot-h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: .95; }
.ot-h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1; }
.ot-lede { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--muted); max-width: 34rem; }
.ot-note { font-size: 14px; color: var(--muted); }
.ot-tbc { display: inline-block; vertical-align: .1em; margin-left: 4px; padding: 1px 6px; border: 1px solid var(--ctl); border-radius: var(--r); font: 600 10px/1.4 var(--display); font-stretch: 125%; letter-spacing: .14em; color: var(--muted); }
.ot-call { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gris); }
.ot-call:hover { text-decoration-color: var(--white); }
.link { background: none; border: 0; padding: 0; min-height: 44px; color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* ================= buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px;
  border: 1px solid var(--rojo); border-radius: var(--r); background: var(--rojo); color: var(--white); text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 19px; line-height: 1;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn--outline { background: transparent; border-color: rgba(255, 255, 255, .8); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; font-weight: 600; }
.btn:disabled, .btn--off { background: transparent; border-color: var(--ctl); color: var(--muted); cursor: not-allowed; }
@media (hover: hover) {
  .btn:not(:disabled):not(.btn--outline):hover { background: #E03208; border-color: #E03208; }
  .btn--outline:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); }
}

/* ================= header ================= */
.ot-top {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 10px 24px;
  padding: 16px max(var(--gutter), calc((100% - var(--col)) / 2)); padding-top: max(16px, env(safe-area-inset-top));
  transition: background-color 240ms ease, padding 240ms var(--ease-out), border-color 240ms ease;
  border-bottom: 1px solid transparent;
}
.ot-top.is-solid {
  padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px;
  background: rgba(44, 44, 44, .82); border-bottom-color: rgba(96, 96, 96, .7);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.ot-top__home { position: relative; display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.ot-logo img { height: clamp(18px, 1.8vw, 26px); width: auto; }
.ot-top.is-solid .ot-logo img { height: clamp(16px, 1.5vw, 22px); }
.ot-top .ot-logo img { transition: height 240ms var(--ease-out); }
/* the glint: once, on load, a light sweeps across the white letters, masked by the logo file itself */
.ot-top__home::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../img/ontrack-white.webp) left center / contain no-repeat; mask: url(../img/ontrack-white.webp) left center / contain no-repeat;
  background: linear-gradient(115deg, transparent 38%, rgba(41, 121, 122, .9) 45%, #fff 50%, rgba(251, 58, 14, .85) 55%, transparent 62%) 120% 0 / 320% 100% no-repeat;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ot-top__home::after { animation: otGlint 1500ms var(--ease-in-out) 700ms 1 both; }
}
@keyframes otGlint { 0% { opacity: 1; background-position: 120% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } }
.ot-skip {
  position: fixed; top: 8px; left: 8px; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--r); background: var(--white); color: var(--negro); font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.ot-skip:focus { transform: none; }
.ot-nav { display: none; gap: 4px; }
.ot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--muted); transition: color 160ms ease; }
.ot-nav a:hover { color: var(--white); }
@media (min-width: 1100px) { .ot-nav { display: flex; } }

/* ================= opening ================= */
/* Clean, like the Bagatelle hero: the picture owns the top of the screen, and four things sit low over it — the dates and
   place, the headline, both actions and the countdown. The days and the venue line live in the sections below. */
.ot-open { position: relative; overflow: hidden; display: flex; min-height: clamp(600px, 100svh, 940px); isolation: isolate; }
.ot-open__bg, .ot-open__bg img, .ot-trails, .ot-open__scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.ot-open__bg img { object-fit: cover; object-position: 50% 58%; }
/* tall screens get Frame 41's car, a third of the way across: lean the crop left so the car stays whole */
@media (max-aspect-ratio: 1/1) { .ot-open__bg img { object-position: 35% 50%; } }
/* clear through the middle so the trails read; dark only under the header and under the words */
.ot-open__scrim { background: linear-gradient(180deg, rgba(44, 44, 44, .5) 0%, rgba(44, 44, 44, 0) 20%, rgba(44, 44, 44, 0) 40%, rgba(44, 44, 44, .7) 66%, var(--negro) 100%); }
.ot-open__in { display: flex; flex-direction: column; justify-content: flex-end; padding-top: 104px; padding-bottom: clamp(32px, 5vw, 80px); }
.ot-open__copy { display: flex; flex-direction: column; gap: 20px; }
.ot-open .ot-h1 { text-wrap: balance; }
/* the venue name joins the dates where the line has room for it; phones keep the eyebrow to one line */
@media (max-width: 599px) { .ot-open__more { display: none; } }
.ot-open__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (max-width: 520px) { .ot-open__ctas .btn { flex: 1 1 0; padding: 0 12px; } }
.ot-open .ot-count { margin-top: 8px; }
/* wide screens: the headline runs to two balanced lines */
@media (min-width: 1000px) { .ot-open .ot-h1 { max-width: none; } }
/* a phone on its side: everything still fits the first view */
@media (orientation: landscape) and (max-height: 520px) {
  .ot-open { min-height: 0; }
  .ot-open__in { justify-content: flex-start; padding-top: 72px; }
  .ot-open__copy { gap: 12px; }
  .ot-h1 { font-size: clamp(30px, 9.5vh, 44px); max-width: 16em; }
  .ot-open__ctas .btn { min-height: 48px; }
}
/* timing board: Lights out in N days */
.ot-count { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.ot-count__n { display: flex; gap: 3px; }
.ot-count__n span {
  position: relative; display: grid; place-items: center; width: 34px; height: 44px; border-radius: var(--r);
  background: var(--deep); border: 1px solid #4A4A4A; color: var(--white);
  font: 800 28px/1 var(--display); font-stretch: 125%; font-variant-numeric: tabular-nums;
}
.ot-count__n span::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
/* the first time it is seen each digit flips onto the board a few times (initCount): it swings down on the hinge, dark
   until it lands, the way a flap falls */
.ot-count__n i { display: block; font-style: normal; }
.ot-count__n .is-flap { animation: otFlap 90ms var(--ease-out); }
@keyframes otFlap { from { transform: perspective(90px) rotateX(70deg); opacity: .3; } }
.ot-count .lbl:last-child { color: var(--white); }

/* ================= sections ================= */
.ot-section { position: relative; padding: clamp(64px, 8vw, 128px) 0; isolation: isolate; }
.ot-head { display: flex; flex-direction: column; gap: 14px; max-width: 42rem; margin-bottom: clamp(32px, 3.6vw, 52px); }
.ot-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); }
.ot-backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
canvas.ot-backdrop { width: 100%; height: 100%; } /* the Days trails: a canvas keeps 300x150 unless sized */

/* ================= where you'll be ================= */
.ot-where__grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px clamp(32px, 4vw, 64px); }
.ot-where__ctl { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1000px) {
  /* side by side whenever the controls stick, so the picture can never slide under them */
  .ot-where__grid { flex-wrap: nowrap; }
  .ot-where__ctl { position: sticky; top: 88px; flex: 0 0 clamp(340px, 34vw, 420px); }
  .ot-where .ot-head { margin-bottom: 20px; gap: 8px; }
  .ot-where .ot-detail { gap: 14px; }
  .ot-where .ot-act { padding: 16px 0; }
}
@media (min-width: 1000px) and (max-height: 960px) { .ot-where.ot-section { padding-top: 72px; } }
.ot-ctl__l { color: var(--muted); margin-bottom: 12px; }
.ot-ctl__line { margin-top: 12px; font-size: 14px; color: var(--muted); }
.ot-dayset { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* the Rojo bar under the chosen day is one bar that drives across to the next choice: --sel is the day's index, and a
   step is a column plus the 8px gap (the bar sits 1px inside each plate's border) */
.ot-dayset::after {
  content: ''; position: absolute; left: 1px; bottom: 1px; z-index: 1; width: calc((100% - 24px) / 4 - 2px); height: 5px; pointer-events: none;
  background: var(--rojo); transform: translateX(calc(var(--sel, 0) * (100% + 10px))); transition: transform 280ms var(--ease-in-out);
}
.ot-dayb {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: 72px; padding: 10px 10px 12px;
  border: 1px solid var(--ctl); border-radius: var(--r); background: var(--raised); color: var(--white); text-align: left;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.ot-dayb__date { font: 800 28px/1 var(--display); font-stretch: 125%; }
.ot-dayb[aria-pressed="true"] { background: var(--white); color: var(--negro); border-color: var(--white); }
@media (hover: hover) { .ot-dayb[aria-pressed="false"]:hover { border-color: var(--white); } }
.ot-pickarea { display: flex; flex-direction: column; gap: 10px; }
.ot-pickarea .ot-ctl__l { margin-bottom: 2px; }
.ot-area {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 76px; padding: 14px 16px;
  border: 1px solid var(--ctl); border-radius: var(--r); background: var(--raised-2); color: var(--white); text-align: left;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.ot-area__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ot-area__name { font: 700 17px/1.25 var(--display); font-stretch: 110%; }
@media (min-width: 1000px) { .ot-area__name { white-space: nowrap; } }
.ot-area__kind { font-size: 13px; color: var(--muted); }
.ot-area__state { flex-shrink: 0; white-space: nowrap; font: 700 16px/1 var(--display); font-stretch: 112%; }
.ot-area[data-state="soldout"] .ot-area__state { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.ot-area[aria-pressed="true"] { background: var(--azul); border: 2px solid var(--white); padding: 13px 15px; }
.ot-area[aria-pressed="true"] .ot-area__kind, .ot-area[aria-pressed="true"] .ot-area__state { color: var(--white); }
@media (hover: hover) { .ot-area[aria-pressed="false"]:hover { border-color: var(--white); } }

.ot-detail { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
/* 16:9 is the clips' own frame: Chrome on Android letterboxed them in a 16:10 box, showing the box colour under the film */
.ot-detail__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--raised); }
@media (min-width: 1000px) { .ot-detail__media { aspect-ratio: 2 / 1; } }
/* laptop-height screens: a slightly wider picture keeps the price and action on the first screen */
@media (min-width: 1000px) and (max-height: 960px) { .ot-detail__media { aspect-ratio: 9 / 4; } }
.ot-media, .ot-media img, .ot-media video { position: absolute; inset: 0; width: 100%; height: 100%; }
.ot-media img, .ot-media video { object-fit: cover; }
.ot-media video { opacity: 0; transition: opacity 400ms ease; }
.ot-media.is-film video { opacity: 1; }
.vidctl {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--r); background: rgba(28, 28, 28, .62); color: var(--white);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.vidctl svg { width: 14px; height: 14px; }
.vidctl:hover { background: rgba(28, 28, 28, .85); }
.vidctl:active { transform: scale(.95); }
.vidctl.is-loading svg { opacity: 0; }
.vidctl.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--white); border-radius: 50%; animation: otSpin 800ms linear infinite; }
@keyframes otSpin { to { transform: rotate(360deg); } }
/* the one area-change effect: the new still wipes in over the old at the slash angle */
.ot-media.is-old { position: absolute; inset: 0; pointer-events: none; }
.ot-media.is-old + .ot-media { clip-path: polygon(-35% 0, 0% 0, -35% 100%, -35% 100%); } /* waits for its picture */
.ot-media.is-old + .ot-media.is-in { animation: otWipe 560ms var(--ease-out) both; }
@keyframes otWipe { from { clip-path: polygon(-35% 0, 0% 0, -35% 100%, -35% 100%); } to { clip-path: polygon(-35% 0, 135% 0, 100% 100%, -35% 100%); } }
/* the light sweep: a streak rides the wipe's edge, bright at its head like the trails. The edge crosses 35% of the box's
   width over its height, so the streak's slant follows the box's aspect (--ar); same duration and curve as the wipe */
.ot-detail__media { --ar: 1.7778; }
@media (min-width: 1000px) { .ot-detail__media { --ar: 2; } }
@media (min-width: 1000px) and (max-height: 960px) { .ot-detail__media { --ar: 2.25; } }
@supports (transform: skewX(atan(1))) {
  .ot-media.is-old + .ot-media.is-in::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 8%; pointer-events: none; transform-origin: 0 0;
    background: linear-gradient(90deg, rgba(251, 58, 14, 0), rgba(255, 90, 38, .5) 58%, rgba(255, 201, 168, .9) 86%, #fff 95%, rgba(255, 255, 255, 0));
    mix-blend-mode: screen; animation: otSweep 560ms var(--ease-out) both, otSweepFade 560ms linear both;
  }
}
@keyframes otSweep {
  from { transform: translateX(-100%) skewX(calc(-1 * atan(.35 * var(--ar)))); }
  to { transform: translateX(1587.5%) skewX(calc(-1 * atan(.35 * var(--ar)))); } /* its head ends at 135%, where the wipe's does */
}
@keyframes otSweepFade { 70% { opacity: 1; } to { opacity: 0; } }

.ot-detail__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.ot-detail__name { font-size: clamp(30px, 3.2vw, 44px); line-height: 1; }
.ot-detail__where { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.ot-detail__where svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--white); }
.ot-detail__price { display: flex; flex-direction: column; gap: 6px; }
.ot-detail__price .lbl { color: var(--muted); }
.ot-detail__amount { font: 700 30px/1 var(--display); font-stretch: 112%; white-space: nowrap; }
.ot-detail__sub { font-size: 13px; color: var(--muted); }
.ot-tick { display: inline-flex; }
.ot-tick > span { display: inline-block; }
.ot-tick__d { overflow: hidden; vertical-align: top; }
/* the timing-board tick: digits roll in from above, one after another */
@media (prefers-reduced-motion: no-preference) {
  .is-tick .ot-tick__d { animation: otTick 340ms var(--ease-out) both; animation-delay: calc(var(--i) * 26ms); }
}
@keyframes otTick { from { transform: translateY(-85%); filter: blur(1.5px); } to { transform: none; filter: none; } }
.ot-detail__short { max-width: 36rem; font-size: 17px; line-height: 1.55; color: var(--soft); }
.ot-ticks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; margin-top: 16px; }
.ot-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.ot-tickbox { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--r); background: var(--azul); color: var(--white); }
.ot-tickbox svg { width: 12px; height: 12px; }
.ot-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 0; border-top: 1px solid var(--gris); border-bottom: 1px solid var(--gris); }
.ot-act__note { max-width: 26rem; font-size: 14px; color: var(--muted); }
.ot-alts { display: grid; gap: 8px; width: 100%; }
.ot-alts__l { color: var(--muted); }
.ot-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r); background: transparent; color: var(--white); text-align: left; transition: background-color 160ms ease;
}
.ot-alt__name { font: 700 16px/1.25 var(--display); font-stretch: 110%; }
.ot-alt__state { flex-shrink: 0; white-space: nowrap; font: 700 16px/1 var(--display); font-stretch: 112%; }
@media (hover: hover) { .ot-alt:hover { background: rgba(255, 255, 255, .1); } }
.ot-picker__sum .ot-alts { margin-top: 6px; }
@media (max-width: 520px) { .ot-act .btn, .ot-enquiry__foot .btn, .ot-picker__go, .ot-days__foot .btn, .ot-band--race .btn { width: 100%; } }

/* ================= the plan ================= */
.ot-where__map { margin-top: clamp(64px, 7vw, 112px); padding-top: 24px; border-top: 1px solid var(--gris); }
@media (min-width: 1000px) {
  .ot-where__map { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px clamp(32px, 4vw, 64px); align-items: start; }
  .ot-where__maphead { grid-column: 1; grid-row: 1; flex-direction: column; }
  .ot-map-note { grid-column: 1; grid-row: 2; }
  .ot-map-key { grid-column: 1; grid-row: 3; margin-top: 8px; }
  .ot-map__stage { grid-column: 2; grid-row: 1 / span 4; max-width: 900px; justify-self: end; width: 100%; }
}
.ot-where__maphead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.ot-map-view { font-size: 14px; color: var(--muted); }
/* one box for the 2D plan and the 3D venue that replaces it, so nothing moves when it arrives */
.ot-map__stage { position: relative; aspect-ratio: 4 / 5; max-height: 82svh; overflow: hidden; border: 1px solid var(--gris); border-radius: var(--r); background: #232323; isolation: isolate; }
@media (min-width: 700px) { .ot-map__stage { aspect-ratio: 5 / 4; } }
.ot-map svg { display: block; width: 100%; height: auto; }
/* on the stage the plan fills the box; a standalone map (OT.mount('map')) keeps its own height */
.ot-map__stage .ot-map { position: absolute; inset: 0; transition: opacity 600ms ease, visibility 0s 600ms; }
.ot-map__stage .ot-map svg { height: 100%; }
.ot-map__stage.is-3d .ot-map { opacity: 0; visibility: hidden; }
.ot-map__runoff { fill: none; stroke: rgba(0, 0, 0, .18); stroke-width: 200; stroke-linejoin: round; }
.ot-map__circuit { fill: none; stroke: rgba(0, 0, 0, .28); stroke-width: 110; stroke-linejoin: round; }
.ot-map__streak { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 16 84; stroke-dashoffset: 100; animation: otLap 7s linear infinite; }
.ot-map__streak.is-glow { stroke-width: 30; opacity: .85; }
.ot-map__streak--rojo { stroke: var(--rojo); }
.ot-map__streak--azul { stroke: #3FB3B4; animation-duration: 9.5s; animation-delay: -4s; }
.ot-map__streak--azul.is-glow { stroke: var(--azul); }
@keyframes otLap { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ot-map__streak { animation: none; stroke-dashoffset: 62; } .ot-map__streak--azul { stroke-dashoffset: 18; } }
.ot-map__circuit-label, .ot-map__grandstand, .pin text {
  font-family: var(--display); font-stretch: 125%; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; pointer-events: none;
  paint-order: stroke; stroke: #161616; stroke-width: 10px; stroke-linejoin: round;
}
.ot-map__circuit-label, .ot-map__grandstand { fill: var(--muted); font-size: 34px; text-anchor: middle; }
.ot-map__outlook { opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.ot-map__outlook.is-cur { opacity: 1; }
.ot-map__view-field { fill: rgba(255, 255, 255, .08); }
.ot-map__view-line { fill: none; stroke: var(--white); stroke-width: 5; stroke-dasharray: 14 12; stroke-linecap: round; stroke-linejoin: round; }
/* zones: a 24-unit invisible stroke widens the hit areas */
.zone { fill: rgba(255, 255, 255, 0); stroke: rgba(0, 0, 0, 0); stroke-width: 24; cursor: pointer; pointer-events: visible; transition: fill 200ms ease; }
.zone:hover { fill: rgba(255, 255, 255, .1); }
.zone.is-cur { fill: rgba(41, 121, 122, .55); stroke: var(--white); stroke-width: 6; }
.pin { pointer-events: none; }
.pin circle { fill: var(--negro); stroke: var(--white); stroke-width: 4; }
.pin.is-cur circle { fill: var(--rojo); }
.pin text { fill: var(--white); font-size: 64px; text-anchor: middle; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .7)); }
.pin:not(.is-cur) text { display: none; }
@media (max-width: 699px) { .ot-map__circuit-label, .ot-map__grandstand { font-size: 36px; } }
@media (min-width: 700px) { .pin text { font-size: 38px; } .pin:not(.is-cur) text { display: inline; opacity: .8; } }
/* the venue in 3D (js/venue3d.js): the canvas, its area labels, the way back and a hint */
.ot-v3d { position: absolute; inset: 0; animation: otFade 700ms ease both; }
@keyframes otFade { from { opacity: 0; } }
.ot-v3d__canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.ot-v3d__canvas:active { cursor: grabbing; }
.ot-v3d__labels { position: absolute; inset: 0; pointer-events: none; }
.ot-v3d__tag { position: absolute; left: 0; top: 0; translate: -50% -100%; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--ctl); border-radius: var(--r); background: rgba(24, 24, 24, .82); color: var(--white);
  white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 200ms ease, border-color 200ms ease; }
.ot-v3d__tag[hidden] { display: none; }
.ot-v3d__tag[aria-pressed="true"] { background: var(--azul); border-color: var(--white); }
.ot-v3d__dot { width: 14px; height: 4px; background: var(--white); transform: skewX(var(--slash)); }
.ot-v3d__tag[aria-pressed="true"] .ot-v3d__dot { background: var(--rojo); }
@media (hover: hover) { .ot-v3d__tag:hover { border-color: var(--white); } }
/* phones: long names wrap onto two lines, so a label never spans the stage */
@media (max-width: 559px) { .ot-v3d__tag { padding: 4px 10px; gap: 6px; white-space: normal; max-width: 150px; text-align: left; } }
/* place names over the 3D: read, never pressed */
.ot-v3d__mark { position: absolute; left: 0; top: 0; translate: -50% -50%; margin: 0; color: var(--muted); white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 6px #111, 0 0 2px #111; }
.ot-v3d__back { position: absolute; top: 12px; right: 12px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r);
  background: rgba(24, 24, 24, .82); color: var(--white); cursor: pointer; }
.ot-v3d__back[hidden] { display: none; }
.ot-v3d__tag:focus-visible, .ot-v3d__back:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ot-v3d { animation: none; } .ot-map { transition: none; } }
.ot-v3d__hint { position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 6px 10px; border-radius: var(--r); background: rgba(24, 24, 24, .82); color: var(--muted); pointer-events: none; transition: opacity 400ms ease; }
.ot-v3d.is-used .ot-v3d__hint { opacity: 0; }
.ot-map__stage.is-3d + .ot-map-key .ot-map-key__2d { display: none; }
.ot-map-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; color: var(--muted); }
.ot-map-key span { display: inline-flex; align-items: center; gap: 8px; }
.ot-map-key i { display: inline-block; width: 22px; height: 4px; }
.ot-map-key__lap { background: linear-gradient(90deg, var(--azul), var(--rojo)); transform: skewX(var(--slash)); }
.ot-map-key__view { border-top: 2px dashed var(--white); height: 0 !important; }
.ot-map-key__zone { height: 14px !important; width: 14px !important; background: var(--azul); outline: 2px solid var(--white); outline-offset: -2px; }
.ot-map-note { margin-top: 12px; font-size: 13px; color: var(--muted); max-width: 44rem; }

/* ================= atmosphere bands ================= */
.ot-band { position: relative; overflow: hidden; overflow: clip; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(560px, 92vh, 880px); }
.ot-band__img { position: absolute; inset: 0; z-index: -1; }
.ot-band__img img { width: 100%; height: 100%; object-fit: cover; }
.ot-band--place::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--negro) 0%, rgba(44, 44, 44, .1) 26%, rgba(44, 44, 44, .25) 55%, rgba(44, 44, 44, .92) 86%, var(--negro) 100%); }
.ot-band__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: clamp(48px, 7vw, 112px); }
.ot-band__copy .ot-h2 { max-width: 13em; }
.ot-band__copy .ot-lede { color: var(--soft); }
.ot-band--race { min-height: 0; display: grid; align-items: center; padding: clamp(64px, 8vw, 120px) 0; }
.ot-band--race .ot-band__img { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 5; width: calc(100% - 2 * var(--gutter)); margin: 0 auto 36px; border-radius: var(--r); overflow: hidden; overflow: clip; }
.ot-band--race .ot-band__copy { padding-bottom: 0; }
.ot-band--race .btn { margin-top: 8px; }
.ot-band--race .ot-h2 { font-size: clamp(44px, 7vw, 104px); line-height: .92; }
@media (min-width: 800px) {
  .ot-band--race { grid-template-columns: 1fr 1fr; }
  .ot-band--race .ot-band__img { grid-column: 2; grid-row: 1; width: auto; margin: 0 max(var(--gutter), calc((100vw - var(--col)) / 2)) 0 0; max-height: 820px; }
  .ot-band--race .ot-band__copy { grid-column: 1; grid-row: 1; max-width: none; padding-left: max(var(--gutter), calc((100vw - var(--col)) / 2)); padding-right: clamp(32px, 4vw, 64px); }
}
/* the venue band: a full-bleed portrait on phones; from 800px a split, the 1080px picture shown at no more than its own width */
.ot-band--place { min-height: clamp(520px, 80vh, 760px); }
@media (min-width: 800px) {
  .ot-band--place { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 64px); padding: clamp(56px, 6vw, 96px) 0; }
  .ot-band--place::before { display: none; }
  .ot-band--place .ot-band__img { position: relative; inset: auto; z-index: 0; grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; max-width: 1080px; margin-left: max(var(--gutter), calc((100vw - var(--col)) / 2)); border-radius: var(--r); overflow: hidden; overflow: clip; }
  .ot-band--place .ot-band__copy { grid-column: 2; grid-row: 1; max-width: none; padding: 0 max(var(--gutter), calc((100vw - var(--col)) / 2)) 0 0; }
}
/* scroll-driven atmosphere: pictures drift and open with the scroll; text is never hidden. Their boxes clip with
   overflow: clip, not hidden: hidden makes a box a scroll container, and view() would measure against it, frozen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ot-band--race .ot-band__img { animation: otOpen linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .ot-band--race .ot-band__img img { animation: otDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* the venue and VIP pictures drift with the scroll too: windows onto the venue, with depth (the race band alone opens) */
    .ot-band--place .ot-band__img img, .ot-neon, .ot-vip__img img { animation: otDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .ot-vip__img img { transform-origin: 50% 80%; } /* where its crop keeps the sofas */
    .ot-section .ot-eyebrow .ot-slash, .ot-band .ot-eyebrow .ot-slash { animation: otSlash linear both; animation-timeline: view(); animation-range: cover 26% cover 36%; transform-origin: left; } /* as the lap line's head (two thirds down) reaches it */
  }
}
/* the lap line (Motion 9): Azul outside, Rojo inside, down the left gutter over every section, drawn by ontrack.js as
   the page scrolls. Above the sections (they isolate their own layers), so it stays in the gutter and never under text */
main { position: relative; }
.ot-lap { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; will-change: transform; }
.ot-lap use { stroke-dasharray: 0 1e6; }
.ot-lap__azul { stroke: #4FC3BF; }
.ot-lap__rojo { stroke: #FF5A26; }
.ot-lap .ot-lap__track { stroke-width: 1.25px; opacity: .35; }
.ot-lap .ot-lap__glow { stroke-width: 7px; opacity: .2; }
.ot-lap .ot-lap__trail { stroke-width: 1.75px; }
.ot-lap .ot-lap__halo, .ot-lap .ot-lap__head { stroke-linecap: round; stroke-dasharray: .1 1e6; stroke-dashoffset: 10px; }
.ot-lap .ot-lap__halo { stroke-width: 14px; opacity: .3; }
.ot-lap .ot-lap__head { stroke-width: 3.5px; }
.ot-lap__azul .ot-lap__head { stroke: #B8FFF6; }
.ot-lap__rojo .ot-lap__head { stroke: #FFC9A8; }
.ot-lap__fade--azul stop { stop-color: #4FC3BF; }
.ot-lap__fade--rojo stop { stop-color: #FF5A26; }
.ot-lap.is-whole .ot-lap__track { opacity: .5; }
.ot-lap.is-whole use:not(.ot-lap__track) { display: none; }
/* the W's canopy lights (phones): every few seconds a light runs along the LEDs, from the wave's tip to the end of the
   dome, as the real canopy's lights do. Masked by w-hotel-neon.webp, made from the photo by scripts/web-media-v2.py, and
   drifting with the picture, so it stays on the lights. Off the screen it waits; reduced motion takes it away */
.ot-neon { position: absolute; inset: 0; z-index: -1; overflow: hidden; overflow: clip; pointer-events: none; } /* empty until it nears the screen */
.ot-neon i { display: none; }
@media (min-width: 800px) { .ot-neon { display: none; } } /* the terrace at sunset: no canopy lights */
@media (max-width: 799px) and (prefers-reduced-motion: no-preference) {
  .ot-neon.is-near { -webkit-mask: url(../media/v2/w-hotel-neon.webp?v=n2) center / cover no-repeat; mask: url(../media/v2/w-hotel-neon.webp?v=n2) center / cover no-repeat; }
  .ot-neon.is-near i { display: block; position: absolute; inset: 0 auto 0 0; width: 70%; transform: translateX(-100%); animation: otNeon 8s cubic-bezier(.45, 0, .55, 1) infinite paused;
    background: linear-gradient(90deg, transparent, rgba(255, 90, 38, .4) 30%, rgba(255, 240, 228, .8) 50%, rgba(255, 150, 190, .4) 70%, transparent); }
  .ot-neon.is-on i { animation-play-state: running; }
}
@keyframes otNeon { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(150%); } }
@keyframes otDrift { from { transform: scale(1.14) translateY(-4%); } to { transform: scale(1.02) translateY(3%); } }
@keyframes otOpen { from { clip-path: inset(14% 10% 14% 10%); } to { clip-path: inset(0); } }
@keyframes otSlash { from { transform: skewX(var(--slash)) scaleX(.2); } to { transform: skewX(var(--slash)) scaleX(1); } }

/* ================= days and access ================= */
.ot-daytabs { display: grid; gap: 32px; }
.ot-daytabs .ot-dayset { max-width: 560px; }
.ot-daytabs__panel { display: grid; gap: 40px clamp(32px, 5vw, 80px); }
@media (min-width: 900px) { .ot-daytabs__panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.ot-board__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.ot-board__title { font-size: clamp(28px, 2.6vw, 36px); line-height: 1; }
.ot-board__head .lbl { color: var(--muted); }
.ot-board { border-bottom: 1px solid var(--gris); margin-bottom: 14px; }
.ot-board li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 12px 0; border-top: 1px solid var(--gris); }
.ot-board__t { display: inline-flex; gap: 2px; overflow: hidden; padding: 6px 10px; border-radius: var(--r); background: var(--deep); border: 1px solid #4A4A4A; font: 800 24px/1 var(--display); font-stretch: 125%; letter-spacing: .02em; }
.ot-board__e { font-size: 17px; color: var(--soft); }
.ot-access { width: 100%; border-collapse: collapse; }
.ot-access tr { border-top: 1px solid var(--gris); }
.ot-access tr:last-child { border-bottom: 1px solid var(--gris); }
.ot-access th, .ot-access td { padding: 14px 0; text-align: left; vertical-align: middle; font-weight: 400; }
.ot-access th { width: 100%; display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; }
.ot-access__thumb { grid-row: span 2; width: 56px; height: 56px; overflow: hidden; border-radius: var(--r); background: var(--raised); }
.ot-access__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ot-access__name { font: 700 17px/1.2 var(--display); font-stretch: 110%; }
.ot-access__short { font-size: 13px; color: var(--muted); }
.ot-access td { text-align: right; padding-left: 12px; }
.state { display: block; font: 700 17px/1.2 var(--display); font-stretch: 112%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.state__sub { display: block; font-size: 12px; color: var(--muted); }
.state--soldout { color: var(--muted); }
@media (max-width: 600px) { .ot-access th { grid-template-columns: 1fr; } .ot-access__thumb { display: none; } }
@media (max-width: 699px) { .ot-daytabs [data-slot="access"], .ot-days__foot .ot-note { display: none; } }
.ot-days__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 40px; }

/* ================= tickets ================= */
.ot-tickets__grid { display: grid; gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.ot-tickets__view { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--raised); --ar: .8; }
.ot-tickets__pics { position: absolute; inset: 0; }
/* after the base rule: the picture starts level with the picker, then sticks below the header */
@media (min-width: 1000px) { .ot-tickets__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } .ot-tickets__view { position: sticky; top: 96px; } }
.ot-tickets__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 14px; background: linear-gradient(transparent, rgba(20, 20, 20, .85)); color: var(--white); }
@media (max-width: 999px) { .ot-tickets__view { aspect-ratio: 16 / 10; --ar: 1.6; } } /* --ar: the light sweep's slant */
.ot-picker { display: flex; flex-direction: column; gap: 32px; }
.ot-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.ot-step__l { display: block; padding: 0; margin-bottom: 12px; color: var(--muted); }
.ot-chips { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* the ticket picker: one "chosen" look for day and area (an Azul outline over an Azul tint; a filled dot on areas), so
   the orange stays for the one action below */
.ot-chip { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 10px; border: 1px solid var(--ctl); border-radius: var(--r); background: transparent; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.ot-chip input, .ot-option input, .ot-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ot-chip__date { font: 800 22px/1 var(--display); font-stretch: 125%; }
.ot-chip__title { font-size: 11px; line-height: 1.25; color: var(--muted); }
.ot-chip:has(input:checked) { background: var(--azul-tint); border-color: var(--azul-line); box-shadow: inset 0 0 0 1px var(--azul-line); }
.ot-chip:has(input:checked) .ot-chip__title { color: var(--white); }
.ot-chip:has(input:focus-visible), .ot-option:has(input:focus-visible), .ot-check:has(input:focus-visible) .ot-check__box { outline: 3px solid var(--white); outline-offset: 3px; }
.ot-options { display: flex; flex-direction: column; border: 1px solid var(--ctl); border-radius: var(--r); }
.ot-option { position: relative; display: grid; grid-template-columns: 18px 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 72px; padding: 12px 14px; border-top: 1px solid var(--gris); background: transparent; cursor: pointer; transition: background-color 180ms ease; }
.ot-option:first-child { border-top: 0; }
.ot-option::before { content: ''; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--ctl); border-radius: 50%; }
.ot-option__img { width: 52px; height: 40px; overflow: hidden; border-radius: var(--r); background: var(--raised); }
.ot-option__img img { width: 100%; height: 100%; object-fit: cover; }
.ot-option__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ot-option__name { font: 700 16px/1.25 var(--display); font-stretch: 110%; }
.ot-option__short { font-size: 13px; color: var(--muted); }
.ot-option__state { text-align: right; }
.ot-option:has(input:checked) { background: var(--azul-tint); box-shadow: inset 0 0 0 2px var(--azul-line); }
.ot-option:has(input:checked)::before { border-color: var(--azul-line); background: radial-gradient(circle, var(--azul-line) 0 4px, transparent 4.5px); }
.ot-option:has(input:focus-visible) { outline-offset: -5px; } /* inside the list, not over its neighbours */
.ot-option:has(input:checked) :is(.ot-option__short, .state__sub, .state) { color: var(--white); }
.ot-option.is-off { cursor: not-allowed; }
.ot-option.is-off .ot-option__img, .ot-option.is-off::before { opacity: .5; }
@media (max-width: 420px) {
  .ot-option { grid-template-columns: 18px 44px minmax(0, 1fr) auto; gap: 12px; }
  .ot-option__img { width: 44px; height: 36px; }
  .ot-option .state { font-size: 15px; }
  .ot-option .state__sub { font-size: 11px; }
}
.ot-table__txt { margin: 0; color: var(--soft); }
.ot-qty { display: inline-flex; align-items: center; border: 1px solid var(--ctl); border-radius: var(--r); }
.ot-qty__b { display: grid; place-items: center; width: 52px; height: 52px; border: 0; background: transparent; }
.ot-qty__b svg { width: 16px; height: 16px; }
.ot-qty__b:hover { background: rgba(255, 255, 255, .08); }
.ot-qty__v { min-width: 3ch; text-align: center; font: 800 26px/1 var(--display); font-stretch: 125%; }
.ot-reg { display: grid; gap: 18px; }
.ot-reg__intro { color: var(--soft); max-width: 34rem; }
.ot-picker__foot { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--gris); }
.ot-picker__sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.ot-picker__line { color: var(--muted); font-size: 15px; }
.ot-picker__total { font: 800 34px/1 var(--display); font-stretch: 115%; }
.ot-picker__go { width: 100%; }
.ot-picker__note { font-size: 14px; color: var(--muted); }
.ot-picker__note:empty { display: none; }

/* ================= fields ================= */
.ot-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; margin: 0; padding: 0; }
.ot-field__l { font-weight: 600; font-size: 15px; padding: 0; }
.ot-field__opt { font-weight: 400; color: var(--muted); }
.ot-field__hint { font-size: 13px; color: var(--muted); }
.ot-input { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--ctl); border-radius: var(--r); background: var(--raised-2); font-size: 16px; transition: border-color 160ms ease; }
.ot-input:hover { border-color: #9A9A9A; }
.ot-input:focus { border-color: var(--white); outline: none; box-shadow: 0 0 0 1px var(--white); }
select.ot-input { appearance: none; padding-right: 44px; background: var(--raised-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center; }
.is-invalid .ot-input { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo); }
.ot-field__err { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--white); }
.ot-field__err::before { content: ''; flex-shrink: 0; width: 14px; height: 3px; background: var(--rojo); transform: skewX(var(--slash)); }
.ot-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ot-check { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px; border: 1px solid var(--ctl); border-radius: var(--r); background: var(--raised-2); cursor: pointer; }
.ot-check__box { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--ctl); border-radius: var(--r); color: transparent; }
.ot-check__box svg { width: 12px; height: 12px; }
.ot-check:has(input:checked) { border-color: var(--white); }
.ot-check:has(input:checked) .ot-check__box { background: var(--azul); border-color: var(--azul); color: var(--white); }
@media (max-width: 480px) { .ot-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ot-done { display: grid; gap: 10px; padding: 24px; border: 1px solid var(--white); border-radius: var(--r); }
.ot-done__h { font-size: 28px; line-height: 1.05; }

/* ================= VIP Zone ================= */
.ot-vip__top { display: grid; gap: 32px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 4vw, 56px); }
.ot-vip__top .ot-head { margin-bottom: 0; }
@media (min-width: 1000px) { .ot-vip__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.ot-vip__img { aspect-ratio: 16 / 10; overflow: hidden; overflow: clip; border-radius: var(--r); background: var(--raised); }
.ot-vip__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; } /* the 4:5 outlook, cropped low so the sofas stay in */
.ot-vip__contact { color: var(--muted); font-size: 15px; }
.ot-pkgs { margin-bottom: clamp(48px, 5vw, 72px); }
.ot-pkgs ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, calc(50% - 6px)), 1fr)); gap: 12px; margin-bottom: 14px; }
.ot-pkg {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; height: 100%; min-height: 220px; padding: 22px 22px 20px;
  border: 1px solid var(--ctl); border-radius: var(--r); background: linear-gradient(160deg, #383838, var(--raised-2) 55%); text-align: left; overflow: hidden;
  transition: border-color 180ms ease, transform 220ms var(--ease-out);
}
.ot-pkg::before { content: ''; position: absolute; top: 0; left: 22px; width: 34px; height: 4px; background: var(--azul); transform: skewX(var(--slash)); }
.ot-pkg__name { font-size: 28px; line-height: 1; margin-top: 8px; }
.ot-pkg__meta { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); }
.ot-pkg__price { margin-top: auto; padding-top: 16px; font: 700 20px/1.2 var(--display); font-stretch: 112%; }
.ot-pkg__go { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); transition: color 160ms ease; }
.ot-pkg__go::before { content: ''; width: 16px; height: 3px; background: var(--rojo); transform: skewX(var(--slash)); }
.ot-pkg__price { white-space: nowrap; }
/* phones: compact full-width cards, name and price on one row, the details below, the action at the end */
@media (max-width: 600px) {
  .ot-pkgs ul { grid-template-columns: 1fr; gap: 8px; }
  .ot-pkg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; min-height: 0; padding: 18px 16px 14px; }
  .ot-pkg::before { left: 16px; }
  .ot-pkg__name { grid-column: 1; grid-row: 1; margin-top: 0; font-size: 20px; }
  .ot-pkg__price { grid-column: 2; grid-row: 1; margin-top: 0; padding-top: 0; font-size: 15px; text-align: right; }
  .ot-pkg__meta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 2px 14px; }
  .ot-pkg__go { grid-column: 1 / -1; justify-self: start; min-height: 32px; }
}
/* the 2px white edge is 1px border + 1px inset ring, so the card's padding and layout never shift */
.ot-pkg[aria-pressed="true"] { background: var(--azul); border-color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.ot-pkg[aria-pressed="true"]::before { background: var(--white); }
.ot-pkg[aria-pressed="true"], .ot-pkg[aria-pressed="true"] * { color: var(--white); border-color: var(--white); }
@media (hover: hover) { .ot-pkg:hover { border-color: var(--white); transform: translateY(-2px); } .ot-pkg:hover .ot-pkg__go { color: var(--white); } }
.ot-pkg:active { transform: scale(.98); }
.ot-enquiry { display: grid; gap: 28px; padding-top: 32px; border-top: 1px solid var(--gris); }
/* labels share a top line, and each hint sits under its own input, so the two columns stay aligned */
.ot-enquiry__grid { display: grid; gap: 22px 20px; align-items: start; }
@media (min-width: 760px) { .ot-enquiry__grid { grid-template-columns: 1fr 1fr; } .ot-field--days { grid-column: 1 / -1; } }
.ot-enquiry__side { display: grid; gap: 8px; max-width: 34rem; color: var(--soft); }
.ot-enquiry__side .lbl { color: var(--muted); }
@media (min-width: 1000px) {
  .ot-enquiry { grid-template-columns: minmax(0, 880px) minmax(240px, 1fr); column-gap: clamp(40px, 5vw, 80px); } /* the side keeps 240px; the form gives way */
  .ot-enquiry__grid, .ot-enquiry__foot, .ot-enquiry .ot-done { grid-column: 1; }
  .ot-enquiry__side { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 96px; padding-left: 24px; border-left: 1px solid var(--gris); }
}
.ot-enquiry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* ================= FAQ ================= */
.ot-faq__grid { display: grid; gap: 24px clamp(32px, 6vw, 96px); }
@media (min-width: 1000px) { .ot-faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); } }
.ot-q { border-top: 1px solid var(--gris); }
.ot-q:last-child { border-bottom: 1px solid var(--gris); }
.ot-q summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 16px 0; cursor: pointer; list-style: none; font: 700 19px/1.3 var(--display); font-stretch: 110%; }
.ot-q summary::-webkit-details-marker { display: none; }
.ot-q summary i { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.ot-q summary i::before, .ot-q summary i::after { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--white); transition: transform 240ms var(--ease-out); }
.ot-q summary i::after { transform: rotate(90deg); }
.ot-q[open] summary i::after { transform: rotate(0deg); }
.ot-q__a { padding: 0 0 24px; max-width: 42rem; color: var(--soft); }

/* ================= footer ================= */
.ot-foot { border-top: 1px solid var(--gris); }
.ot-foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 28px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); font-size: 13px; color: var(--muted); }
.ot-foot__logo img { height: 16px; width: auto; }
.ot-foot .ot-call { display: inline-flex; align-items: center; min-height: 44px; }
.ot-foot__small { flex-basis: 100%; }
@media (max-width: 999px) { .ot-foot__in { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } }

/* ================= sticky booking bar (phones) ================= */
.ot-sbar {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px; border: 1px solid var(--gris); border-radius: var(--r); background: rgba(44, 44, 44, .88);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform 320ms var(--ease-out), visibility 0s 320ms;
}
.ot-sbar.is-on { transform: none; visibility: visible; transition: transform 320ms var(--ease-out); }
.ot-sbar__sum { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 44px; text-decoration: none; }
.ot-sbar__area { font: 700 15px/1.15 var(--display); font-stretch: 110%; } /* wraps rather than cutting the area's name */
.ot-sbar__sep { display: none; }
.ot-sbar__line { font-size: 13px; color: var(--muted); }
.ot-sbar .btn { flex-shrink: 0; min-height: 48px; padding: 0 18px; font-size: 17px; }
@media (min-width: 1000px) { .ot-sbar { display: none; } }

/* ================= rhythm ================= */
/* phones: where two padded blocks meet, 40 + 40 makes one 80px beat instead of a stacked 128px gap (after every section's own padding) */
@media (max-width: 699px) { .ot-section, .ot-band--race { padding: 40px 0; } }

/* ================= reduced motion: a still frame everywhere ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ot-top__home::after { display: none; }
  .ot-media.is-old + .ot-media.is-in { animation: none; clip-path: none; } /* still waits for its picture, then cuts */
  .ot-media.is-in::after { display: none; }
}
/* a picture revealed while out of sight (it loaded after the visitor scrolled away) cuts in, with no wipe or sweep */
.ot-media.is-old + .ot-media.is-cut { animation: none; clip-path: none; }
.ot-media.is-old + .ot-media.is-cut::after { display: none; }