:root {
  --font-serif: 'Ancizar Serif', Georgia, serif;
  --font-display: 'League Gothic', 'Arial Narrow', sans-serif;
  --font-sans: 'DM Sans', Helvetica, Arial, sans-serif;

  --color-cream: #ffefa8;
  --color-cyan: #91f4ff;
  --color-white: #ffffff;
  --color-white-80: rgba(255, 255, 255, 0.8);

  --color-overlay: rgba(8, 11, 12, 0.5);
  --color-cta-bg: rgba(8, 11, 12, 0.69);
  --color-cta-bg-hover: rgba(35, 43, 47, 0.69);
  --color-cta-border: #46413b;
  --color-cta-border-hover: #7cb8d6;

  /* Fluid scale — the slope is set by the two Figma reference frames
     (mobile 440px / desktop 1440px: 20px → 40px padding, 74px → 115px
     title), then carried on past both ends. The clamp floors sit well
     below any real device width, so phones smaller than the 440px
     reference keep scaling fluidly too instead of flatlining at the
     reference value. Layout structure itself still switches at 1024px. */
  --hero-padding: clamp(16px, calc(11.2px + 2vw), 40px);
  /* The vh term keeps the title from overpowering short/landscape
     viewports (e.g. 1366x768 laptops) — it scales down with whichever
     of width or height is the tighter constraint. */
  --hero-title-size: clamp(64px, min(calc(55.96px + 4.1vw), 12.78vh), 115px);

  /* Fluid body copy for signal panels — 18px at the 1440px reference,
     scaling down to 15px by 1024px so wider panels (see .signal__text)
     keep the same proportions on smaller desktop screens. The vh term
     mirrors --hero-title-size, shrinking copy on short viewports too. */
  --signal-body-size: clamp(15px, min(calc(7.62px + 0.721vw), 2vh), 18px);

  /* Fluid gap/spacing for the signal panel — same width+height scaling
     as --signal-body-size, ref values 18px gap / 48px counter margin
     at 1440x900. */
  --signal-panel-gap: clamp(12px, min(calc(-2.77px + 1.4423vw), 2vh), 18px);
  --signal-counter-gap: clamp(28px, min(calc(-21.23px + 4.8077vw), 5.33vh), 48px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: #000;
  color: var(--color-white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Hero / Intro screen ---------- */

.hero {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

/* Header — mobile-first: logo + tagline stacked and centered, link hidden */
.hero__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  padding: var(--hero-padding);
  text-align: center;
}

.hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

.hero__logo {
  display: block;
  width: 42px;
  height: 27px;
}

.hero__brand-text,
.hero__link {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--color-white);
}

.hero__brand-text {
  white-space: normal;
}

.hero__link {
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Mobile-first: the link lives below the CTA inside the content column;
   the copy that normally sits in the header is hidden until desktop. */
.hero__header .hero__link {
  display: none;
}

/* Content — centered by the .hero flex container; width fluidly fills the
   viewport (minus the side padding) up to the 690px cap from the design */
.hero__content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  width: min(690px, calc(100% - 40px));
  text-align: center;
}

.hero__eyebrow {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.28;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--color-cream);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  width: 100%;
}

.hero__kicker {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.28;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--hero-title-size);
  line-height: 0.93;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 91;
  color: var(--color-white);
}

.hero__title span {
  display: block;
}

/* Words created by SplitText for the blur-in reveal — left unmasked
   (no overflow: hidden) so each word appears to materialize in place. */
.split-word {
  display: inline-block;
  will-change: transform, filter, opacity;
}

.hero__divider {
  display: block;
  width: 50px;
  height: 2px;
  background: var(--color-cyan);
}

.hero__text {
  max-width: 600px;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.5;
  font-variation-settings: 'opsz' 14;
  color: var(--color-white-80);
}

/* ---------- CTA ---------- */
/* Mobile-first: a full-width bar that sits in the content's flow.
   On desktop it detaches into an absolutely positioned pill near the
   bottom of the viewport — `.hero__content` is never a positioned
   ancestor, so `position: absolute` here resolves against `.hero`. */
