/* ==========================================================================
   Doctor Mouse · home.css (só a home; depende dos tokens e componentes do style.css)
   Port de site/assets/css/pages/home.css (iterações 09 e 10 do demo):
   hero sangrado sob o header transparente, banners de campanha com 8 px de vão e sem cantos,
   categorias em ladrilhos altos, vitrines e faixa "Marcas oficiais" no padrão SCUF.
   ========================================================================== */

/* ---------- 1ª dobra (fundo escuro) ---------- */
.home-top { padding-block: 0 var(--space-8); }
.home-top--plain { padding-top: var(--space-2); }
.home-top__grid { padding-top: var(--space-8); }
@media (min-width: 1024px) {
  .home-top { padding-bottom: var(--space-12); }
  .home-top__grid { padding-top: var(--space-12); }
}

/* ---------- Hero sangrado ----------
   Largura total, sem cantos nem contorno, por baixo do header transparente (html.hdr-over).
   Gradiente no topo para o menu branco ficar legível; texto no pé. Mobile usa o recorte alto. */
.home-hero { position: relative; height: var(--home-hero-h); min-height: 460px; overflow: hidden; isolation: isolate; background: var(--ink-950); color: #fff; }
.home-hero__media { position: absolute; inset: 0; z-index: -1; }
.home-hero__media picture,
.home-hero__media img,
.home-hero__media video { display: block; width: 100%; height: 100%; }
.home-hero__media img,
.home-hero__media video { object-fit: cover; object-position: 50% 40%; }
.home-hero__media::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 200px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(7 8 11 / 0.72) 0%, rgb(7 8 11 / 0.35) 55%, rgb(7 8 11 / 0) 100%);
}
.home-hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgb(7 8 11 / 0.92) 0%, rgb(7 8 11 / 0.6) 30%, rgb(7 8 11 / 0) 62%);
}
.home-hero--bare .home-hero__media::after { display: none; }
.home-hero__link { position: absolute; inset: 0; z-index: 1; }
.home-hero__link:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--blue-400); }
.home-hero__in { position: relative; height: 100%; display: flex; align-items: flex-end; padding-bottom: var(--space-6); }
.home-hero__body { display: flex; flex-direction: column; gap: var(--space-2); max-width: 560px; }
.home-hero__title {
  margin: 0; font-size: 2.5rem; font-weight: var(--weight-black); line-height: var(--leading-display);
  text-transform: uppercase; letter-spacing: -0.005em; color: #fff; text-wrap: balance;
}
.home-hero__lead { margin: 0; color: var(--ink-200); font-size: var(--text-md); max-width: 42ch; }
.home-hero .price { color: #fff; }
.home-hero .price__main { column-gap: var(--space-2); }
.home-hero .price__inst { color: var(--ink-200); }
.home-hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
@media (max-width: 767.98px) {
  .home-hero__ctas .btn--primary { flex: 1 1 auto; }
  .home-hero__lead { display: none; }
}
@media (min-width: 768px) {
  .home-hero__media img,
  .home-hero__media video { object-position: 60% center; }
  .home-hero__media::after {
    background:
      linear-gradient(90deg, rgb(7 8 11 / 0.9) 0%, rgb(7 8 11 / 0.66) 32%, rgb(7 8 11 / 0.08) 62%, rgb(7 8 11 / 0) 100%),
      linear-gradient(0deg, rgb(7 8 11 / 0.6) 0%, rgb(7 8 11 / 0) 38%);
  }
  .home-hero__in { padding-bottom: var(--space-12); }
  .home-hero__title { font-size: var(--text-display-2xl); }
  .home-hero__lead { font-size: var(--text-lg); }
}
@media (min-width: 1024px) { .home-hero__media::before { height: 240px; } }

/* Pausa de vídeo (WCAG 2.2.2): só aparece quando o banner é vídeo e o JS assumiu o controle */
.home-vtoggle {
  position: absolute; z-index: 3; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid rgb(255 255 255 / 0.35); border-radius: 50%; background: rgb(7 8 11 / 0.45); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.home-vtoggle[hidden] { display: none; }
.home-vtoggle:hover { background: rgb(7 8 11 / 0.7); border-color: #fff; }
.home-vtoggle:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.home-vtoggle__ic--play,
.home-vtoggle.is-paused .home-vtoggle__ic--pause { display: none; }
.home-vtoggle.is-paused .home-vtoggle__ic--play { display: block; }
.home-vtoggle--hero { right: var(--gutter); bottom: var(--space-6); }
@media (min-width: 768px) { .home-vtoggle--hero { bottom: var(--space-12); } }
.home-vtoggle--tile { top: 12px; right: 12px; width: 32px; height: 32px; }

/* ---------- Banners de campanha ----------
   Lado a lado, 8 px entre eles e da borda, sem cantos nem contorno (blocos da SCUF); imagem cheia,
   texto no pé. Abaixo de 1024 px viram um trilho com encaixe. */
.ctiles {
  --n: 3;
  list-style: none; margin: 0; padding: 8px; display: grid; gap: 8px;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)); background: var(--ink-950);
}
.ctiles > li { position: relative; min-width: 0; }
.ctile {
  position: relative; display: flex; align-items: flex-end; height: 320px; padding: var(--space-6);
  overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: var(--ink-850);
}
.ctile__bg { position: absolute; inset: 0; z-index: -1; }
.ctile__bg picture { display: block; width: 100%; height: 100%; }
.ctile__bg img,
.ctile__bg video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; transition: transform 600ms var(--ease-standard); }
.ctile__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(7 8 11 / 0.88) 0%, rgb(7 8 11 / 0.45) 42%, rgb(7 8 11 / 0) 72%); }
.ctile__body { display: grid; gap: 2px; padding-right: 44px; }
.ctile__eyebrow { color: var(--blue-300); }
.ctile__name {
  font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-weight: var(--weight-bold);
  font-size: 1.625rem; line-height: var(--leading-tight); text-transform: uppercase; color: #fff;
}
.ctile__price { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--ink-200); font-variant-numeric: var(--numeric-price); }
.ctile__price strong { color: #fff; font-weight: var(--weight-bold); }
.ctile__price .m { color: var(--green-400); font-weight: var(--weight-semibold); }
.ctile__arrow {
  position: absolute; right: var(--space-5); bottom: var(--space-6); width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: rgb(255 255 255 / 0.14); color: #fff;
  transition: background-color var(--duration-fast), transform var(--duration-fast) var(--ease-standard);
}
.ctile__arrow svg { width: 18px; height: 18px; }
a.ctile:hover { color: #fff; }
a.ctile:hover .ctile__bg img,
a.ctile:hover .ctile__bg video { transform: scale(1.04); }
a.ctile:hover .ctile__arrow { background: var(--blue-500); transform: translateX(2px); }
.ctile:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--blue-400); }
@media (prefers-reduced-motion: reduce) { a.ctile:hover .ctile__bg img, a.ctile:hover .ctile__bg video { transform: none; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .ctile { height: 260px; padding: var(--space-5); } }
@media (max-width: 1023.98px) {
  .ctiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: 8px; overscroll-behavior-x: contain; }
  .ctiles::-webkit-scrollbar { display: none; }
  .ctiles > li { flex: 0 0 86%; scroll-snap-align: start; }
  .ctiles[style*="--n: 1"] > li { flex-basis: 100%; }
  .ctile { height: 220px; padding: var(--space-4); }
  .ctile__arrow { right: var(--space-4); bottom: var(--space-4); }
  .ctile__name { font-size: var(--text-xl); }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .ctiles > li { flex-basis: 48%; } }

