/* Arisa Digital · funnel de fincas de bodas
   Mismo sistema que /fincas/ en su tema claro (página arena, texto carbón, dorado), y pensado para el móvil:
   una columna, sin menú, sin efectos de scroll. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-variable.woff2") format("woff2"); }

:root {
  --fg-rgb: 42, 37, 33;
  --bg: #F4EBDD;
  --surface: #FBF6EE;
  --surface-2: #EADFCC;
  --paper: #FFFDF8; /* la ficha de la consulta y los campos: un punto más claros que las tarjetas */
  --text: rgb(var(--fg-rgb));
  --text-70: rgba(var(--fg-rgb), .78);
  --text-55: rgba(var(--fg-rgb), .66); /* texto secundario pequeño: llega a 4,5:1 sobre arena */
  --line: rgba(var(--fg-rgb), .16);
  --gold: #D6B24C;      /* fondo de los botones y subrayados */
  --gold-deep: #C4A03A; /* el botón al pasar por encima */
  --gold-soft: #75600F; /* dorado para texto e iconos: sobre arena el de los botones no se lee */
  --on-gold: #2A2521;
  --warn: #A5351C;

  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.55; letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(214, 178, 76, .38); }

.page { max-width: 600px; margin-inline: auto; padding: 0 var(--gutter) calc(120px + env(safe-area-inset-bottom)); }

/* ---------- Tipografía ---------- */
h1, h2, .niche, .punch { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 12vw, 4.3rem); line-height: .92; }
h2 { font-size: clamp(2.1rem, 9vw, 3rem); line-height: .95; }
h3 { font-size: 1.22rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.lede { font-size: 1.12rem; line-height: 1.5; color: var(--text-70); text-wrap: pretty; }

/* ---------- Inicio ---------- */
.hero { position: relative; isolation: isolate; padding-top: 46px; }
/* Las guirnaldas: un lienzo detrás del texto, de borde a borde de la pantalla aunque la columna sea estrecha */
[data-lights] { position: relative; isolation: isolate; }
.lights { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none; }
.lights canvas { display: block; width: 100%; height: 100%; }
.niche { margin-top: 0; font-size: 1.62rem; line-height: 1; color: var(--gold-soft); letter-spacing: 0; }
.niche__fit { margin-top: 8px; font-size: .94rem; color: var(--text-55); }
.hero h1 { margin-top: 22px; }

/* ---------- El vídeo y, debajo, la ficha del antes y el después ---------- */
.vsl { margin-top: 18px; margin-bottom: 56px; }
.vsl__frame { position: relative; aspect-ratio: 16 / 9; margin-bottom: 14px; border-radius: 14px; overflow: hidden; background: #2A2521; }
/* La portada: carbón con una cuadrícula suave y un brillo dorado detrás del play. Si config.js trae miniatura, va de fondo en su lugar */
.vsl__lead { margin-bottom: 10px; text-align: center; font-size: .86rem; line-height: 1.4; color: var(--text-55); }
.vsl__lead b { font-weight: 600; color: var(--text); }
.vsl__poster {
  position: absolute; inset: 0; width: 100%; display: grid; place-items: center; align-content: center; gap: 10px; padding: 12px 18px;
  color: #F4EBDD; text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(214, 178, 76, .26), rgba(214, 178, 76, 0) 34%),
    linear-gradient(rgba(244, 235, 221, .055) 1px, transparent 1px) 50% 50% / 26px 26px,
    linear-gradient(90deg, rgba(244, 235, 221, .055) 1px, transparent 1px) 50% 50% / 26px 26px,
    #1F1B18;
}
.vsl__poster.has-poster { background: linear-gradient(rgba(31, 27, 24, .42), rgba(31, 27, 24, .42)), var(--poster) center / cover no-repeat; }
.vsl__icon { width: 64px; height: 64px; box-shadow: 0 0 0 8px rgba(244, 235, 221, .28), 0 6px 22px rgba(0, 0, 0, .35); }
.vsl__poster.has-poster .vsl__icon svg { width: 22px; height: 24px; }
.vsl__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; padding-left: 4px; box-shadow: 0 0 0 7px rgba(214, 178, 76, .16); transition: transform .15s var(--ease); }
.vsl__icon svg { width: 18px; height: 20px; }
.vsl__poster:hover .vsl__icon { transform: scale(1.06); }
.vsl__text { display: grid; gap: 7px; font-size: .74rem; letter-spacing: .01em; color: rgba(244, 235, 221, .62); }
.vsl__poster.has-poster .vsl__text b { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 2px 16px rgba(0, 0, 0, .75); }
.vsl__text b { max-width: 31ch; margin-inline: auto; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.12rem, 5.3vw, 2rem); line-height: 1.06; letter-spacing: -0.005em; color: #F4EBDD; text-wrap: balance; }
@media (min-width: 601px) { .vsl__poster { gap: 16px; } .vsl__icon { width: 68px; height: 68px; } .vsl__icon svg { width: 22px; height: 24px; } .vsl__text { gap: 10px; font-size: .84rem; } }
.vsl__video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
/* El hueco: mientras no haya vídeo */
.vsl__frame.is-hole { background: none; border: 2px dashed rgba(var(--fg-rgb), .4); }
.vsl__hole { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; padding: 20px; text-align: center; font-size: .88rem; line-height: 1.4; color: var(--text-55); }
.vsl__hole b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; text-transform: uppercase; color: var(--text); }