.cta {
  position: static;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 31px;
  border: 1px solid var(--color-cta-border);
  background: var(--color-cta-bg);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.cta span {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 1.98px;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

.cta:hover,
.cta:focus-visible {
  border-color: var(--color-cta-border-hover);
  background: var(--color-cta-bg-hover);
}

/* ---------- Hall → Living scene transition ---------- */
/* A full-viewport canvas that paints over both scenes while they swap —
   JS dissolves it from a snapshot of the Hall's photo into one of the
   Living Room's through an animated noise pattern, then fades it out
   once the real Living scene is in place underneath. */
.scene-transition {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Living Room scene ---------- */
/* Hidden until the Hall's exit animation completes — JS flips it to
   visible (autoAlpha) and plays its own entrance timeline from there. */
.hero--living {
  opacity: 0;
  visibility: hidden;
}

/* ---------- Cocina scene ---------- */
/* Hidden until the Living Room's exit animation hands off — same
   pattern as .hero--living. The overlay is kept lighter than the
   default because the kitchen photo carries its own moody warmth. */
.hero--cocina {
  opacity: 0;
  visibility: hidden;
}

.hero--cocina .hero__overlay {
  background: rgba(8, 11, 12, 0.2);
}

/* ---------- Habitación scene ---------- */
/* Hidden until the Cocina's exit animation hands off — same pattern as
   .hero--cocina. */
.hero--habitacion {
  opacity: 0;
  visibility: hidden;
}

/* ---------- Quincho scene ---------- */
/* Hidden until the Habitación's exit animation hands off — same pattern as
   .hero--cocina. */
.hero--quincho {
  opacity: 0;
  visibility: hidden;
}

/* "02. LIVING" — same type styling as .hero__eyebrow. Mobile-first:
   bottom-centered per the Figma mobile frame (20px gap = --hero-padding
   at the 440px reference); desktop anchors it to the top-left instead. */
.hero__label {
  position: absolute;
  left: 50%;
  bottom: var(--hero-padding);
  transform: translateX(-50%);
  z-index: 2;
}

/* The clipping window — always exactly the viewport. The stage inside
   it is sized in JS to "cover" that window at the photo's true ratio,
   so it's always at least as big as the viewport in both dimensions. */
.hero__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Drag handle for the scene — like panning around a 3D space to see the
   parts of the room that don't fit in the 100vh frame. Width/height and
   position (x/y) are set by JS/Draggable; it starts larger than the
   viewport in whichever axis the photo has to be cropped on. */
.hero__stage {
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;
  touch-action: none;
}

.hero__stage:active {
  cursor: grabbing;
}

.hero__stage .hero__image {
  pointer-events: none;
  user-select: none;
}

/* Pulsing points of interest. Positioned as percentages of the photo
   itself (computed from its 2880x1720 pixels — the 1440x860 reference
   frame is an exact half-scale crop of it) so each marker stays pinned
   to the same spot in the scene — e.g. the calendar — as it's panned
   and as the viewport's size or aspect ratio changes. */
.hotspot {
  position: absolute;
  left: var(--hotspot-x, 50%);
  top: var(--hotspot-y, 50%);
  width: clamp(46px, 4.8vw, 72px);
  height: clamp(46px, 4.8vw, 72px);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

/* The handful of hotspots that open a signal's detail view — cursor and
   focus ring make the affordance legible to mouse and keyboard alike. */
.hotspot--clickable {
  cursor: pointer;
  pointer-events: auto;
}

.hotspot--clickable:focus-visible {
  outline: 2px solid var(--color-cta-border-hover);
  outline-offset: 6px;
  border-radius: 50%;
}

.hotspot__icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.hotspot__pulse {
  position: absolute;
  inset: -62.5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 184, 214, 0.35) 0%, rgba(124, 184, 214, 0) 70%);
  animation: hotspot-pulse 2.6s ease-out infinite;
  animation-delay: var(--hotspot-delay, 0s);
  pointer-events: none;
}

@keyframes hotspot-pulse {
  0% {
    transform: scale(0.55);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* "Ir a la cocina" — a smaller pill pinned to its photo-relative spot;
   same backdrop-blur recipe as .cta, scaled down per the Figma frame. */
.exit-link {
  position: absolute;
  left: var(--exit-x, 50%);
  top: var(--exit-y, 50%);
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-cta-border);
  background: var(--color-cta-bg);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  text-decoration: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, top 0.4s ease;
}

.exit-link:hover,
.exit-link:focus-visible {
  border-color: var(--color-cta-border-hover);
  background: var(--color-cta-bg-hover);
}


.exit-link__icon {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
}

.exit-link span {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

/* ---------- "El 16 de junio" signal overlay ---------- */
/* The detail view a calendar hotspot opens into: the camera has pushed in
   on the photo behind it, and this layer reads on top of that magnified
   scene — its own header, vignettes, annotated photo cards and copy panel
   replace the Living scene's normal UI until "Volver al living" reverses
   the whole sequence. Positions are percentages of the 1440x860 reference
   frame (the Figma detail composition), the same convention .hotspot and
   .exit-link use, so everything scales fluidly with the viewport. */
.signal {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}

.signal__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.signal__vignette--right {
  background: linear-gradient(to left, rgba(8, 11, 12, 0.92) 0%, rgba(8, 11, 12, 0) 56%);
}

.signal__vignette--bottom {
  background: linear-gradient(to top, rgba(8, 11, 12, 0.88) 0%, rgba(8, 11, 12, 0) 42%);
}

.signal__vignette--left {
  background: linear-gradient(to right, rgba(8, 11, 12, 0.7) 0%, rgba(8, 11, 12, 0) 28%);
}

/* Hand-drawn-style annotation lines connecting marked points on the photo
   to the cards that explain them — sized/positioned as percentages so
   they travel together with the cards and dots they link. */
.signal__line {
  position: absolute;
  left: var(--line-x);
  top: var(--line-y);
  width: var(--line-w);
  height: var(--line-h);
  opacity: 0.55;
  pointer-events: none;
}

.signal__dot {
  position: absolute;
  left: var(--dot-x);
  top: var(--dot-y);
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: url('../Assets/signal-dot.svg') center / contain no-repeat;
  pointer-events: none;
}

.signal__card {
  position: absolute;
  left: var(--card-x);
  top: var(--card-y);
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
}

.signal__card-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signal__card-tint {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.signal__card-caption {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 1.6vw, 22px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.28;
  color: var(--color-white);
  white-space: nowrap;
}

.signal__card-date {
  font-size: clamp(11px, 1.15vw, 17px);
  letter-spacing: 0.6px;
}

.signal__card-country {
  font-size: clamp(13px, 1.4vw, 20px);
  letter-spacing: 0.9px;
}

/* Right-anchored, vertically centered copy block — eyebrow, title, text,
   the way back, and the reveal counter. */
.signal__panel {
  position: absolute;
  right: clamp(20px, 2.85vw, 41px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--signal-panel-gap);
  width: min(560px, calc(100% - 2 * var(--hero-padding)));
  text-align: left;
}

.signal__eyebrow {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--signal-body-size);
  line-height: 1.28;
  letter-spacing: 1.98px;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.signal__divider {
  display: block;
  width: 50px;
  height: 2px;
  background: var(--color-cyan);
}

.signal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--hero-title-size);
  line-height: 0.93;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 91;
  color: var(--color-white);
}

/* Long copy gets its own scroll area rather than overflowing the panel —
   every signal panel keeps the same overall footprint regardless of how
   much text it has. */
.signal__text {
  max-width: 520px;
  font-family: var(--font-sans);
  font-size: var(--signal-body-size);
  line-height: 1.5;
  font-variation-settings: 'opsz' 14;
  color: var(--color-white-80);
}

.signal__back.cta {
  position: static;
  width: auto;
  margin-top: 8px;
  transform: none;
}

.signal__counter {
  margin-top: var(--signal-counter-gap);
  font-family: var(--font-serif);
  font-size: var(--signal-body-size);
  letter-spacing: 1.98px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Chair signal: larger title (120px per Figma vs 115px cap on the shared variable) */
#signal-chair .signal__title {
  font-size: clamp(90px, 8.33vw, 120px);
}

/* ---------- TV signal overrides ---------- */
/* Panel anchors to the LEFT — TV lives on the right half of the frame */
#signal-tv .signal__panel {
  right: auto;
  left: clamp(20px, 2.85vw, 41px);
}

/* Heavier left vignette to keep the text panel legible over the room image */
#signal-tv .signal__vignette--left {
  background: linear-gradient(to right, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 62%);
}

/* Narrower right vignette — just darkens the far-right edge */
#signal-tv .signal__vignette--right {
  background: linear-gradient(to left, rgba(8, 11, 12, 0.92) 0%, rgba(8, 11, 12, 0) 22%);
}

