/* Home: topo no estilo do banner da cliente (hx), "Tecnologia em cada detalhe" com colunas de fotos (fh-tec3) e "Cores e acabamentos"
   (fh-acab). Carregado depois de home-future.css; mesmas cores do tema (ciano #24b6cd/#8fe3f0, latão #c9a65e). */

/* ---------------------------------------------------------------- topo */
/* No estilo do banner enviado pela cliente (05/10/2026): azul-marinho profundo, dourado no título, nos ícones e no
   botão principal; o vídeo do ventilador largo à direita, que some no fundo pela esquerda e por baixo;
   diferenciais em linha e a faixa de garantias embaixo. */
.hx-hero { --hx-gap: clamp(44px, 5vw, 68px); --hx-gold: #e2b563; --hx-gold-lt: #f3d79c; --hx-gold-line: rgba(226, 181, 99, .5); --hx-floor: #050d17;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  min-height: min(900px, calc(100svh - 92px)); padding: clamp(48px, 6vw, 92px) 0 clamp(26px, 3vw, 40px);
  color: #f3f8fc; background: var(--hx-floor); }
.hx-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(55% 60% at 76% 42%, rgba(241, 189, 114, .1), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, rgba(21, 105, 171, .2), transparent 70%),
    linear-gradient(180deg, #071725, var(--hx-floor) 72%); }

/* vídeo: mais largo que a coluna, cortado pela borda direita da tela como no banner; some no fundo pela esquerda e
   por baixo (máscara), sem emenda com o degradê do fundo */
.hx-media { position: absolute; z-index: -1; top: 0; bottom: 0; right: -6vw; width: clamp(600px, 63vw, 1040px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44%), linear-gradient(0deg, transparent, #000 34%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 44%), linear-gradient(0deg, transparent, #000 34%);
  mask-composite: intersect; }
.hx-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%;
  filter: brightness(.8) contrast(1.08) saturate(1.06); }
.hx-media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 13, 23, .75), rgba(5, 13, 23, 0) 58%),
    linear-gradient(180deg, rgba(5, 13, 23, .6), rgba(5, 13, 23, 0) 24%),
    radial-gradient(85% 75% at 60% 46%, rgba(5, 13, 23, 0) 42%, rgba(5, 13, 23, .5)); }

.hx-layout { position: relative; width: 100%; }
.hx-copy { position: relative; max-width: 720px; }
/* título: Manrope (geométrica e larga, a mais próxima da letra do banner da cliente; já auto-hospedada em site.css), em
   caixa alta. "Os melhores" abre menor, em latão claro e com um filete; "Ventiladores" é o peso maior, com brilho de
   prata; "de teto" fica leve e "do Brasil" em dourado metálico (degradê com faixa de reflexo, como no banner). */
