:root {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    color-scheme: dark
  }

  body {
    margin: 0
  }

  img {
    max-width: 100%
  }

  [hidden] {
    display: none !important
  }

  /* ============================================================
 CONNECT MET · PÁGINA DO LOJISTA
 Wireframe navegável · ID visual Shopping Metropolitano Barra
 ============================================================ */

  :root {
    /* marca */
    --wine: #6D3443;
    --wine-deep: #482A31;
    --wine-ink: #3D1A2E;
    --carmim: #A62C3B;
    --laranja: #D56830;
    --salmao: #E9A57D;
    --pessego: #F6CBA9;
    --pessego-2: #F1BE8D;
    --creme: #FDE1BA;

    /* superfícies e texto: identidade berinjela, única em qualquer tema */
    --surface: #231019;
    --surface-2: #2D1522;
    --card: #361B29;
    --card-2: #3F2030;
    --ink: #F8E4D2;
    --ink-soft: #DCB8A4;
    --ink-mute: #BE9585;
    --line: rgba(253, 225, 186, .18);
    --line-strong: rgba(253, 225, 186, .38);
    --shadow: 0 18px 40px -24px rgba(0, 0, 0, .7);
    --shadow-lg: 0 34px 70px -34px rgba(0, 0, 0, .8);
    --hero-a: #4A2130;
    --hero-b: #6D3443;
    --hero-ink: #FDE1BA;
    --hero-ink-soft: #EACBB4;
    --hero-line: rgba(253, 225, 186, .26);
    --eyebrow: #EB9A6F;
    --hero-scrim: rgba(40, 16, 27, .9);
    --btn-bg: #FDE1BA;
    --btn-fg: #3D1A2E;
    --hl-a: rgba(213, 104, 48, .55);
    --hl-b: rgba(166, 44, 59, .38);
    --ribbon-op: .22;
    --blob: rgba(253, 225, 186, .16);
    --glow: rgba(213, 104, 48, .42);
    --on-dark: #FDE1BA;
    --on-dark-soft: #E8BFA4;
    --focus: #D56830;

    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 28px;
    --r-pill: 999px;
    --wrap: 1200px;
    --step: clamp(14px, 1.05vw, 17px);
    color-scheme: dark;
  }

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

  body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--step);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    display: block
  }

  a {
    color: inherit
  }

  h1,
  h2,
  h3 {
    margin: 0;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -.02em;
    line-height: 1.05;
    text-wrap: balance;
    text-transform: uppercase;
  }

  h1 {
    font-size: clamp(1.9rem, 3.5vw, 3.05rem);
    font-weight: 900;
    font-stretch: 106%
  }

  h2 {
    font-size: clamp(1.7rem, 3.6vw, 3rem)
  }

  h3 {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    letter-spacing: -.01em
  }

  p {
    margin: 0
  }

  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(18px, 4vw, 40px);
  }

  .wrap-wide {
    max-width: 1480px
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--eyebrow);
  }

  .eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--eyebrow), transparent);
    border-radius: 2px;
  }

  .lead {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    color: var(--ink-soft);
    max-width: 58ch
  }

  /* ---------- mosaico (faixa quadriculada do KV) ---------- */
  .mosaic {
    height: 14px;
    width: 100%;
    flex: none;
    background: repeating-linear-gradient(90deg,
        var(--creme) 0 3.2%, var(--laranja) 3.2% 7.5%, var(--wine) 7.5% 12.4%,
        var(--carmim) 12.4% 16%, var(--wine) 16% 20.5%, var(--salmao) 20.5% 24%,
        var(--pessego) 24% 27.6%, var(--laranja) 27.6% 32%, var(--carmim) 32% 35.4%,
        var(--wine) 35.4% 41%, var(--creme) 41% 44.5%, var(--laranja) 44.5% 50%);
    background-size: 200% 100%;
    animation: mosaic-slide 38s linear infinite;
  }

  .mosaic.tall {
    height: 20px
  }

  @keyframes mosaic-slide {
    to {
      background-position: 200% 0
    }
  }

  /* ---------- botões ---------- */
  .btn {
    --bg: var(--btn-bg);
    --fg: var(--btn-fg);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-weight: 800;
    font-size: .84rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s, background-color .28s;
    box-shadow: 0 10px 24px -14px rgba(61, 26, 46, .9);
  }

  .btn span {
    position: relative;
    z-index: 1
  }

  .btn svg {
    position: relative;
    z-index: 1;
    flex: none
  }

  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
    transform: translateX(-120%);
  }

  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -16px rgba(61, 26, 46, .8)
  }

  .btn:hover::after {
    transform: translateX(120%);
    transition: transform .7s ease
  }

  .btn:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px
  }

  .btn-accent {
    --bg: var(--carmim);
    --fg: #FFF3E7
  }

  .btn-accent:hover {
    background: var(--laranja)
  }

  .btn-ghost {
    --bg: transparent;
    --fg: var(--ink);
    border: 2px solid var(--line-strong);
    box-shadow: none;
    padding: 13px 26px;
  }

  .hero .btn-ghost,
  .help .btn-ghost {
    --fg: var(--hero-ink);
    border-color: var(--hero-line)
  }

  .hero .btn-ghost:hover,
  .help .btn-ghost:hover {
    background: color-mix(in srgb, var(--hero-ink) 10%, transparent)
  }

  .btn-ghost:hover {
    background: rgba(253, 225, 186, .08);
    box-shadow: none
  }

  .btn-light {
    --bg: var(--creme);
    --fg: var(--wine-ink)
  }

  .btn-lg {
    padding: 18px 38px;
    font-size: .9rem
  }

  /* ---------- header ---------- */
  .site-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 60;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s, background-color .3s;
  }

  .site-header.stuck {
    border-bottom-color: var(--line);
    box-shadow: 0 10px 30px -26px rgba(61, 26, 46, .9)
  }

  .header-in {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-block: 14px;
    transition: padding .3s
  }

  .site-header.stuck .header-in {
    padding-block: 9px
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex: none
  }

  .brand img {
    height: 30px;
    width: auto;
    transition: height .3s
  }

  .site-header.stuck .brand img {
    height: 25px
  }

  .brand-sep {
    width: 1px;
    height: 26px;
    background: var(--line-strong)
  }

  .brand-tag {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-mute);
    line-height: 1.3;
    max-width: 88px;
  }

  .site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px
  }

  .site-nav a {
    position: relative;
    padding: 9px 13px;
    border-radius: var(--r-pill);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .2s, background-color .2s;
  }

  .site-nav a::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--laranja);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
  }

  .site-nav a:hover {
    color: var(--creme)
  }

  .site-nav a:hover::after,
  .site-nav a.active::after {
    transform: scaleX(1)
  }

  .header-cta {
    margin-left: 6px
  }

  .header-cta .lbl-short {
    display: none
  }

  @media (max-width:640px) {
    .header-cta .lbl-long {
      display: none
    }

    .header-cta .lbl-short {
      display: inline
    }
  }

  @media (max-width:900px) {
    .site-nav {
      display: none
    }
  }

  @media (max-width:520px) {
    .header-cta {
      padding: 12px 18px;
      font-size: .72rem
    }

    .brand-sep,
    .brand-tag {
      display: none
    }
  }

  /* ---------- hero ---------- */
  .hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(120% 90% at 78% 8%, rgba(255, 255, 255, .34), transparent 55%),
      linear-gradient(118deg, var(--hero-a) 0%, var(--hero-b) 62%, var(--salmao) 100%);
  }

  .hero-ribbons {
    position: absolute;
    inset: -6% -4%;
    z-index: 0;
    pointer-events: none;
    opacity: var(--ribbon-op)
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(135% 125% at 2% 46%, var(--hero-scrim) 0 34%, transparent 74%);
  }

  @media (max-width:1080px) {
    .hero::before {
      background: linear-gradient(180deg, var(--hero-scrim) 0 44%, transparent 82%)
    }
  }

  .hero-ribbons path {
    fill: none;
    stroke: var(--creme);
    stroke-opacity: .55;
    stroke-linecap: round
  }

  .rb1 {
    animation: drift1 22s ease-in-out infinite alternate
  }

  .rb2 {
    animation: drift2 27s ease-in-out infinite alternate
  }

  .rb3 {
    animation: drift3 19s ease-in-out infinite alternate
  }

  @keyframes drift1 {
    from {
      transform: translate3d(0, 0, 0)
    }

    to {
      transform: translate3d(24px, -18px, 0)
    }
  }

  @keyframes drift2 {
    from {
      transform: translate3d(0, 0, 0)
    }

    to {
      transform: translate3d(-30px, 16px, 0)
    }
  }

  @keyframes drift3 {
    from {
      transform: translate3d(0, 0, 0) rotate(0deg)
    }

    to {
      transform: translate3d(14px, 22px, 0) rotate(1.4deg)
    }
  }

  .hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: end;
    gap: 20px;
    padding-block: clamp(28px, 3.4vw, 46px) 0;
  }

  .hero-copy {
    padding-bottom: clamp(36px, 4vw, 60px);
    max-width: 680px
  }

  .hero-copy>*+* {
    margin-top: 20px
  }

  .hero h1 {
    color: var(--hero-ink);
    line-height: 1;
    letter-spacing: -.025em
  }

  .hero h1 .hl {
    display: inline-block;
    position: relative;
  }

  .hero h1 .hl::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: .06em;
    height: .26em;
    z-index: -1;
    background: linear-gradient(90deg, var(--hl-a), var(--hl-b));
    border-radius: 4px;
  }

  @keyframes hl-in {
    to {
      transform: scaleX(1)
    }
  }

  .hero .lead {
    color: var(--hero-ink-soft);
    max-width: 50ch;
    font-weight: 500
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center
  }

  .hero-figure {
    position: relative;
    align-self: end;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .hero-figure img {
    position: relative;
    z-index: 2;
    /* nunca maior que a tela: a pessoa aparece inteira em qualquer altura de janela */
    width: auto;
    height: auto;
    max-width: min(100%, 520px);
    max-height: min(600px, 66vh);
    margin-inline: auto;
    filter: drop-shadow(0 40px 50px rgba(61, 26, 46, .28));
    animation: float-y 7s ease-in-out infinite alternate;
  }

  @keyframes float-y {
    from {
      transform: translateY(0)
    }

    to {
      transform: translateY(-14px)
    }
  }

  .hero-blob {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(560px, 94%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, var(--blob), transparent 62%);
  }

  @media (max-width:1080px) {
    .hero-grid {
      grid-template-columns: 1fr;
      gap: 0
    }

    .hero-copy {
      padding-bottom: 26px;
      max-width: none
    }

    .hero-figure {
      margin-top: 8px
    }

    .hero-figure img {
      max-width: min(100%, 380px);
      max-height: min(520px, 58vh)
    }
  }

  @media (max-width:560px) {
    .hero-figure img {
      max-width: min(100%, 300px);
      max-height: min(440px, 52vh)
    }
  }

  /* ---------- seções ---------- */
  .section {
    padding-block: clamp(56px, 7vw, 104px);
    position: relative
  }

  .section-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
    margin-bottom: clamp(30px, 4vw, 52px)
  }

  .section-head.center {
    margin-inline: auto;
    text-align: center;
    align-items: center
  }

  .section-head.center .lead {
    margin-inline: auto
  }

  .sec-cream {
    background: var(--surface-2)
  }

  .sec-dark {
    background: var(--wine-ink);
    color: var(--on-dark)
  }

  .sec-dark h2,
  .sec-dark h3 {
    color: var(--creme)
  }

  .sec-dark .lead {
    color: var(--on-dark-soft)
  }


  /* ---------- vídeo ---------- */
  .video-shell {
    position: relative;
    max-width: 940px;
    margin-inline: auto;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(253, 225, 186, .22);
    background: #2A1220;
  }

  .video-shell::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 0;
    background: conic-gradient(from 180deg, var(--laranja), var(--carmim), var(--wine), var(--creme), var(--laranja));
    opacity: .5;
    filter: blur(18px);
  }

  .video-frame {
    position: relative;
    z-index: 1;
    aspect-ratio: 16/9;
    width: 100%;
    max-width: 100%;
    background: #1B0B14
  }

  .video-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2, .8, .3, 1), filter .5s
  }

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

  .video-btn {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 0;
    background: linear-gradient(180deg, rgba(43, 16, 28, .15), rgba(43, 16, 28, .55));
    cursor: pointer;
    padding: 0;
  }

  .video-btn:hover~img,
  .video-btn:focus-visible~img {
    transform: scale(1.05)
  }

  .play {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(68px, 8vw, 92px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--carmim);
    color: var(--creme);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7);
    transition: transform .3s, background-color .3s;
  }

  .video-btn:hover .play {
    transform: scale(1.08);
    background: var(--laranja)
  }

  .play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--creme);
    opacity: .65;
    animation: pulse-ring 2.6s ease-out infinite;
  }

  @keyframes pulse-ring {
    0% {
      transform: scale(1);
      opacity: .6
    }

    70% {
      transform: scale(1.55);
      opacity: 0
    }

    100% {
      opacity: 0
    }
  }

  .video-fallback {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(43, 16, 28, .72), rgba(43, 16, 28, .88));
    color: var(--creme);
  }

  .video-fallback p {
    font-size: .88rem;
    max-width: 42ch;
    color: var(--on-dark-soft)
  }

  /* ---------- benefícios ---------- */
  .benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 18px
  }

  @media (min-width:1080px) {
    .benefits {
      grid-template-columns: repeat(5, 1fr);
      gap: 16px
    }
  }

  .bcard {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 28px;
    border-radius: var(--r-md);
    background: linear-gradient(168deg, var(--creme) 0%, var(--pessego) 100%);
    color: var(--wine-ink);
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .75);
    transition: box-shadow .35s;
  }

  .bcard::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--laranja), var(--carmim));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.2, .8, .3, 1);
  }

  .bcard:hover::before {
    opacity: 1
  }

  .bcard h3 {
    color: var(--wine-ink)
  }

  .bcard p {
    font-size: .92rem;
    color: var(--wine)
  }

  .bcard .tagline {
    margin-top: auto;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--carmim);
  }

  .bcard .fill {
    border-bottom-color: var(--carmim)
  }

  .bico {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(166, 44, 59, .14);
    color: var(--carmim);
    transition: transform .45s cubic-bezier(.2, .8, .3, 1), background-color .35s, color .35s;
  }

  .bcard:hover .bico {
    background: var(--carmim);
    color: var(--creme)
  }

  /* ---------- passos ---------- */
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 22px;
    counter-reset: s
  }

  .step {
    position: relative;
    padding-top: 38px
  }

  .step::before {
    counter-increment: s;
    content: counter(s, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2.6rem;
    font-weight: 900;
    font-stretch: 125%;
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--line-strong);
    font-variant-numeric: tabular-nums;
  }

  .step p {
    font-size: 1rem;
    color: var(--ink);
    max-width: 30ch
  }

  .step .rail {
    position: absolute;
    top: 16px;
    left: 76px;
    right: -22px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 7px, transparent 7px 14px);
  }

  .step:nth-child(3n) .rail {
    display: none
  }

  @media (max-width:900px) {
    .steps {
      grid-template-columns: repeat(2, 1fr)
    }

    .step:nth-child(3n) .rail {
      display: block
    }

    .step:nth-child(2n) .rail {
      display: none
    }
  }

  @media (max-width:560px) {
    .steps {
      grid-template-columns: 1fr;
      gap: 20px
    }

    .step .rail {
      display: none
    }

    .step {
      padding-top: 34px
    }
  }

  /* ---------- dúvidas ---------- */
  .help {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    justify-content: space-between;
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--r-lg);
    background: linear-gradient(118deg, var(--hero-a), var(--hero-b));
    position: relative;
    overflow: hidden;
  }

  .help::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 26px solid var(--blob);
  }

  .help-copy {
    position: relative;
    z-index: 1;
    max-width: 44ch
  }

  .help-copy h2 {
    color: var(--hero-ink)
  }

  .help-copy p {
    color: var(--hero-ink-soft);
    margin-top: 10px
  }

  .help-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
    max-width: 100%
  }

  .mailto {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: clamp(.85rem, 1.4vw, 1.02rem);
    color: var(--hero-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--hero-line);
    padding-bottom: 3px;
    transition: border-color .25s, gap .25s;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  .mailto svg {
    flex: none
  }

  .mailto:hover {
    border-color: var(--carmim);
    gap: 14px
  }

  /* ---------- rodapé ---------- */
  .site-footer {
    background: var(--wine-deep);
    color: var(--on-dark)
  }

  .footer-in {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    gap: 34px;
    padding-block: clamp(40px, 5vw, 62px)
  }

  .footer-in img.f-logo {
    height: 34px;
    width: auto
  }

  .footer-in img.f-met {
    height: 86px;
    width: auto;
    margin-top: 24px;
    opacity: .96
  }

  .fcol h3 {
    font-size: .72rem;
    letter-spacing: .18em;
    color: var(--salmao);
    margin-bottom: 14px
  }

  .fcol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px
  }

  .fcol a {
    font-size: .88rem;
    color: var(--on-dark-soft);
    text-decoration: none;
    transition: color .2s, padding-left .2s
  }

  .fcol a:hover {
    color: var(--creme);
    padding-left: 5px
  }

  .socials {
    display: flex;
    gap: 10px;
    margin-top: 6px
  }

  .socials a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(253, 225, 186, .12);
    color: var(--creme);
    transition: background-color .25s, transform .25s
  }

  .socials a:hover {
    background: var(--carmim);
    transform: translateY(-3px)
  }

  .legal {
    border-top: 1px solid rgba(253, 225, 186, .16);
    padding-block: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: space-between;
    font-size: .74rem;
    color: rgba(232, 191, 164, .8);
  }

  @media (max-width:760px) {
    .footer-in {
      grid-template-columns: 1fr 1fr
    }

    .footer-in .fbrand {
      grid-column: 1/-1
    }
  }

  /* ---------- barra fixa mobile ---------- */
  .mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: none;
    gap: 10px;
    align-items: center;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.2, .8, .3, 1);
  }

  .mobile-cta.show {
    transform: translateY(0)
  }

  .mobile-cta .btn {
    flex: 1
  }

  .mobile-cta small {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute)
  }

  @media (max-width:720px) {
    .mobile-cta {
      display: flex
    }

    body {
      padding-bottom: 0
    }
  }

  @media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important
    }

    .hero h1 .hl::after {
      transform: scaleX(1)
    }
  }