#signal-tv .signal__title {
  font-size: clamp(90px, 8.33vw, 120px);
}

#signal-tv .signal__text {
  font-size: 20px;
}

/* Play-overlay button centred on the TV screen.
   position:fixed escapes .signal__panel's containing block so the
   coordinates resolve against the viewport — same pixel result as the
   previous position:absolute against .signal (inset:0 = full viewport).
   Centering offset is applied in JS (positionPlayBtn) to avoid conflicts
   with GSAP's transform management. */
.signal__tv-play {
  position: fixed;
  left: 70%;
  top: 44%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 44px;
  border: 1px solid var(--color-cta-border);
  background: rgba(8, 11, 12, 0.87);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 21px;
  letter-spacing: 0.84px;
  white-space: nowrap;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.signal__tv-play:hover,
.signal__tv-play:focus-visible {
  border-color: var(--color-cta-border-hover);
  background: rgba(35, 43, 47, 0.87);
}

/* ---------- Video player panel ---------- */
/* Docked to the bottom of the TV signal overlay — the room and signal
   panel stay visible above it. Slides in from below on open. */
.video-player {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(8, 11, 12, 0.88);
  opacity: 0;
  visibility: hidden;
}

.video-player__wrap {
  position: relative;
  /* Width is constrained by three limits: fixed max, available width, and
     the height of the viewport — whichever is tightest wins. The vh term
     (100vh - 80px padding) × 16/9 keeps the player fully on-screen even
     on short or landscape viewports without needing media queries. */
  width: min(1360px, calc(100% - 0px), calc((100vh - 80px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.video-player__video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-player__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 11, 12, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  z-index: 1;
  transition: background 0.2s ease;
}

.video-player__close:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Almanaque signal overrides ---------- */
/* Panel on RIGHT (default), vertically centred (default). Vignettes match
   the radio signal recipe — heavier right edge where the text panel lives. */
#signal-almanaque .signal__vignette--right {
  background: linear-gradient(to left, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 60%);
}

#signal-almanaque .signal__vignette--left {
  background: linear-gradient(to right, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 22%);
}

#signal-almanaque .signal__title {
  font-size: clamp(90px, 8.33vw, 120px);
}

#signal-almanaque .signal__panel {
  width: min(605px, calc(100% - 2 * var(--hero-padding)));
}