.slip { background: var(--paper); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; box-shadow: 0 26px 50px -34px rgba(var(--fg-rgb), .6); }
.slip__tag { display: inline-block; font-size: .78rem; color: var(--text-55); border: 1px dashed rgba(var(--fg-rgb), .4); border-radius: 999px; padding: 3px 10px; }
.slip__who { margin-top: 12px; font-size: 1.28rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.slip__when { margin-top: 4px; font-size: .94rem; line-height: 1.4; color: var(--text-55); }
.slip__table { width: 100%; margin-top: 14px; border-collapse: collapse; table-layout: fixed; }
.slip__table th { width: 42%; text-align: left; font-size: .8rem; font-weight: 500; color: var(--text-55); padding-bottom: 6px; }
.slip__table th + th { width: 58%; padding-left: 10px; color: var(--text); font-weight: 600; }
.slip__table td { vertical-align: top; padding: 10px 0; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.3; color: var(--text-55); }
.slip__table td + td { padding-left: 10px; color: var(--text); font-weight: 600; }
.slip mark {
  color: inherit; padding: 0 2px; margin: 0 -2px;
  background: linear-gradient(rgba(214, 178, 76, .62), rgba(214, 178, 76, .62)) no-repeat 0 86% / 100% 46%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.slip__foot { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.4; color: var(--text-55); }
/* El único movimiento de la página: los datos que faltaban se van marcando */
@media (prefers-reduced-motion: no-preference) {
  .slip mark { background-size: 0 46%; animation: marca .7s var(--ease) forwards; }
  .slip tr:nth-child(1) mark { animation-delay: .7s; }
  .slip tr:nth-child(2) mark { animation-delay: 1.1s; }
  .slip tr:nth-child(3) mark { animation-delay: 1.5s; }
  .slip.is-waiting mark { animation-play-state: paused; } /* la ficha quedó debajo de los botones: se marca al asomar, no al cargar */
  @keyframes marca { to { background-size: 100% 46%; } }
}

/* ---------- Botones ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 10px 22px;
  border-radius: 10px; font-size: 1.02rem; font-weight: 600; line-height: 1.2; text-align: center;
  transition: background-color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-deep); }
.btn--line { border: 1.5px solid rgba(var(--fg-rgb), .38); color: var(--text); }
.btn--line:hover { border-color: var(--text); }
.btn--sm { width: auto; min-height: 44px; padding: 8px 16px; font-size: .92rem; }
.link { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.link:hover { color: var(--text); }

.actions { margin-top: 22px; display: grid; gap: 10px; }
.actions--top { margin-bottom: 28px; } /* va entre el vídeo y la ficha */
.block > .actions--mid { margin-top: 10px; } /* va pegado al «Míralo funcionar» de arriba: los dos botones se leen como una pareja */
.actions__note { font-size: .92rem; color: var(--text-55); text-align: center; text-wrap: balance; }

/* ---------- Secciones ---------- */
/* Cada sección es una franja de borde a borde. El color cambia de una a otra para que la página se lea por partes
   y no como un solo texto largo: arena, arena tostada, carbón y blanco roto */
.block { padding-block: 64px; }
.band { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.band--sand { --band: var(--surface-2); --text-55: rgba(var(--fg-rgb), .74); }
.band--light { --band: var(--paper); --surface: var(--bg); }
.band--light + .band--light { padding-top: 8px; } /* «Lo que te toca a ti» y «Lo que el sistema no hace» van en la misma franja */
.band--dark {
  --band: #2A2521; --text: #F4EBDD; --text-70: rgba(244, 235, 221, .8); --text-55: rgba(244, 235, 221, .66);
  --line: rgba(244, 235, 221, .16); --surface: rgba(244, 235, 221, .07); --gold-soft: var(--gold);
  color: var(--text);
}
.block > .kicker { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-soft); }
.block > .kicker + h2 { margin-top: 10px; }
.block > * + * { margin-top: 16px; }
.block > .lights + * { margin-top: 0; }
.block > h2 + * { margin-top: 20px; }
.block > p { color: var(--text-70); text-wrap: pretty; }
.block > .btn { margin-top: 22px; }

.story { border-left: 2px solid var(--gold); padding-left: 18px; display: grid; gap: 14px; font-size: 1.08rem; line-height: 1.5; }

.block > .quote { margin-top: 28px; background: var(--surface); border-radius: 14px; padding: 20px; }
.quote__by { font-size: .86rem; font-weight: 600; color: var(--gold-soft); }
.quote blockquote { margin-top: 10px; font-size: 1.14rem; line-height: 1.45; }
.quote__source { margin-top: 12px; font-size: .86rem; line-height: 1.4; color: var(--text-55); }
/* Varias citas cortas en una sola tarjeta, separadas por una línea */
.quote--list blockquote { margin-top: 0; font-size: 1.02rem; }
.quote__item:first-of-type { margin-top: 12px; }
.quote--list .quote__source { margin-top: 6px; }
.quote__item + .quote__item { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.quote__foot { margin-top: 16px; font-size: .82rem; color: var(--text-55); }

.block > .punch { margin-top: 26px; margin-bottom: 26px; font-size: clamp(1.8rem, 7.6vw, 2.5rem); line-height: .98; color: var(--gold-soft); }

.rows li, .steps li, .nots li { padding: 16px 0; border-top: 1px solid var(--line); }
.rows li:last-child, .steps li:last-child, .nots li:last-child { border-bottom: 1px solid var(--line); }
.rows b, .steps b { display: block; font-size: 1.06rem; line-height: 1.3; }
.rows span, .steps span { display: block; margin-top: 4px; color: var(--text-70); font-size: .98rem; }
.steps { counter-reset: paso; }
.steps li { counter-increment: paso; position: relative; padding-left: 40px; }
.steps li::before { content: counter(paso); position: absolute; left: 0; top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--gold-soft); }
/* Iconos de línea en dorado, dentro de una pastilla suave: ayudan a leer las listas de un vistazo */
.ico { flex: 0 0 auto; width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: rgba(214, 178, 76, .2); color: var(--gold-soft); }
.band--dark .ico { background: rgba(214, 178, 76, .14); }
.rows li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; }
.rows li > .ico { grid-row: 1 / span 2; }
.rows li > b, .rows li > span { grid-column: 2; }
.rows li > b { padding-top: 2px; }
.nots li { position: relative; padding-left: 34px; color: var(--text-70); font-size: .98rem; }
/* La señal de «no»: un círculo tachado */
.nots li::before {
  content: ""; position: absolute; left: 0; top: 18px; width: 20px; height: 20px; background: var(--gold-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* El piloto, en tres datos con icono antes del párrafo */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.facts li { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 12px; background: var(--surface); text-align: center; font-size: .9rem; font-weight: 600; line-height: 1.25; }
.nots b { color: var(--text); }

.block > .note { background: var(--surface); border-radius: 12px; padding: 16px 18px; color: var(--text); font-size: 1rem; }

.who { display: flex; align-items: center; gap: 14px; }
.who__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: var(--paper); }
.who__name { display: grid; font-size: .92rem; color: var(--text-55); line-height: 1.35; }
.who__name b { font-size: 1.08rem; color: var(--text); }

/* ---------- Dudas ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; gap: 14px; padding: 17px 0; font-weight: 600; font-size: 1.03rem; line-height: 1.35; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; margin-left: auto; width: 14px; height: 14px;
  background: linear-gradient(var(--gold-soft), var(--gold-soft)) 50% 50% / 100% 2px no-repeat, linear-gradient(var(--gold-soft), var(--gold-soft)) 50% 50% / 2px 100% no-repeat;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 28px 18px 0; color: var(--text-70); font-size: .98rem; }

/* ---------- Calendario ---------- */
.book { scroll-margin-top: 8px; }
.flow { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 22px; }
/* En el móvil la tarjeta del calendario ocupa la pantalla entera: de borde a borde y a toda la altura. El calendario empieza arriba; la confirmación, centrada */
@media (max-width: 600px) {
  html { scroll-padding-top: 0; }
  .flow { margin-inline: calc(-1 * var(--gutter)); border-inline: 0; border-radius: 0; min-height: 100vh; min-height: 100svh; padding: 18px var(--gutter) 28px; display: flex; flex-direction: column; scroll-margin-top: 0; }
  .flow .step--done { margin-block: auto; }
}
.step h3 { outline: none; }
.step__fallback { margin-top: 12px; font-size: .94rem; color: var(--text-70); overflow-wrap: anywhere; }

.calendar { position: relative; margin-top: 14px; min-height: 640px; border-radius: 10px; overflow: hidden; background: var(--paper); }
.calendar iframe { display: block; width: 100%; min-height: 640px; border: 0; }
/* Mientras se carga en segundo plano: dentro de la pantalla para que el navegador no lo deje a medias, pero invisible y sin tocarse (ver main.js) */
.calendar iframe.is-behind { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; z-index: -1; }
/* «Cargando el calendario…» tapa el recuadro hasta que Calendly avisa de que lo ha pintado: sin esto se veía una caja en blanco unos segundos */
.calendar__wait { position: absolute; inset: 0; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 14px; padding: 56px 16px; font-size: .94rem; color: var(--text-55); background: var(--paper); transition: opacity .3s var(--ease), visibility .3s; }
.calendar__wait::before { content: ""; width: 8px; height: 8px; margin-right: 28px; border-radius: 50%; background: var(--gold); box-shadow: 14px 0 0 var(--gold), 28px 0 0 var(--gold); }
.calendar.is-ready .calendar__wait { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .calendar__wait::before { animation: espera 1.2s infinite; }
  @keyframes espera {
    0%, 100% { background: var(--gold); box-shadow: 14px 0 0 rgba(214, 178, 76, .3), 28px 0 0 rgba(214, 178, 76, .3); }
    33% { background: rgba(214, 178, 76, .3); box-shadow: 14px 0 0 var(--gold), 28px 0 0 rgba(214, 178, 76, .3); }
    66% { background: rgba(214, 178, 76, .3); box-shadow: 14px 0 0 rgba(214, 178, 76, .3), 28px 0 0 var(--gold); }
  }
}

.step--done { text-align: center; padding: 18px 0 6px; }
.done__mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(214, 178, 76, .26); color: var(--gold-soft); }
.step--done p { margin-top: 10px; color: var(--text-70); overflow-wrap: anywhere; }

/* ---------- Pie ---------- */
.foot { padding-top: 22px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--text-55); display: grid; gap: 8px; }
.foot .link + .link { margin-left: 18px; }
.foot__logo { width: 104px; opacity: .92; margin-bottom: 6px; }
.foot__legal { font-size: .82rem; }