/* ---------- Categorias: ladrilhos altos e editoriais ----------
   Sem contorno nem chanfro, produto recortado sobre um foco de luz azul, nome em Tomorrow, índice
   01–06 (só >= 1280 px) e "Ver tudo". 8 px de vão (o mesmo dos banners). Mobile/tablet: trilho com encaixe. */
.cats__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.cats__head h2 {
  margin: 0; font-family: var(--font-nav); font-stretch: normal; font-weight: 600; font-size: 1.375rem; line-height: 1.1;
  letter-spacing: 0; text-transform: uppercase; color: #fff;
}
@media (min-width: 768px) { .cats__head h2 { font-size: 1.75rem; } }
.cats__all {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min);
  font-family: var(--font-nav); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--blue-300); text-decoration: none; white-space: nowrap;
}
@media (min-width: 768px) { .cats__all { font-size: 14px; } }
.cats__all svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-standard); }
.cats__all:hover { color: #fff; }
.cats__all:hover svg { transform: translateX(3px); }
.cats__list {
  --n: 6;
  list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px;
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.cats__list::-webkit-scrollbar { display: none; }
.cats__list > li { flex: 0 0 44%; scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px) { .cats__list > li { flex-basis: 30%; } }
.cat-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; aspect-ratio: 4 / 5; padding: 14px 14px 12px;
  border-radius: 0; color: #fff; text-decoration: none;
  background:
    radial-gradient(70% 55% at 50% 62%, rgb(46 91 255 / 0.16) 0%, rgb(46 91 255 / 0) 70%),
    linear-gradient(180deg, #1C1E25 0%, #121319 100%);
}
/* foco de luz que acende no hover (camada própria para animar só a opacidade) */
.cat-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(75% 60% at 50% 62%, rgb(46 91 255 / 0.42) 0%, rgb(46 91 255 / 0.08) 55%, rgb(46 91 255 / 0) 75%);
  transition: opacity 380ms var(--ease-standard);
}
/* linha de base em Azul Doctor que cresce do meio no hover (mesma família do indicador do menu) */
.cat-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue-500);
  transform: scaleX(0); transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-tile__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; position: relative; z-index: 1; }