/* ---------- Canadá signal overrides ---------- */
/* Panel on RIGHT (default), vertically centred (default). Same recipe as
   the almanaque signal — heavier right edge where the text panel lives. */
#signal-canada .signal__vignette--right {
  background: linear-gradient(to left, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 60%);
}

#signal-canada .signal__vignette--left {
  background: linear-gradient(to right, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 22%);
}

#signal-canada .signal__title {
  font-size: clamp(90px, 8.33vw, 120px);
}

#signal-canada .signal__panel {
  width: min(605px, calc(100% - 2 * var(--hero-padding)));
}

/* ---------- Belgrano signal overrides ---------- */
/* Panel on RIGHT (default), vertically centred (default). Same recipe as
   the almanaque/canada signals — heavier right edge where the text panel lives. */
#signal-belgrano .signal__vignette--right {
  background: linear-gradient(to left, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 60%);
}

#signal-belgrano .signal__vignette--left {
  background: linear-gradient(to right, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 22%);
}

#signal-belgrano .signal__title {
  font-size: clamp(90px, 8.33vw, 120px);
}

#signal-belgrano .signal__panel {
  width: min(605px, calc(100% - 2 * var(--hero-padding)));
}

/* ---------- Balón de Oro signal overrides ---------- */
/* Panel anchors to the LEFT — the trophy shelf is in the right half of
   the frame (same recipe as the TV signal). */
#signal-balon .signal__panel {
  right: auto;
  left: clamp(60px, 6vw, 100px);
  width: min(640px, calc(100% - 2 * var(--hero-padding)));
}

#signal-balon .signal__text {
  max-width: 580px;
}

#signal-balon .signal__vignette--left {
  background: linear-gradient(to right, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 62%);
}

#signal-balon .signal__vignette--right {
  background: linear-gradient(to left, rgba(8, 11, 12, 0.92) 0%, rgba(8, 11, 12, 0) 22%);
}

/* ---------- Camisetas de Messi signal overrides ---------- */
/* Panel stays on the RIGHT (default) — the jersey sits left-of-centre once
   the camera pushes in. Same heavier-right-vignette recipe as belgrano. */
#signal-camisetas .signal__vignette--right {
  background: linear-gradient(to left, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 60%);
}

#signal-camisetas .signal__vignette--left {
  background: linear-gradient(to right, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 22%);
}

#signal-camisetas .signal__title {
  font-size: clamp(90px, 8.33vw, 120px);
}

#signal-camisetas .signal__panel {
  width: min(820px, calc(100% - 2 * var(--hero-padding)));
}

#signal-camisetas .signal__text {
  max-width: none;
}

/* ---------- Los 36 años signal overrides ---------- */
/* Panel stays on the RIGHT (default) — the suitcase/jersey corner sits
   left-of-centre once the camera pushes in. Same vignette recipe as the
   other Quincho signals. */
#signal-36anos .signal__vignette--right {
  background: linear-gradient(to left, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 60%);
}

#signal-36anos .signal__vignette--left {
  background: linear-gradient(to right, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 22%);
}

#signal-36anos .signal__title {
  font-size: clamp(90px, 8.33vw, 120px);
}

#signal-36anos .signal__panel {
  width: min(605px, calc(100% - 2 * var(--hero-padding)));
}

#signal-36anos .signal__text {
  max-width: none;
}

/* Inline play button on the radio in the kitchen scene — replaces the old
   hotspot marker. Sits at the same percentage position on the stage. */
.radio-play {
  position: absolute;
  left: var(--hotspot-x, 50%);
  top: var(--hotspot-y, 50%);
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(50px, 5.2vw, 76px);
  height: clamp(50px, 5.2vw, 76px);
  border-radius: 50%;
  border: none;
  background: rgba(8, 11, 12, 0.52);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.2s ease;
}