.hx-title { margin: 0; font: 800 clamp(2.1rem, .8rem + 3.2vw, 3.95rem)/1.04 'Manrope', var(--f-head); letter-spacing: .02em;
  text-transform: uppercase; color: #fff; font-kerning: normal; }
.hx-t0, .hx-t1, .hx-t2 { display: block; white-space: nowrap; }
.hx-t0 { display: flex; align-items: center; gap: .7em; margin-bottom: .62em; font-size: .34em; font-weight: 600; line-height: 1;
  letter-spacing: .34em; color: var(--hx-gold-lt); }
.hx-t0::before { content: ''; flex: none; width: 2.6em; height: 1px; background: linear-gradient(90deg, rgba(226, 181, 99, 0), var(--hx-gold)); }
.hx-t1 { font-size: 1.2em; letter-spacing: .035em; line-height: 1; padding-bottom: .06em;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 42%, #aebfd0 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.hx-t2 { margin-top: .08em; font-weight: 400; letter-spacing: .05em; color: #eef3f7; }
.hx-title em { font-style: normal; font-weight: 800; letter-spacing: .03em; white-space: nowrap;
  background: linear-gradient(180deg, #fff4d6 0%, #f4d58e 24%, #dfac55 46%, #b47a2b 60%, #d9a650 76%, #f5d693 100%) 0 0 / 100% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 236, 190, .18)) drop-shadow(0 8px 24px rgba(226, 181, 99, .26)); }
/* reflexo: uma passada de luz pelo dourado ao abrir a página (sem movimento reduzido) */
@media (prefers-reduced-motion: no-preference) {
  .hx-title em { background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 250, 235, .9) 50%, rgba(255, 255, 255, 0) 60%),
      linear-gradient(180deg, #fff4d6 0%, #f4d58e 24%, #dfac55 46%, #b47a2b 60%, #d9a650 76%, #f5d693 100%);
    background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
    animation: hx-brilho 2.2s var(--ease) .95s 1 both; } /* começa quando o título já pousou (ver "entrada" abaixo) */
}
@keyframes hx-brilho { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
.hx-rule { display: block; width: 92px; height: 2px; margin: clamp(22px, 2.4vw, 30px) 0 clamp(18px, 2vw, 24px); border-radius: 2px;
  background: linear-gradient(90deg, var(--hx-gold), rgba(226, 181, 99, 0)); }
.hx-lead { margin: 0; max-width: 40ch; font: 400 clamp(1.06rem, .94rem + .42vw, 1.32rem)/1.5 var(--f-body); color: #d4e0ea; text-wrap: balance; }

.hx-feats { list-style: none; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0; }
.hx-feats li { display: flex; align-items: center; gap: 11px; padding: 0 18px; border-left: 1px solid rgba(226, 181, 99, .26);
  font: 500 12px/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #e5edf4; }
.hx-feats li:first-child { padding-left: 0; border-left: 0; }
.hx-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hx-gold-line); color: var(--hx-gold); background: rgba(226, 181, 99, .05); }
.hx-ico .ic { width: 19px; height: 19px; stroke-width: 1.5; }

.hx-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(28px, 3.2vw, 40px); }
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 999px;
  font: 600 13.5px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, box-shadow .3s ease, transform .25s ease; }
.hx-btn .ic { width: 16px; height: 16px; }
.hx-btn--primary { gap: 14px; padding: 0 22px 0 18px; color: var(--hx-gold-lt);
  background: linear-gradient(180deg, rgba(226, 181, 99, .12), rgba(226, 181, 99, .03));
  box-shadow: inset 0 0 0 1.5px var(--hx-gold), 0 12px 30px -16px rgba(226, 181, 99, .75); }
.hx-btn-ico { display: grid; place-items: center; height: 24px; padding-right: 14px; border-right: 1px solid rgba(226, 181, 99, .45); }
.hx-btn--primary > .ic:last-child { transition: transform .25s ease; }
.hx-btn--primary:hover { color: #1d1405; background: var(--hx-gold); transform: translateY(-1px);
  box-shadow: inset 0 0 0 1.5px var(--hx-gold), 0 0 0 5px rgba(226, 181, 99, .14), 0 16px 34px -14px rgba(226, 181, 99, .85); }
.hx-btn--primary:hover .hx-btn-ico { border-right-color: rgba(29, 20, 5, .3); }
.hx-btn--primary:hover > .ic:last-child { transform: translateX(3px); }
.hx-btn--ghost { color: #fff; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.hx-btn--ghost:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.hx-btn:focus-visible, .hx-trust-a:focus-visible { outline: 2px solid var(--hx-gold-lt); outline-offset: 3px; }


/* faixa de garantias */
.hx-trust { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--hx-gap) 0 0; padding: 16px 6px;
  border-radius: 20px; background: rgba(7, 19, 32, .74); border: 1px solid rgba(226, 181, 99, .2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -38px rgba(0, 0, 0, .95); }
.hx-trust > li { display: flex; min-width: 0; border-left: 1px solid rgba(226, 181, 99, .2); }
.hx-trust > li:first-child { border-left: 0; }
.hx-trust-it { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; padding: 6px 22px; color: inherit; text-decoration: none; border-radius: 14px; }
.hx-trust-tx { min-width: 0; }
.hx-trust-a { transition: background-color .25s; }
.hx-trust-a:hover { background: rgba(226, 181, 99, .07); }
.hx-trust-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; color: var(--hx-gold); }
.hx-trust-ico .ic { width: 30px; height: 30px; stroke-width: 1.4; }
.hx-flag svg { width: 34px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.hx-trust strong { display: block; font: 600 12.5px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--hx-gold-lt); }
.hx-trust-tx > span { display: block; margin-top: 3px; font: 400 13px/1.35 var(--f-body); color: #b8cadb; }
.hx-trust-a:hover .hx-trust-tx > span { color: #fff; }

@media (max-width: 1280px) {
  .hx-feats { grid-template-columns: repeat(2, auto); gap: 16px 0; }
  .hx-feats li:nth-child(3) { padding-left: 0; border-left: 0; }
  .hx-trust-it { padding: 6px 16px; gap: 12px; }
}
/* tablet e celular: o vídeo vira uma faixa larga no alto e o texto sobe por cima do fim dela */
@media (max-width: 900px) {
  .hx-hero { min-height: 0; justify-content: flex-start; padding: 0 0 28px; }
  .hx-media { position: relative; right: auto; width: 100%; height: min(78vw, 560px);
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 40%); mask-image: linear-gradient(0deg, transparent, #000 40%); }
  .hx-media video { object-position: 50% 54%; }
  .hx-media::after { background: linear-gradient(0deg, rgba(5, 13, 23, .5), rgba(5, 13, 23, 0) 50%), linear-gradient(180deg, rgba(5, 13, 23, .55), rgba(5, 13, 23, 0) 26%); }
  .hx-layout { display: flex; flex-direction: column; margin-top: -84px; }
  .hx-copy { max-width: none; }
  .hx-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 0; padding: 10px 4px; }
  .hx-trust > li:nth-child(3) { border-left: 0; }
}
/* telas muito estreitas (ou zoom do navegador): a última linha do título pode quebrar em vez de ser cortada */
@media (max-width: 380px) { .hx-t2, .hx-title em { white-space: normal; } }
@media (max-width: 600px) {
  .hx-title { font-size: clamp(1.6rem, .55rem + 6.6vw, 2.4rem); }
  .hx-t0 { font-size: .42em; letter-spacing: .26em; }
  .hx-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .hx-feats li, .hx-feats li:nth-child(3) { padding: 0; border-left: 0; font-size: 12px; letter-spacing: .06em; }
  .hx-ico { width: 38px; height: 38px; }
  .hx-ctas .hx-btn { flex: 1 1 100%; }
  .hx-trust { grid-template-columns: minmax(0, 1fr); padding: 6px 4px; }
  .hx-trust > li { border-left: 0; border-top: 1px solid rgba(226, 181, 99, .14); }
  .hx-trust > li:first-child { border-top: 0; }
  .hx-trust-it { padding: 10px 14px; }
}

/* ---------------------------------------------------------------- tecnologia em cada detalhe */
.fh-tec3 { overflow: hidden; }
.fh-tec3-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.fh-tec3.is-sem-fotos .fh-tec3-grid { grid-template-columns: minmax(0, 1fr); }
.fh-tec3-lead { max-width: 46ch; margin: 18px 0 30px; color: var(--fh-ink-2); }
.fh-tec3-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fh-tec3-list li { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 16px;
  border: 1px solid var(--fh-line); background: var(--fh-panel); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.fh-tec3-list li:hover { border-color: rgba(143, 227, 240, .4); transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(36, 182, 205, .7); }
.fh-tec3-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--fh-cyan-lt);
  border: 1px solid var(--fh-line-2); background: rgba(36, 182, 205, .08); transition: background-color .3s, color .3s; }
.fh-tec3-list li:hover .fh-tec3-ico { background: rgba(36, 182, 205, .22); color: #fff; }
.fh-tec3-ico svg { width: 20px; height: 20px; }
.fh-tec3-list h3 { margin: 0 0 6px; font-size: 1.04rem; line-height: 1.25; letter-spacing: -.01em; }
.fh-tec3-n { color: var(--fh-gold-lt); }
.fh-tec3-list p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--fh-ink-3); }
.fh-tec3-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 30px 0 0; }
.fh-tec3-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 0 16px; border-left: 1px solid var(--fh-line-2); }
.fh-tec3-stats div:first-child { padding-left: 0; border-left: 0; }
.fh-tec3-stats dd { margin: 0; font: 600 1.5rem/1 var(--f-head); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.fh-tec3-stats dt { margin-top: 6px; max-width: 13ch; font-size: 12px; line-height: 1.35; color: var(--fh-ink-3); }
.fh-tec3-cols { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; height: clamp(540px, 50vw, 700px);
  overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.fh-tec3-col { position: relative; min-width: 0; }
.fh-tec3-rail { display: flex; flex-direction: column; gap: 14px; animation: tec3-up calc(var(--n, 6) * 7.5s) linear infinite; }
.fh-tec3-col.is-down .fh-tec3-rail { animation-name: tec3-down; }
@keyframes tec3-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-50% - 7px), 0); } }
@keyframes tec3-down { from { transform: translate3d(0, calc(-50% - 7px), 0); } to { transform: translate3d(0, 0, 0); } }
.fh-tec3-cols:hover .fh-tec3-rail, .fh-tec3-cols:focus-within .fh-tec3-rail, html:is(.fx-paused, .fx-tab-hidden) .fh-tec3-rail { animation-play-state: paused; }
.fh-tec3-foto { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 16px; border: 1px solid var(--fh-line); background: #0a1b2c; }
.fh-tec3-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.9) brightness(.8) contrast(1.06); transform: scale(1.02);
  transition: filter .5s ease, transform .7s var(--ease); }