.cat-tile__name {
  font-family: var(--font-nav); font-stretch: normal; font-weight: 600; font-size: 1rem; line-height: 1.15;
  text-transform: uppercase; letter-spacing: 0; color: #fff; overflow-wrap: break-word; hyphens: auto;
}
.cat-tile__idx { display: none; font-family: var(--font-nav); font-size: 12px; font-weight: 500; color: var(--ink-400); font-variant-numeric: tabular-nums; padding-top: 3px; }
.cat-tile__img { flex: 1; min-height: 0; display: grid; place-items: center; padding: 6% 4% 2%; }
.cat-tile__img img {
  width: 100%; height: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.55));
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* peso visual parecido entre os produtos (o mousepad é um retângulo cheio e pesa mais) */
.cat-tile[data-cat="mousepads"] .cat-tile__img img { width: 88%; height: 88%; }
.cat-tile[data-cat="mouse-feet"] .cat-tile__img img { width: 94%; height: 94%; }
/* sem recorte: foto do produto num "palco" branco */
.cat-tile__img--stage img { width: 78%; height: auto; aspect-ratio: 1; border-radius: var(--radius-md); background: #fff; filter: none; }
/* sem recorte nem foto de produto: banner da categoria (categories_with_products[].banner) recortado no ladrilho */
.cat-tile__img--banner { padding: 6% 0 2%; }
.cat-tile__img--banner img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); filter: none; }
.cat-tile__img--icon { color: var(--ink-300); }
.cat-tile__img--icon svg { width: 40%; height: auto; }
.cat-tile__cta {
  display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 1;
  font-family: var(--font-nav); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--blue-300);
}
.cat-tile__cta svg { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-standard); }
.cat-tile:hover { color: #fff; }
.cat-tile:hover::before, .cat-tile:focus-visible::before { opacity: 1; }
.cat-tile:hover::after, .cat-tile:focus-visible::after { transform: scaleX(1); }
.cat-tile:hover .cat-tile__img img { transform: translateY(-6px) scale(1.05); }
.cat-tile:hover .cat-tile__cta { color: #fff; }
.cat-tile:hover .cat-tile__cta svg { transform: translateX(3px); }
.cat-tile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue-400); }
@media (prefers-reduced-motion: reduce) {
  .cat-tile:hover .cat-tile__img img { transform: none; }
  .cat-tile::after { transition-duration: 160ms; }
}
@media (min-width: 1024px) {
  .cats__head { margin-bottom: var(--space-6); }
  .cats__head h2 { font-size: 2.5rem; }
  .cats__list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .cat-tile { aspect-ratio: 3 / 4; padding: 16px 14px 14px; }
}
@media (min-width: 1280px) {
  .cat-tile { aspect-ratio: 4 / 5; padding: 22px 22px 20px; }
  .cat-tile__name { font-size: 1.375rem; }
  .cat-tile__idx { display: block; }
  .cat-tile__cta { font-size: 13px; }
}
/* com poucos ladrilhos no desktop eles não esticam demais */
@media (min-width: 1024px) {
  .cats__list[style*="--n: 1"], .cats__list[style*="--n: 2"], .cats__list[style*="--n: 3"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Vitrines (elements/products_grid.twig) ---------- */
.home-shelf { padding-block: calc(var(--section-gap) * 0.6); background: var(--ink-50); }
.home-shelf + .home-shelf { padding-top: calc(var(--section-gap) * 0.3); }
.home-shelf .section-head { margin-bottom: var(--space-6); }
.home-shelf .section-head h2 { letter-spacing: -0.01em; }
@media (min-width: 1024px) { .home-shelf .section-head h2 { font-size: var(--text-display-lg); } }

/* ---------- Marcas oficiais (padrão "Official Partners" da SCUF) ----------
   Faixa #000, título Tomorrow 600 itálico central, 2 fileiras em sentidos opostos, caixas
   400 x 78 com 150 px de vão no desktop (134 x 40 / 24 px no mobile), 7 s por caixa.
   Conteúdo duplicado e animação de -50% (laço sem pulo; cópias fora do leitor de tela e do Tab).
   Roda também com movimento reduzido (pedido do dono), com pausa no hover/foco e botão de pausa. */
.partners {
  --box-w: 134px; --box-h: 40px; --box-gap: 24px; --s: 0.513;   /* --s = 40 / 78: escala da altura do logo */
  position: relative; overflow: hidden; background: #000; color: #fff;
  padding: 40px 0 96px;
}
.partners__title {
  margin: 0 var(--gutter) 80px; text-align: center; color: #fff;
  font-family: var(--font-nav); font-stretch: normal; font-style: italic; font-weight: 600;
  font-size: 2.25rem; line-height: 1.1; letter-spacing: 0; text-transform: uppercase;
}
.partners__rows { display: grid; gap: 40px; }
.partners__row { overflow: hidden; }
.partners__track {
  display: flex; flex-wrap: nowrap; align-items: center; width: max-content;
  list-style: none; margin: 0; padding: 0;
  animation: dm-partners var(--dur, 91s) linear infinite;
  will-change: transform;
}
.partners__row--rev .partners__track { animation-direction: reverse; }
@keyframes dm-partners { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.partners__rows:hover .partners__track,
.partners__rows:focus-within .partners__track,
.partners.is-paused .partners__track { animation-play-state: paused; }
.plogo { flex: none; width: var(--box-w); height: var(--box-h); margin-right: var(--box-gap); list-style: none; }
.plogo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; text-decoration: none; border-radius: var(--radius-sm); transition: opacity var(--duration-fast); }
.plogo img { height: calc(var(--lh) * var(--s) * 1px); width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.plogo__word { font-family: var(--font-nav); font-stretch: normal; font-style: italic; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.875rem; line-height: 1; white-space: nowrap; color: #fff; }
.partners__rows:hover .plogo a { opacity: 0.55; }
.partners__rows:hover .plogo a:hover { opacity: 1; }
.plogo a:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 4px; opacity: 1; }
.partners__foot { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; }
.partners__all { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); font-family: var(--font-nav); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-300); text-decoration: none; }
.partners__all svg { width: 15px; height: 15px; }
.partners__all:hover { color: #fff; }
.partners__pause {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-min); padding: 0 14px 0 12px;
  border: 1px solid rgb(255 255 255 / 0.18); border-radius: var(--radius-pill); background: transparent;
  color: var(--ink-300); font-family: var(--font-nav); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast);
}
.partners__pause:hover { color: #fff; border-color: rgb(255 255 255 / 0.45); }
.partners__pause:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; color: #fff; }
.partners__ic--play, .partners.is-paused .partners__ic--pause { display: none; }
.partners.is-paused .partners__ic--play { display: block; }
.partners.is-paused .partners__pause { color: #fff; border-color: var(--blue-400); }
@media (max-width: 479.98px) { .partners__foot { gap: var(--space-3); } }
@media (min-width: 768px) {
  .partners { --box-w: 260px; --box-h: 56px; --box-gap: 88px; --s: 0.72; padding: 96px 0 120px; }
  .partners__title { font-size: 3.25rem; margin-bottom: 112px; }
  .partners__rows { gap: 80px; }
  .plogo__word { font-size: 1.25rem; }
  .partners__foot { bottom: 32px; }
}
@media (min-width: 1280px) {
  .partners { --box-w: 400px; --box-h: 78px; --box-gap: 150px; --s: 1; padding: 160px 0; }
  .partners__title { font-size: 4.1875rem; margin-bottom: 160px; }   /* SCUF: 67 px */
  .partners__rows { gap: 120px; }
  .plogo__word { font-size: 2rem; }
  .partners__foot { bottom: 48px; }
}