.radio-play:hover,
.radio-play:focus-visible {
  background: rgba(8, 11, 12, 0.72);
  transform: translate(-50%, -50%) scale(1.1);
}

.radio-play:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 4px;
}

.radio-play svg {
  width: clamp(22px, 2.3vw, 32px);
  height: clamp(22px, 2.3vw, 32px);
}

.radio-play__icon--pause {
  display: none;
}

.radio-play.is-playing .radio-play__icon--play {
  display: none;
}

.radio-play.is-playing .radio-play__icon--pause {
  display: flex;
}

/* ---------- Mobile signal overlay (< 1024px) ---------- */
@media (max-width: 1023px) {
  /* On mobile the panel lives at the bottom, not the right — hide the
     side vignettes and make the bottom one much heavier so the text
     stays legible over whatever the camera has zoomed to. */
  .signal__vignette--right,
  .signal__vignette--left {
    display: none;
  }

  .signal__vignette--bottom {
    background: linear-gradient(to top, rgba(8, 11, 12, 0.96) 0%, rgba(8, 11, 12, 0) 72%);
  }

  /* Panel anchored to the bottom edge, full-width, and given a fixed
     footprint — every signal gets the same height regardless of how
     much copy it has. Header/title/button/counter keep their natural
     size; .signal__text is the only flexible child, and scrolls
     internally if its copy doesn't fit. */
  .signal__panel {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: auto;
    height: min(75vh, 640px);
    padding: 36px var(--hero-padding) 32px;
    gap: 13px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .signal__panel > * {
    flex: 0 0 auto;
  }

  /* Large display title — matches Figma's 100px at full mobile width */
  .signal__title {
    font-size: clamp(72px, 23vw, 100px);
  }

  /* Body copy slightly smaller on mobile, and scrollable on its own so
     long copy never pushes the button/counter out of the panel. */
  .signal__text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    font-size: 18px;
    max-width: none;
    margin-top: 3px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-white-80) transparent;
  }

  .signal__text::-webkit-scrollbar {
    width: 4px;
  }

  .signal__text::-webkit-scrollbar-thumb {
    background: var(--color-white-80);
    border-radius: 2px;
  }

  .signal__text::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Full-width back button, extra breathing room above it */
  .signal__back.cta {
    width: 100%;
    margin-top: 20px;
  }

  /* Counter centered and flush with the panel gap */
  .signal__counter {
    width: 100%;
    text-align: center;
    margin-top: 4px;
  }

  #signal-chair .signal__title {
    font-size: clamp(80px, 25vw, 110px);
  }

  /* On mobile the TV panel is at the bottom (inherited), left-anchor is ignored */
  #signal-tv .signal__panel {
    left: 0;
  }

  /* On mobile the Balón de Oro panel is at the bottom (inherited), left-anchor is ignored */
  #signal-balon .signal__panel {
    left: 0;
  }

  /* TV play button: flows in the panel column below the title on mobile */
  .signal__tv-play {
    position: static;
    transform: none;
    width: 100%;
    justify-content: center;
    flex: 0 0 auto;
    padding: 12px 28px;
    font-size: 18px;
  }

  /* Video player goes full-width on mobile, centered, with a dark backdrop.
     The same vh-based width constraint from the base rule handles height
     overflow on landscape phones. */
  .video-player {
    padding: 0;
    background: rgba(8, 11, 12, 0.88);
  }

  .video-player__wrap {
    width: min(100%, calc((100vh) * 16 / 9));
  }

  /* Almanaque: reset panel width to full-width on mobile (overrides the
     desktop 605px width which has higher specificity than the base mobile rule). */
  #signal-almanaque .signal__panel {
    width: auto;
  }

  /* Canadá: reset panel width to full-width on mobile, same as almanaque. */
  #signal-canada .signal__panel {
    width: auto;
  }

  /* Belgrano: reset panel width to full-width on mobile, same as almanaque. */
  #signal-belgrano .signal__panel {
    width: auto;
  }

  /* Camisetas de Messi: long body copy needs the
     shrunk title/text/eyebrow to avoid overflowing the mobile viewport. */
  #signal-camisetas .signal__panel {
    width: auto;
  }

  #signal-camisetas .signal__title {
    font-size: clamp(40px, 10.5vw, 48px);
  }

  #signal-camisetas .signal__text {
    font-size: 16px;
  }

  #signal-camisetas .signal__eyebrow {
    font-size: 14px;
    letter-spacing: 1.54px;
  }

  /* Hall hero — fluid scaling to prevent content from overlapping the fixed
     header on short mobile viewports (e.g. 393×667). padding-top shifts the
     flex centroid downward; the gap/font clamps shrink the total content
     height as viewport height decreases, so the two effects compound. */
  #hall {
    /* Baseline push on all mobile heights so "01. Hall" clears the header.
       At ≤800px it reaches 100px max; at taller viewports it tapers to a
       60px floor — enough to keep the eyebrow below the brand tagline
       without pushing "Sobre la experiencia" off the bottom on SE screens. */
    padding-top: clamp(60px, calc(700px - 75vh), 100px);
  }

  /* Tighten the logo→tagline gap in the Hall header so the header itself
     is ~11px shorter, buying extra clearance on narrow/short screens. */
  #hall .hero__header .hero__brand {
    gap: 8px;
  }

  #hall .hero__content {
    gap: clamp(9px, 2.2vh, 16px);
  }

  #hall .hero__copy {
    gap: clamp(5px, 1.9vh, 13px);
  }

  #hall .hero__eyebrow,
  #hall .hero__kicker {
    font-size: clamp(12px, 2.1vh, 16px);
  }

  #hall .hero__text {
    font-size: clamp(13px, 2.4vh, 17px);
  }

  #hall .cta {
    padding-top: clamp(12px, 2.7vh, 20px);
    padding-bottom: clamp(12px, 2.7vh, 20px);
  }
}