/* ---------- Barra fija de reserva ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(244, 235, 221, .96); border-top: 1px solid var(--line);
  transform: translateY(110%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s;
}
.bar.is-on { transform: none; visibility: visible; transition: transform .25s var(--ease); }
.bar p { flex: 1; min-width: 0; display: grid; font-size: .82rem; line-height: 1.3; color: var(--text-55); }
.bar p b { font-size: .95rem; color: var(--text); }

/* ---------- Cookies ---------- */
.cookies {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; max-width: 576px; margin-inline: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 20px 50px -22px rgba(var(--fg-rgb), .55);
  font-size: .9rem; line-height: 1.45;
}
.cookies__btns { margin-top: 12px; display: flex; gap: 10px; }
.cookies__btns .btn { flex: 1; }

/* ---------- Capas: la demo y la política de privacidad ---------- */
.layer { border: 0; padding: 0; background: var(--bg); color: var(--text); }
.layer::backdrop { background: rgba(42, 37, 33, .55); }
.layer--demo { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; }
.layer--demo[open] { display: flex; flex-direction: column; }
.layer__top { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--line); }
.layer__top p { flex: 1; min-width: 0; font-size: .8rem; line-height: 1.25; color: var(--text-55); text-align: center; }
.layer__frame { flex: 1; width: 100%; border: 0; background: #fff; }
.layer--text { width: min(560px, calc(100vw - 24px)); max-height: 86vh; max-height: 86dvh; border-radius: 16px; border: 1px solid var(--line); }
.legal { padding: 24px 20px; }
.legal h2 { font-size: 2rem; outline: none; }
.legal h3 { margin-top: 20px; font-size: 1rem; }
.legal p { margin-top: 6px; font-size: .94rem; color: var(--text-70); }
.legal .btn { margin-top: 24px; }
.legal .is-missing { background: rgba(165, 53, 28, .12); color: var(--warn); padding: 0 4px; border-radius: 4px; }

/* ---------- Pantallas anchas: la misma columna, con un poco más de aire ---------- */
@media (min-width: 700px) {
  .hero { padding-top: 84px; }
  .slip { padding: 24px 26px 20px; }
  .actions { grid-template-columns: 1fr 1fr; }
  .actions__note { grid-column: 1 / -1; }
  .actions--mid { grid-template-columns: 1fr; }
  .block { padding-block: 88px; }
  .vsl { margin-bottom: 72px; }
  .actions--top { margin-bottom: 32px; }
  .flow { padding: 24px 26px 28px; }
  .bar { left: 50%; right: auto; width: 600px; transform: translate(-50%, 110%); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; }
  .bar.is-on { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}