.fh-tec3-foto:hover img, .fh-tec3-foto:focus-visible img { filter: none; transform: scale(1.08); }
.fh-tec3-foto:focus-visible { outline: 2px solid #6fe0f0; outline-offset: 2px; }
.fh-tec3-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; width: max-content; max-width: calc(100% - 20px); padding: 6px 11px; border-radius: 999px;
  font: 500 12px/1.2 var(--f-body); color: #fff; background: rgba(5, 14, 24, .72); border: 1px solid var(--fh-line-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.fh-tec3-foto:hover .fh-tec3-cap, .fh-tec3-foto:focus-visible .fh-tec3-cap { opacity: 1; transform: none; }
@media (max-width: 1024px) {
  .fh-tec3-grid { grid-template-columns: minmax(0, 1fr); }
  .fh-tec3-cols { height: 560px; }
}
@media (max-width: 720px) {
  .fh-tec3-list { grid-template-columns: minmax(0, 1fr); }
  .fh-tec3-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 480px; gap: 10px; }
  .fh-tec3-col:nth-child(3) { display: none; }
  .fh-tec3-rail { gap: 10px; }
  .fh-tec3-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .fh-tec3-stats div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ---------------------------------------------------------------- cores e acabamentos */
.fh-acab-grid { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.fh-acab-lupa { position: sticky; top: 112px; margin: 0; padding: 16px; border-radius: 20px; background: var(--fh-panel); border: 1px solid var(--fh-line); overflow: hidden; }
.fh-acab-lupa img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #fff;
  transition: opacity .25s ease, transform .45s var(--ease); }
.fh-acab-lupa.is-swap img { opacity: .25; transform: scale(.985); }
.fh-acab-scan { position: absolute; z-index: 2; left: 16px; right: 16px; top: 16px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #8fe3f0, transparent); box-shadow: 0 0 14px 2px rgba(36, 182, 205, .7); }
.fh-acab-lupa.is-swap .fh-acab-scan { animation: acab-scan .65s ease-out; }
@keyframes acab-scan { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(var(--lupa-h, 380px)); } }
.fh-acab-lupa figcaption { display: flex; flex-direction: column; gap: 4px; padding: 16px 4px 4px; }
.fh-acab-k2 { font: 500 12px/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--fh-cyan-lt); }
.fh-acab-lupa strong { font: 600 1.45rem/1.15 var(--f-head); letter-spacing: -.02em; color: #fff; }
.fh-acab-lupa figcaption span:last-child { font-size: 14px; color: var(--fh-ink-3); }
.fh-acab-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 1.15rem; letter-spacing: -.01em; }
.fh-acab-h small { font: 400 13px/1 var(--f-body); color: var(--fh-ink-3); }
.fh-acab-list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.fh-acab-list:last-child { margin-bottom: 0; }
.fh-acab-sw { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 10px 10px 12px; border-radius: 16px;
  border: 1px solid var(--fh-line); background: rgba(10, 27, 44, .62); color: inherit; text-decoration: none;
  transition: border-color .25s ease, box-shadow .3s ease, background-color .25s ease; }