/* ---------- "Sobre la experiencia" overlay ---------- */
.about-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 11, 12, 0.35);
  -webkit-backdrop-filter: blur(10.7px);
  backdrop-filter: blur(10.7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.about-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.about-overlay__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px var(--hero-padding);
  background: var(--color-cta-bg);
  border: 1px solid var(--color-cta-border);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 1.98px;
}

.about-overlay__text {
  margin: 0;
  max-width: 100%;
  text-align: center;
  line-height: 1.4;
}

.about-overlay__credit {
  text-align: center;
}

.about-overlay__close {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.about-overlay__close:hover,
.about-overlay__close:focus-visible {
  color: var(--color-cta-border-hover);
}

/* ---------- Living room tutorial overlay ----------
   Shown once, right after the Hall → Living scene transition finishes,
   to teach the drag-to-look-around interaction. Dismissed via "Entendido". */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 11, 12, 0.53);
  -webkit-backdrop-filter: blur(10.7px);
  backdrop-filter: blur(10.7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.tutorial-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.tutorial-overlay__hint {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(248, 241, 234, 0.02);
  border: 0.714px solid rgba(255, 255, 255, 0.23);
  border-radius: 70px;
}

.tutorial-overlay__hint-icon {
  width: 17px;
  height: 17px;
}

.tutorial-overlay__hint--left {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.tutorial-overlay__hint--right {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.tutorial-overlay__hint--top {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.tutorial-overlay__hint--bottom {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.tutorial-overlay__hint-icon--up {
  transform: rotate(90deg);
}

.tutorial-overlay__hint-icon--down {
  transform: rotate(-90deg);
}

.tutorial-overlay__hint-icon--right {
  transform: rotate(180deg);
}

.tutorial-overlay__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  width: 266px;
}

.tutorial-overlay__text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 1.98px;
  text-align: center;
}

.tutorial-overlay__text {
  margin: 0;
  font-weight: 300;
  line-height: 1.4;
}

.tutorial-overlay__close {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: 1.28;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.tutorial-overlay__close:hover,
.tutorial-overlay__close:focus-visible {
  color: var(--color-cta-border-hover);
}

.tutorial-overlay__drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  background: rgba(248, 241, 234, 0.02);
  border-radius: 55.714px;
  overflow: hidden;
}

.tutorial-overlay__drag-icon {
  width: 30px;
  height: 30px;
}

/* ---------- Ending scene ----------
   An 84-frame image sequence drawn to a canvas, scrubbed by scroll
   position. Hidden (and out of flow) until activated, at which point it
   becomes a tall scrollable section with the canvas pinned in view. */
.ending {
  display: none;
  position: relative;
  height: 400vh;
  background: #000;
}

.ending.is-active {
  display: block;
}

.ending__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.ending__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ending__back {
  position: absolute;
  top: var(--hero-padding);
  left: var(--hero-padding);
  z-index: 2;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-white);
}

.ending__back:hover,
.ending__back:focus-visible {
  color: var(--color-cta-border-hover);
}

.ending__title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 0 var(--hero-padding);
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--hero-title-size);
  line-height: 0.93;
  text-align: center;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 91;
  color: var(--color-white);
}

/* ---------- Form scene ---------- */

