:root {
      color-scheme: light;
      --navy-950: #000324;
      --navy-900: #00043f;
      --blue-800: #00065b;
      --blue-700: #09177c;
      --blue-100: #e7ebff;
      --ink: #121630;
      --muted: #5d647d;
      --line: #dfe3f0;
      --surface: #fff;
      --shadow: 0 28px 70px rgba(0, 3, 36, .28);
      --radius: 28px;

      /* Componente: card de catálogo */
      --catalog-card-min: 280px;
      --catalog-card-max: 330px;
      --catalog-card-radius: 28px;
      --catalog-cover-height: clamp(255px, 68vw, 280px);
      --catalog-panel-inset: 16px;
      --catalog-panel-radius: 24px;
      --catalog-panel-bg: rgba(244, 246, 255, .82);
      --catalog-panel-blur: 16px;
      --catalog-card-gap: 16px;
      --catalog-action-bg: #07128a;
      --catalog-action-color: #fff;
      --catalog-cta-bg: #f8f9fd;
      --catalog-cta-color: #07128a;
      --catalog-cta-shadow: 0 0 0 2px rgba(105, 181, 255, .58), 0 8px 22px rgba(0, 3, 36, .28);
      --catalog-motion-scale: 1.065;
      --catalog-motion-shift: 7px;
      --catalog-motion-duration: 520ms;
      --catalog-light-color: rgba(126, 215, 255, .34);
    }

    * { box-sizing: border-box; }

    html { min-height: 100%; background: var(--navy-950); }

    body {
      min-height: 100svh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: clamp(24px, 5vw, 64px) 18px;
      color: var(--ink);
      font-family: Inter, "Segoe UI", Arial, sans-serif;
      background:
        radial-gradient(circle at 15% 10%, rgba(62, 83, 203, .3), transparent 34%),
        radial-gradient(circle at 88% 86%, rgba(18, 34, 135, .28), transparent 32%),
        linear-gradient(145deg, var(--navy-950), var(--blue-800));
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .2;
      background-image: url("../img/brand/pattern-diamond.jpg");
      background-size: 560px auto;
      mix-blend-mode: soft-light;
    }

    .hub {

      width: min(100%, 1180px);
      position: relative;
      z-index: 1;
    }

    .catalog-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--catalog-card-min)), var(--catalog-card-max)));
      justify-content: center;
      align-items: start;
      gap: clamp(18px, 2.5vw, 28px);
    }

    .brand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
      margin: 0 auto 24px;
      color: #fff;
      opacity: 0;
      transform: translateY(-10px);
      animation: enter .55s cubic-bezier(.2,.8,.2,1) .05s forwards;
    }

    .brand img {
      width: 46px;
      height: 46px;
      object-fit: contain;
      filter:none;
    }

    .brand-copy { display: grid; line-height: 1; text-align: left; }
    .brand-copy strong { font-size: 25px; letter-spacing: -.045em; }
    .brand-copy span {
      margin-top: 6px;
      color: #c9d2f3;
      font-size: 8px;
      font-weight: 750;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .catalog-card {
      width: 100%;
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: var(--radius);
      background-color: var(--blue-800);
      background-image: linear-gradient(rgba(0,6,91,.38), rgba(0,3,36,.54)), url("../img/banners/capa-catalogo.jpg");
      background-position: center top;
      background-size: 100% auto;
      background-repeat: no-repeat;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(22px) scale(.985);
      animation: enter .68s cubic-bezier(.2,.8,.2,1) .12s forwards;
    }

    .cover {
      position: relative;
      height: clamp(170px, 22vw, 205px);
      overflow: hidden;
      background: var(--blue-800);
    }

    .cover::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 34%;
      pointer-events: none;
      background: linear-gradient(transparent, rgba(0,3,36,.22));
    }

    .cover img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center top;
      transition: transform .7s cubic-bezier(.2,.8,.2,1);
    }

    .catalog-card:hover .cover img { transform: scale(1.018); }

    .share {
      position: absolute;
      z-index: 2;
      top: 18px;
      right: 18px;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(255,255,255,.62);
      border-radius: 50%;
      color: var(--blue-800);
      background: rgba(255,255,255,.94);
      box-shadow: 0 8px 24px rgba(0,3,36,.2);
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .share:hover {
      transform: translateY(-2px) rotate(-4deg);
      background: #fff;
      box-shadow: 0 12px 28px rgba(0,3,36,.28);
    }

    .share:active { transform: scale(.94); }
    .share svg { width: 21px; height: 21px; }

    .content { padding: clamp(18px, 4vw, 22px); background: rgba(255,255,255,.96); backdrop-filter: blur(3px); }

    .eyebrow {
      margin: 0 0 7px;
      color: var(--blue-700);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      color: var(--blue-800);
      font-size: clamp(23px, 5vw, 27px);
      line-height: 1.05;
      letter-spacing: -.035em;
    }

    .description {
      max-width: 46ch;
      margin: 12px 0 22px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.62;
    }

    .internal {
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    .internal h2 {
      margin: 0 0 13px;
      color: var(--ink);
      font-size: 14px;
      letter-spacing: -.01em;
    }

    .internal-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .internal-link,
    .catalog-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 48px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 750;
      text-decoration: none;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .internal-link {
      color: var(--blue-800);
      border: 1px solid #cfd5ea;
      background: #f8f9fd;
    }

    .internal-link:hover {
      transform: translateY(-2px);
      border-color: #aeb8dc;
      background: var(--blue-100);
      box-shadow: 0 8px 18px rgba(0,6,91,.1);
    }

    .internal-link svg,
    .catalog-link svg { width: 18px; height: 18px; }

    .card-footer {
      padding: 0 clamp(18px, 4vw, 22px) clamp(18px, 4vw, 22px);
      background: rgba(255,255,255,.96);
    }

    .catalog-link {
      width: 100%;
      min-height: 54px;
      color: #fff;
      background: var(--blue-800);
      box-shadow: 0 12px 24px rgba(0,6,91,.22);
    }

    .catalog-link:hover {
      transform: translateY(-2px);
      background: var(--blue-700);
      box-shadow: 0 16px 30px rgba(0,6,91,.28);
    }

    .toast {
      position: fixed;
      z-index: 5;
      left: 50%;
      bottom: max(24px, env(safe-area-inset-bottom));
      padding: 11px 16px;
      border-radius: 999px;
      color: #fff;
      background: rgba(0,3,36,.92);
      box-shadow: 0 10px 30px rgba(0,0,0,.24);
      font-size: 13px;
      font-weight: 700;
      opacity: 0;
      transform: translate(-50%, 12px);
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease;
    }

    .toast.visible { opacity: 1; transform: translate(-50%, 0); }

    .site-footer {
      width: min(100%, 760px);
      position: relative;
      z-index: 1;
      margin: 30px auto 0;
      color: #cdd7f7;
      text-align: center;
      opacity: 0;
      transform: translateY(14px);
      animation: enter .55s cubic-bezier(.2,.8,.2,1) .28s forwards;
    }
    .footer-address { margin: 0 0 17px; font-size: 12px; line-height: 1.6; }
    .footer-address a, .footer-legal a, .footer-credit a { color: #fff; text-decoration: none; }
    .footer-social { display: flex; justify-content: center; gap: 8px; margin-bottom: 17px; }
    .footer-social a {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.26);
      border-radius: 12px;
      background: rgba(255,255,255,.08);
      transition: transform .18s ease, background .18s ease;
    }
    .footer-social a:hover { transform: translateY(-2px); background: rgba(255,255,255,.15); }
    .footer-social svg { width: 18px; height: 18px; }
    .footer-copy, .footer-legal, .footer-credit {
      margin: 7px 0 0;
      color: #aebbe9;
      font-size: 11px;
      line-height: 1.55;
    }
    .footer-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
    .footer-credit { padding-top: 12px; margin-top: 13px; border-top: 1px solid rgba(255,255,255,.14); }
    :focus-visible {
      outline: 3px solid #8fa5ff;
      outline-offset: 3px;
    }

    @keyframes enter {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Alinhado ao sistema visual do LeadScan */
    .internal-link, .catalog-link {
      min-height: 48px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      box-shadow: none;
    }
    .internal-link {
      color: var(--blue-800);
      border: 1.5px solid #c8d0e8;
      background: transparent;
    }
    .internal-link:hover { background: #f1f4ff; box-shadow: none; }
    .catalog-link {
      min-height: 50px;
      background: var(--blue-800);
      box-shadow: 0 9px 18px rgba(0,6,91,.18);
    }
    .content { padding-bottom: 20px; }
    .description { margin: 12px 0 22px; font-size: 14px; }
    .internal { padding-top: 19px; }
    .card-footer { padding-top: 0; }

    /* ---------- CARD DE CATÁLOGO ---------- */
    .catalog-card {
      border-radius: var(--catalog-card-radius);
      padding-bottom: var(--catalog-card-gap);
      background-color: var(--blue-800);
      background-image:
        linear-gradient(180deg, rgba(0,6,91,.04) 28%, rgba(0,3,36,.78) 100%),
        url("../img/banners/capa-catalogo.jpg");
      background-position: center top;
      background-size: 100% auto;
    }

    .cover {
      height: var(--catalog-cover-height);
      border-radius: var(--catalog-card-radius) var(--catalog-card-radius) 0 0;
      background-color: var(--blue-800);
    }

    .cover::after {
      height: 42%;
      background: linear-gradient(transparent, rgba(0,3,36,.32));
    }

    .cover img { object-position: center top; }

    .catalog-card {
      --catalog-pointer-x: 50%;
      --catalog-pointer-y: 38%;
      --catalog-shift-x: 0px;
      --catalog-shift-y: 0px;
    }

    .cover::before {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      background:
        radial-gradient(circle at var(--catalog-pointer-x) var(--catalog-pointer-y), var(--catalog-light-color) 0, rgba(126,215,255,.12) 22%, transparent 52%),
        linear-gradient(112deg, transparent 26%, rgba(255,255,255,.18) 46%, transparent 66%);
      mix-blend-mode: screen;
      transform: translate3d(-3%, 0, 0);
      transition: opacity 280ms ease, transform var(--catalog-motion-duration) cubic-bezier(.2,.8,.2,1);
    }

    .cover::after { z-index: 1; }

    .cover img {
      position: relative;
      z-index: 0;
      transform: translate3d(var(--catalog-shift-x), var(--catalog-shift-y), 0) scale(1.025);
      filter: saturate(1) brightness(1);
      will-change: transform, filter;
      transition:
        transform var(--catalog-motion-duration) cubic-bezier(.2,.8,.2,1),
        filter 360ms ease;
    }

    .catalog-card:hover .cover::before,
    .catalog-card.is-interacting .cover::before {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .catalog-card:hover .cover img,
    .catalog-card.is-interacting .cover img {
      transform: translate3d(var(--catalog-shift-x), var(--catalog-shift-y), 0) scale(var(--catalog-motion-scale));
      filter: saturate(1.08) brightness(1.035);
    }

    .share { z-index: 3; }


    .content {
      position: relative;
      z-index: 2;
      margin: -14px var(--catalog-panel-inset) 0;
      padding: 18px 22px 14px;
      border: 1px solid rgba(255,255,255,.46);
      border-radius: var(--catalog-panel-radius);
      color: var(--ink);
      background: var(--catalog-panel-bg);
      box-shadow: 0 14px 28px rgba(0,3,36,.22);
      backdrop-filter: blur(var(--catalog-panel-blur));
      -webkit-backdrop-filter: blur(var(--catalog-panel-blur));
    }

    .content h1 {
      color: var(--catalog-action-bg);
      font-size: 21px;
      line-height: 1.12;
    }

    .description {
      margin: 10px 0 0;
      color: #1a2459;
      font-size: 14px;
      line-height: 1.45;
    }

    .internal {
      padding-top: 14px;
      border-top-color: rgba(7,18,138,.14);
    }

    .internal h2 {
      margin-bottom: 12px;
      font-size: 13px;
    }

    .internal-actions { gap: 10px; }

    .internal-link {
      min-width: 0;
      min-height: 40px;
      padding: 9px 12px;
      color: var(--catalog-action-color);
      border: 1px solid transparent;
      background: var(--catalog-action-bg);
      font-size: 12px;
      white-space: nowrap;
    }

    .internal-link:hover {
      color: #fff;
      border-color: rgba(255,255,255,.28);
      background: var(--blue-700);
      box-shadow: 0 8px 18px rgba(0,6,91,.2);
    }

    .internal-link svg { width: 17px; height: 17px; flex: 0 0 17px; }

    .card-footer {
      position: relative;
      z-index: 2;
      padding: 12px 22px 0;
      background: transparent;
    }

    .catalog-link {
      min-height: 50px;
      color: var(--catalog-cta-color);
      border: 1px solid rgba(255,255,255,.88);
      background: var(--catalog-cta-bg);
      box-shadow: var(--catalog-cta-shadow);
    }

    .catalog-link:hover {
      color: #fff;
      border-color: rgba(255,255,255,.76);
      background: var(--catalog-action-bg);
      box-shadow: 0 0 0 2px rgba(105,181,255,.48), 0 12px 26px rgba(0,3,36,.34);
    }
    .scan-login-footer.site-footer {
      width: min(100%, 400px);
      max-width: none;
      margin: 28px auto 0;
      padding: 24px 0 8px;
      border-top: 1px solid rgba(255,255,255,.14);
      color: #aebbe9;
      text-align: center;
    }
    .scan-login-footer .footer-address {
      margin-bottom: 16px;
      color: #cdd7f7;
      font-size: 12px;
      line-height: 1.6;
      text-align: center;
    }
    .scan-login-footer .footer-address a { color: #9fc1ff; }
    .scan-login-footer .footer-social { gap: 8px; margin-bottom: 14px; }
    .scan-login-footer .footer-social a {
      width: 38px;
      height: 38px;
      color: #dbe4ff;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 50%;
      background: rgba(255,255,255,.06);
    }
    .scan-login-footer .footer-social a:hover { background: rgba(255,255,255,.14); }
    .scan-login-footer .footer-social svg { width: 18px; height: 18px; }
    .scan-login-footer .footer-copy,
    .scan-login-footer .footer-legal { margin-top: 7px; color: #aebbe9; font-size: 11.5px; }
    .scan-login-footer .footer-legal a { color: #bfcaf0; }
    .scan-login-footer .footer-credit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,.14);
      color: #93a2d7;
      font-size: 11.5px;
    }
    .scan-login-footer .footer-credit-line {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .scan-login-footer .footer-credit a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #dbe4ff;
      font-weight: 600;
      text-decoration: none;
    }
    .scan-login-footer .footer-credit img {
      width: auto;
      height: 20px;
      filter:none;
      opacity: .9;
    }
    @media (max-width: 420px) {
      body { padding-inline: 12px; }
      .hub { padding-inline: 8px; }
      .brand { margin-bottom: 18px; }
      .brand img { width: 42px; height: 42px; }
      .brand-copy strong { font-size: 23px; }
      .catalog-card { border-radius: var(--catalog-card-radius); }
      .share { top: 12px; right: 12px; width: 44px; height: 44px; }
      .content { padding-bottom: 22px; }
      .card-footer { padding-top: var(--catalog-card-gap); }
    }

    @media (prefers-reduced-motion: reduce) {
      .catalog-card {
        --catalog-shift-x: 0px !important;
        --catalog-shift-y: 0px !important;
      }
      .cover::before { display: none; }
      .cover img,
      .catalog-card:hover .cover img,
      .catalog-card.is-interacting .cover img {
        transform: none !important;
        filter: none !important;
      }
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }
/* Celulares reais: a altura variável do card não deve ampliar a arte de fundo. */
@media (hover: none), (pointer: coarse) {
  .catalog-card {
    background-size: 100% auto;
    background-position: center top;
  }
  .cover img,
  .catalog-card:hover .cover img,
  .catalog-card.is-interacting .cover img {
    transform: none;
    filter: none;
    will-change: auto;
  }
  .cover::before { display: none; }
}
/* Proporção compacta de app para smartphones. */
@media (max-width: 520px) {
  :root {
    --catalog-card-min: 270px;
    --catalog-card-max: 302px;
    --catalog-card-radius: 24px;
    --catalog-cover-height: 238px;
    --catalog-panel-inset: 13px;
    --catalog-panel-radius: 21px;
    --catalog-card-gap: 13px;
  }
  body { padding-inline: 14px; }
  .hub { padding-inline: 0; }
  .catalog-grid { grid-template-columns: minmax(270px, 302px); }
  .catalog-card { width: min(100%, 302px); justify-self: center; }
  .brand { margin-bottom: 18px; }
  .brand img { width: 40px; height: 40px; }
  .brand-copy strong { font-size: 22px; }
  .share { top: 12px; right: 12px; width: 42px; height: 42px; }
  .share svg { width: 20px; height: 20px; }
  .content { margin-top: -12px; padding: 15px 17px 13px; }
  .content h1 { font-size: 19px; }
  .description { margin: 8px 0 0; font-size: 13px; line-height: 1.4; }
  .internal { padding-top: 12px; }
  .internal h2 { margin-bottom: 10px; font-size: 12px; }
  .internal-actions { gap: 9px; }
  .internal-link { min-height: 42px; padding-inline: 10px; font-size: 12px; }
  .internal-link svg { width: 17px; height: 17px; }
  .card-footer { padding: 10px var(--catalog-panel-inset) 0; }
  .catalog-link { min-height: 46px; font-size: 13px; }
}

@media (max-width: 340px) {
  :root { --catalog-card-min: 258px; --catalog-card-max: 282px; --catalog-cover-height: 222px; }
  .catalog-grid { grid-template-columns: minmax(258px, 282px); }
  .catalog-card { width: min(100%, 282px); }
}

/* ---------- HUB · VITRINE RESPONSIVA DE CATÁLOGOS ---------- */
body{
  display:block;
  padding:clamp(22px,3.5vw,54px) 0;
  overflow-x:hidden;
}
.hub{width:min(100%,1520px);margin:0 auto;}
.hub-header{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 clamp(18px,4vw,54px);margin-bottom:clamp(42px,7vw,82px);
}
.hub-header .brand{justify-content:flex-start;margin:0;}
.hub-install{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#dbe4ff;background:rgba(255,255,255,.07);
  font-size:12px;font-weight:700;text-decoration:none;transition:background .18s ease,transform .18s ease,border-color .18s ease;
}
.hub-install svg{width:17px;height:17px;}
.hub-install:hover{transform:translateY(-1px);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);}
.catalog-showcase{width:100%;}
.showcase-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  padding:0 clamp(18px,4vw,54px);margin-bottom:28px;color:#fff;
}
.showcase-head p{margin:0 0 10px;color:#9fc1ff;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;}
.showcase-title{max-width:680px;margin:0;color:#fff;font-size:clamp(26px,2.8vw,40px);line-height:1.08;letter-spacing:-.035em;}
.carousel-controls{display:flex;gap:9px;flex:0 0 auto;}
.carousel-controls button{
  width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.25);
  border-radius:50%;color:var(--blue-800);background:#fff;cursor:pointer;transition:opacity .18s ease,transform .18s ease;
}
.carousel-controls button:hover:not(:disabled){transform:translateY(-2px);}
.carousel-controls button:disabled{opacity:.28;cursor:default;}
.carousel-controls button[hidden]{display:none!important;}
.carousel-controls svg{width:20px;height:20px;}
.catalog-carousel{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-inline:contain;}
.catalog-carousel::-webkit-scrollbar{display:none;}
.catalog-carousel.is-single{overflow:visible;scroll-snap-type:none;scroll-behavior:auto;overscroll-behavior:auto;}
.catalog-grid{
  width:max-content;min-width:100%;display:flex;align-items:flex-start;justify-content:flex-start;
  gap:clamp(18px,2.2vw,30px);padding:4px clamp(18px,4vw,54px) 24px;
}
.catalog-grid.is-single{justify-content:center;}
.catalog-card{flex:0 0 var(--catalog-card-max);width:var(--catalog-card-max);scroll-snap-align:center;}
.scan-login-footer.site-footer{
  width:min(100%,1520px);max-width:1520px;margin:clamp(44px,7vw,88px) auto 0;
  padding:28px clamp(18px,4vw,54px) 8px;
}
.scan-login-footer .footer-address,
.scan-login-footer .footer-social,
.scan-login-footer .footer-copy,
.scan-login-footer .footer-legal,
.scan-login-footer .footer-credit{max-width:760px;margin-left:auto;margin-right:auto;}
.scan-login-footer .footer-credit{
  width:calc(100% + 2 * clamp(18px,4vw,54px));max-width:none;
  margin-left:calc(-1 * clamp(18px,4vw,54px));margin-right:calc(-1 * clamp(18px,4vw,54px));
  box-sizing:border-box;text-align:center;
}
.scan-login-footer .footer-credit-line{width:100%;justify-content:center;text-align:center;}

@media (max-width:767px){
  .hub-header{margin-bottom:42px;}
  .hub-install{width:40px;padding:0;justify-content:center;}
  .hub-install span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .showcase-head{align-items:flex-start;margin-bottom:22px;}
  .showcase-title{width:100%;max-width:none;font-size:clamp(23px,6.5vw,26px);line-height:1.08;}
  .carousel-controls{display:none;}
  .catalog-grid{padding-inline:max(18px,calc((100vw - var(--catalog-card-max))/2));}
  .catalog-grid.is-single{justify-content:flex-start;}
  .scan-login-footer.site-footer{width:min(100%,400px);max-width:400px;padding:24px 0 8px;}
  .scan-login-footer .footer-credit{width:100%;max-width:400px;margin-left:auto;margin-right:auto;}
}
/* Enquadramento mobile: card mais estreito e janela vertical maior para a capa. */
@media (max-width: 520px) {
  :root {
    --catalog-card-min: 264px;
    --catalog-card-max: 288px;
    --catalog-cover-height: 268px;
  }
  .catalog-grid { grid-template-columns: minmax(264px, 288px); }
  .catalog-card { width: min(100%, 288px); }
  /* A capa original é vertical (343x593). No Chrome móvel, object-fit: cover
     pode recalcular o recorte pela altura e ampliar demais a arte. Escalar
     explicitamente pela largura mantém o mesmo enquadramento do desktop. */
  .cover img,
  .catalog-card:hover .cover img,
  .catalog-card.is-interacting .cover img {
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: initial;
    object-position: center top;
    transform: none !important;
  }
}
@media (max-width: 340px) {
  :root { --catalog-card-min: 252px; --catalog-card-max: 274px; --catalog-cover-height: 254px; }
  .catalog-grid { grid-template-columns: minmax(252px, 274px); }
  .catalog-card { width:min(100%,274px); }
}