.fh-acab-sw:hover, .fh-acab-sw:focus-visible, .fh-acab-sw.is-on { border-color: rgba(143, 227, 240, .6); background: rgba(16, 42, 66, .85);
  box-shadow: 0 0 0 1px rgba(143, 227, 240, .22), 0 0 30px -8px rgba(36, 182, 205, .65); }
.fh-acab-sw:focus-visible { outline: 2px solid #6fe0f0; outline-offset: 2px; }
.fh-acab-img { display: block; overflow: hidden; aspect-ratio: 1; margin-bottom: 6px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.fh-acab-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.fh-acab-sw:hover .fh-acab-img img, .fh-acab-sw:focus-visible .fh-acab-img img { transform: scale(1.14); }
.fh-acab-nm { font: 600 13.5px/1.25 var(--f-head); letter-spacing: -.01em; color: #f3f8fc; }
.fh-acab-ct { font: 400 12px/1.25 var(--f-body); color: var(--fh-ink-3); }
@media (max-width: 900px), (hover: none) {
  .fh-acab-grid { grid-template-columns: minmax(0, 1fr); }
  .fh-acab-lupa { display: none; }
}
@media (max-width: 520px) { .fh-acab-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .fh-acab-sw { padding: 8px 8px 10px; } .fh-acab-nm { font-size: 12.5px; } }

/* ---------------------------------------------------------------- movimento */
@media (prefers-reduced-motion: reduce) {
  /* colunas de fotos: continuam rolando, mais devagar (pedido da cliente, 05/10/2026); param com o mouse, o foco
     ou o botão "Pausar animações" do topo. O !important vence o "animation: none !important" geral de site.css */
  .fh-tec3 .fh-tec3-rail { animation: tec3-up calc(var(--n, 6) * 12s) linear infinite !important; }
  .fh-tec3 .fh-tec3-col.is-down .fh-tec3-rail { animation-name: tec3-down !important; }
  .fh-tec3 .fh-tec3-cols:is(:hover, :focus-within) .fh-tec3-rail,
  html:is(.fx-paused, .fx-tab-hidden) .fh-tec3 .fh-tec3-rail { animation-play-state: paused !important; }
  .fh-acab-lupa.is-swap .fh-acab-scan { animation: none; }
  .fh-tec3-foto img, .fh-acab-img img, .fh-tec3-list li, .hx-btn, .hx-btn--primary > .ic:last-child { transition: none; }
}
@media print { .hx-bg, .hx-media, .fh-tec3-cols { display: none; } }

/* cartões de produto da home: sem os cantos HUD (pedido da cliente, 05/10/2026); a borda iluminada do hover continua */
.home .pcard::before { display: none; }

/* ---------------------------------------------------------------- entrada do topo (auditoria de animações, 09/10/2026)
   Coreografia única ao abrir a página: cada bloco do topo entra em sequência (opacidade + 14 px para cima, saída
   rápida com a curva padrão --ease), com passos de 60–80 ms. O filete dourado "desenha" da esquerda e o brilho do
   título (hx-brilho) só passa depois que o título pousou. Tudo em CSS puro com fill-mode "both": sem JS nada fica
   escondido, e com movimento reduzido (site.css zera animações) os blocos já aparecem no lugar. */
@media (prefers-reduced-motion: no-preference) {
  .hx-copy > :not(.hx-feats), .hx-feats > li, .hx-trust { animation: hx-in .7s var(--ease) both; }
  /* seletores com a mesma força da regra de grupo acima (.hx-copy > …): senão o atalho "animation" dela zera o atraso */
  .hx-copy > .hx-title { animation-delay: .05s; }
  .hx-copy > .hx-rule { animation-name: hx-rule-in; animation-duration: .8s; animation-delay: .16s; transform-origin: left center; }
  .hx-copy > .hx-lead { animation-delay: .22s; }
  .hx-feats > li:nth-child(1) { animation-delay: .3s; }
  .hx-feats > li:nth-child(2) { animation-delay: .36s; }
  .hx-feats > li:nth-child(3) { animation-delay: .42s; }
  .hx-feats > li:nth-child(4) { animation-delay: .48s; }
  .hx-copy > .hx-ctas { animation-delay: .54s; }
  .hx-trust { animation-delay: .7s; }
}
@keyframes hx-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes hx-rule-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- resposta ao clique
   Botões e cartões-link encolhem de leve enquanto pressionados (scale .97, 120 ms) e voltam na transição normal:
   o aperto é rápido, a volta é suave. Os cartões com inclinação 3D ([data-tilt]) ficam de fora: o JS controla o
   transform deles. */
.hx-btn:active, .hx-trust-a:active, .fh-sup:active, .fh-shortcuts a:active {
  transform: translateY(0) scale(.97); transition-duration: .12s; }
.hx-trust-a, .fh-shortcuts a { transition-property: background-color, border-color, color, transform; transition-duration: .25s; transition-timing-function: ease, ease, ease, var(--ease); }

/* ---------------------------------------------------------------- toque: sem deslocamento no :hover
   No celular o toque dispara um :hover que fica "grudado": o cartão subia e ficava lá. Só o movimento é
   desligado; cor, borda e brilho continuam como resposta ao toque. */
@media (hover: none) {
  .hx-btn--primary:hover, .fh-tec3-list li:hover, .fh-sup:hover { transform: none; }
  /* sem mouse não há "passar por cima": as fotos ambientadas já aparecem em cor e com o nome do modelo */
  .fh-tec3-foto img { filter: none; }
  .fh-tec3-cap { opacity: 1; transform: none; }
  .fh-cat:hover .fh-cat-media img, .scan-card:hover .scan-media,
  .fh-acab-sw:hover .fh-acab-img img { transform: none; }
  .fh-tec3-foto:hover img { transform: scale(1.02); }
  .hx-btn--primary:hover > .ic:last-child, .fh-link:hover .ic, a:hover .fh-link .ic { transform: none; }
}

/* movimento reduzido: a entrada do topo vira só um esmaecimento curto em sequência (sem deslocamento), como as
   colunas de fotos acima: menos e mais suave, não zero. O !important vence o "animation: none !important" de site.css. */
@media (prefers-reduced-motion: reduce) {
  .hx-copy > :not(.hx-feats), .hx-feats > li, .hx-trust { animation: hx-fade .45s ease both !important; }
  .hx-copy > .hx-title { animation-delay: .05s !important; }
  .hx-copy > .hx-rule { animation-delay: .12s !important; }
  .hx-copy > .hx-lead { animation-delay: .18s !important; }
  .hx-feats > li:nth-child(1) { animation-delay: .24s !important; }
  .hx-feats > li:nth-child(2) { animation-delay: .29s !important; }
  .hx-feats > li:nth-child(3) { animation-delay: .34s !important; }
  .hx-feats > li:nth-child(4) { animation-delay: .39s !important; }
  .hx-copy > .hx-ctas { animation-delay: .44s !important; }
  .hx-trust { animation-delay: .56s !important; }
}
@keyframes hx-fade { from { opacity: 0; } to { opacity: 1; } }