.form-scene {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow-y: auto;
  background-color: #f0ece6;
  background-image: url('../Assets/FormMobileBG.png');
  background-size: cover;
  background-position: center top;
  flex-direction: column;
  align-items: center;
  /* flex-start, not center: with `overflow-y: auto` + justify-content:
     center, content taller than the viewport overflows equally off the
     top and bottom, and the browser won't let you scroll up far enough
     to reach the part that overflowed off the top — it just renders
     off-screen. Anchoring to the top makes this scroll like a normal
     page once the testimonials carousel pushes content past one screen. */
  justify-content: flex-start;
  gap: 24px;
  padding: 72px var(--hero-padding) 40px;
}

.form-scene.is-active {
  display: flex;
}

.form-scene__back {
  position: fixed;
  top: var(--hero-padding);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #000;
  white-space: nowrap;
}

.form-scene__back:hover,
.form-scene__back:focus-visible {
  color: #1b77cd;
}

.form-scene__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
  max-width: 343px;
}

.form-scene__title {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 0.93;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 91;
  color: #000;
  max-width: 220px;
  text-align: center;
}

.form-scene__subtitle {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.28;
  color: #000;
  text-align: center;
  width: 100%;
}

/* ---------- Testimonial carousel ("Cábalas de la gente") ----------
   Mobile-first: a bare prev/card/next row with no heading or dots,
   sitting between the header and the form fields (see Figma 826:32).
   Desktop relocates this whole block into a full-height side panel via
   absolute positioning and reveals the heading/counter/dots that are
   hidden on mobile (see Figma 750:183 / the @media override below). */
.form-scene__testimonials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 343px;
}

.form-scene__testimonials-header {
  display: none;
}

.form-scene__carousel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.form-scene__carousel-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border-radius: 13px;
  padding: 18px 20px;
}

.form-scene__carousel-quote {
  display: block;
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  color: #bde1f3;
}

.form-scene__carousel-text {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.32;
  color: #000;
}

.form-scene__carousel-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: #bde1f3;
}

.form-scene__carousel-name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 15px;
  color: #363636;
}

.form-scene__carousel-nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.form-scene__carousel-nav:hover,
.form-scene__carousel-nav:focus-visible {
  transform: scale(1.06);
}

.form-scene__carousel-dots {
  display: none;
}

.form-scene__carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #bde1f3;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.form-scene__carousel-dot.is-active {
  background: #1b77cd;
  transform: scale(1.2);
}

.form-scene__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 343px;
}

.form-scene__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.form-scene__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-scene__label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #000;
}

.form-scene__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: #fff7ec;
  border: 1px solid #eee2d5;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: #000;
  outline: none;
  appearance: none;
}

.form-scene__input:focus {
  border-color: #1b77cd;
  outline: 2px solid rgba(27, 119, 205, 0.25);
  outline-offset: 0;
}

.form-scene__textarea {
  width: 100%;
  height: 118px;
  padding: 14px;
  background: #fff7ec;
  border: 1px solid #eee2d5;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: #000;
  resize: vertical;
  outline: none;
}

.form-scene__textarea::placeholder {
  color: #797979;
}

.form-scene__textarea:focus {
  border-color: #1b77cd;
  outline: 2px solid rgba(27, 119, 205, 0.25);
  outline-offset: 0;
}

.form-scene__checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.form-scene__checkbox {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 1.5px solid #ddc3a7;
  border-radius: 4px;
  background: #fff;
  appearance: none;
  cursor: pointer;
  margin-top: 1px;
}

.form-scene__checkbox:checked {
  background: #1b77cd;
  border-color: #1b77cd;
}

.form-scene__checkbox-label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.32;
  color: #000;
  max-width: 300px;
  cursor: pointer;
}

.form-scene__submit {
  width: 100%;
  padding: 16px 40px;
  background: #227cd0;
  border: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  letter-spacing: 0;
  transition: background 0.2s ease;
}

.form-scene__submit:hover {
  background: #1a6ab8;
}

.form-scene__disclaimer {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.32;
  color: #000;
  text-align: center;
  max-width: 392px;
}

.about-overlay__credit {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.75;
}

.about-overlay__credit a {
  color: red;
  text-decoration: underline;
}

/* ---------- Desktop layout (>= 1024px) ---------- */
@media (min-width: 1024px) {
  .hero__header {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .hero__brand {
    flex-direction: row;
    align-items: center;
    gap: 36px;
  }

  .hero__brand-text,
  .hero__link {
    white-space: nowrap;
  }

  /* Desktop: link moves back into the header (top right); the
     below-CTA copy is no longer needed. */
  .hero__header .hero__link {
    display: block;
  }

  .hero__link--below-cta {
    display: none;
  }

  .cta {
    position: absolute;
    left: 50%;
    bottom: 7.5vh;
    transform: translateX(-50%);
    z-index: 2;
    width: auto;
    display: inline-flex;
  }

  /* Desktop: "02. LIVING" anchors to the top-left corner instead of
     sitting bottom-centered like the mobile composition. */
  .hero__label {
    left: var(--hero-padding);
    top: 14.42%;
    bottom: auto;
    transform: none;
  }

  .about-overlay__panel {
    width: 636px;
    padding: 63px 55px;
    font-size: 21px;
    letter-spacing: 2.31px;
  }

  /* Desktop: the tutorial overlay's hint circles and copy scale up to
     match the wider Figma reference (705:45) instead of the mobile one. */
  .tutorial-overlay__hint {
    width: 56px;
    height: 56px;
    border-width: 1px;
    border-radius: 98px;
  }

  .tutorial-overlay__hint-icon {
    width: 24px;
    height: 24px;
  }

  .tutorial-overlay__hint--left {
    left: 36px;
  }

  .tutorial-overlay__hint--right {
    right: 36px;
  }

  .tutorial-overlay__hint--top {
    top: 36px;
  }

  .tutorial-overlay__hint--bottom {
    bottom: 36px;
  }

  .tutorial-overlay__panel {
    gap: 24px;
    width: 372px;
  }

  .tutorial-overlay__text-group {
    gap: 24px;
    font-size: 21px;
    letter-spacing: 2.31px;
  }

  .tutorial-overlay__drag {
    width: 100px;
    height: 100px;
  }

  .tutorial-overlay__drag-icon {
    width: 42px;
    height: 42px;
  }

  .ending__title {
    max-width: 899px;
  }

  /* Desktop: the left column anchors near the left edge instead of
     centering — the right half is reserved for the testimonials panel,
     which escapes via absolute positioning below. `.form-scene` keeps
     padding: 0 so its padding-box edges (the containing block for that
     absolutely positioned panel) stay flush with the real viewport edges;
     the 167px/94px offset is applied via margin on the header/form
     instead, so it doesn't shift the panel's containing block. */
  .form-scene {
    background-image: url('../Assets/FormBG.png');
    background-position: center center;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 38px;
    padding: 0;
  }

  .form-scene__back {
    left: var(--hero-padding);
    transform: none;
    top: var(--hero-padding);
  }

  .form-scene__header {
    width: 430px;
    max-width: 430px;
    margin: 94px 0 0 167px;
    align-items: flex-start;
    text-align: left;
  }

  .form-scene__title {
    font-size: 80px;
    max-width: none;
    width: 100%;
    text-align: left;
  }

  .form-scene__subtitle {
    text-align: left;
  }

  /* Desktop: relocated out of the left column into a full-height,
     tinted side panel flush against the right edge of the viewport.
     `position: fixed` (not absolute) so it stays put against the real
     viewport while `.form-scene`'s left column scrolls past underneath
     it — `.form-scene` has its own `overflow-y: auto`, and an absolute
     panel would scroll along with that content instead of staying
     pinned. The heading/counter/dots hidden on mobile reappear here. */
  .form-scene__testimonials {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 720px;
    max-width: 50vw;
    background: rgba(230, 219, 209, 0.41);
    justify-content: center;
    gap: 27px;
    padding: 40px;
  }

  .form-scene__testimonials-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 346px;
    text-align: center;
  }

  .form-scene__testimonials-title {
    font-family: var(--font-display);
    font-size: 42px;
    line-height: 0.93;
    text-transform: uppercase;
    font-variation-settings: 'wdth' 91;
    color: #000;
  }

  .form-scene__testimonials-subtitle {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.28;
    color: #000;
  }

  .form-scene__testimonials-counter {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
  }

  .form-scene__testimonials-count {
    font-family: var(--font-serif);
    font-size: 18px;
    color: #1b77cd;
    white-space: nowrap;
  }

  .form-scene__testimonials-line {
    flex: 1;
    height: 1px;
    background: #bde1f3;
  }

  .form-scene__carousel {
    width: 508px;
    gap: 41px;
  }

  .form-scene__carousel-card {
    width: 346px;
    flex: none;
    padding: 33px 26px;
    gap: 26px;
  }

  .form-scene__carousel-quote {
    font-size: 94px;
  }

  .form-scene__carousel-text {
    font-size: 19px;
    line-height: 1.32;
  }

  .form-scene__carousel-name {
    font-size: 16px;
  }

  .form-scene__carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .form-scene__fields,
  .form-scene__form {
    width: 430px;
  }

  .form-scene__form {
    max-width: 430px;
    margin: 0 0 60px 167px;
  }

  .form-scene__input {
    height: 50px;
    background: #fff;
    border-radius: 8px;
  }

  .form-scene__textarea {
    height: 123px;
    background: #fff;
    border-radius: 8px;
  }

  .form-scene__checkbox-label {
    max-width: 392px;
  }

  .form-scene__submit {
    background: #1b77cd;
  }

  .form-scene__submit:hover {
    background: #1563b0;
  }
}