/* =====================================================================
   TechStore — REDESIGN COMPLETO (2026-06-07)
   Loja moderna, responsiva e profissional. CSS próprio, do zero.
   Prefixo de classes: .ts-  (não conflita com o resto do site)
   Reverter: restaure produtos.html do backup
   /backups/loja_rewrite_total_20260607_1121/
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

/* -------------------------------------------------- TOKENS */
:root {
    --brand: #ff5a1f;
    --brand-2: #ff7a00;
    --brand-deep: #e8410a;
    --brand-soft: #fff1ea;
    --green: #25d366;
    --green-deep: #128c7e;

    --ink: #0e1118;
    --ink-2: #475067;
    --muted: #8a92a6;
    --bg: #ffffff;
    --surface: #f6f7fa;
    --surface-2: #eef1f6;
    --line: #e6e9f0;

    --hero-1: #15182100;
    --radius: 18px;
    --radius-lg: 26px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(16, 19, 28, .06), 0 8px 20px rgba(16, 19, 28, .05);
    --shadow-md: 0 12px 30px rgba(16, 19, 28, .10);
    --shadow-lg: 0 26px 60px rgba(16, 19, 28, .16);
    --shadow-brand: 0 14px 30px rgba(255, 90, 31, .32);

    --ease: cubic-bezier(.2, .7, .2, 1);
    --container: 1200px;
    /* alinha o 1º item dos carrosséis full-bleed com o conteúdo central */
    --gutter: calc((100vw - min(100vw, var(--container))) / 2 + clamp(16px, 4vw, 28px));
}

/* -------------------------------------------------- RESET */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    overflow-x: clip;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    cursor: pointer;
}

::selection {
    background: rgba(255, 90, 31, .22);
}

h1,
h2,
h3,
h4 {
    font-family: 'Poppins', 'Inter', sans-serif;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ink);
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 6px;
}

/* -------------------------------------------------- LAYOUT */
.ts-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 28px);
}

.ts-section {
    position: relative;
    z-index: 1;
    padding-block: clamp(48px, 8vw, 96px);
}

.ts-section--surface {
    background: #ffffff;
}

#avaliacoes.ts-section--surface {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.ts-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 800 .76rem/1 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--brand-deep);
    background: var(--brand-soft);
    border: 1px solid rgba(255, 90, 31, .18);
    padding: 7px 14px;
    border-radius: var(--radius-pill);
}

.ts-head {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(28px, 5vw, 52px);
}

.ts-head h2 {
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 800;
    margin-top: 16px;
}

.ts-head p {
    color: var(--ink-2);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    margin-top: 12px;
}

/* -------------------------------------------------- BOTÕES */
.ts-btn {
    --b: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--radius-pill);
    font: 800 1rem/1 'Inter', sans-serif;
    letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-2), var(--brand-deep));
    box-shadow: var(--shadow-brand);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}

.ts-btn svg {
    width: 20px;
    height: 20px;
}

.ts-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 20px 40px rgba(255, 90, 31, .42);
}

.ts-btn:active {
    transform: translateY(0);
}

.ts-btn--wpp {
    background: linear-gradient(135deg, #2bd66e, var(--green-deep));
    box-shadow: 0 14px 30px rgba(18, 140, 126, .34);
}

.ts-btn--wpp:hover {
    box-shadow: 0 20px 40px rgba(18, 140, 126, .44);
}

.ts-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--line);
    box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, .6);
}

.ts-btn--ghost:hover {
    border-color: var(--brand);
    color: var(--brand-deep);
    box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, .6);
}

.ts-btn--light {
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-md);
}

.ts-btn--block {
    width: 100%;
}

.ts-btn--sm {
    min-height: 46px;
    font-size: .95rem;
    padding: 0 20px;
}

/* -------------------------------------------------- TOPBAR */
.ts-topbar {
    background: var(--ink);
    color: #fff;
    font: 600 .82rem/1.4 'Inter', sans-serif;
    text-align: center;
    padding: 9px 14px;
}

.ts-topbar b {
    color: #ffd0bd;
}

.ts-topbar span {
    opacity: .55;
    margin: 0 8px;
}

/* -------------------------------------------------- HEADER */
.ts-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s ease;
}

.ts-header.is-scrolled {
    box-shadow: 0 10px 30px rgba(16, 19, 28, .08);
}

.ts-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 70px;
}

.ts-logo {
    font: 900 1.5rem/1 'Poppins', sans-serif;
    letter-spacing: -.03em;
    color: var(--ink);
}

.ts-logo b {
    color: var(--brand);
}

.ts-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ts-nav>.ts-btn {
    display: none;
}

/* botão WhatsApp do menu: só no mobile */
.ts-nav__head {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.ts-nav__close {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    display: grid;
    place-items: center;
}

.ts-nav__close svg {
    width: 20px;
    height: 20px;
}

.ts-nav__close:active {
    background: var(--surface);
}

.ts-nav__link {
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    color: var(--ink-2);
    transition: color .2s, background .2s;
}

.ts-nav__link:hover {
    color: var(--brand-deep);
    background: var(--brand-soft);
}

.ts-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ts-burger {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    position: relative;
}

.ts-burger span {
    position: absolute;
    left: 11px;
    right: 11px;
    height: 2.5px;
    background: var(--ink);
    border-radius: 9px;
    transition: transform .3s var(--ease), opacity .2s;
}

.ts-burger span:nth-child(1) {
    top: 15px;
}

.ts-burger span:nth-child(2) {
    top: 22px;
}

.ts-burger span:nth-child(3) {
    top: 29px;
}

body.ts-menu-open .ts-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.ts-menu-open .ts-burger span:nth-child(2) {
    opacity: 0;
}

body.ts-menu-open .ts-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.ts-scrim {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(8, 10, 16, .5);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

body.ts-menu-open .ts-scrim {
    opacity: 1;
    visibility: visible;
}

body.ts-menu-open {
    overflow: hidden;
}

/* -------------------------------------------------- HERO */
.ts-hero {
    position: relative;
    min-height: clamp(620px, 78vh, 820px);
    display: flex;
    align-items: center;
    padding: clamp(88px, 10vw, 132px) 0 clamp(92px, 10vw, 132px);
    background: #08090f;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.ts-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6, 7, 12, .94) 0%, rgba(6, 7, 12, .78) 42%, rgba(6, 7, 12, .26) 72%, rgba(6, 7, 12, .58) 100%),
        linear-gradient(180deg, rgba(6, 7, 12, .34) 0%, rgba(6, 7, 12, .08) 42%, #08090f 100%),
        radial-gradient(760px 420px at 18% 52%, rgba(255, 90, 31, .22), transparent 64%);
}

.ts-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 640px);
    gap: 0;
    align-items: center;
    position: relative;
    z-index: 4;
}

.ts-hero__copy {
    position: relative;
    z-index: 3;
    max-width: 640px;
}

.ts-hero__eyebrow {
    color: #ffd0bd;
    background: rgba(255, 90, 31, .14);
    border-color: rgba(255, 122, 0, .3);
}

.ts-hero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 5.6vw, 3.6rem);
    font-weight: 800;
    margin: 18px 0 16px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.ts-hero h1 .ts-accent {
    background: linear-gradient(120deg, #ff8a3d, var(--brand));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ts-hero p {
    color: rgba(255, 255, 255, .76);
    font-size: clamp(1rem, 1.7vw, 1.16rem);
    max-width: 30rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ts-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 28px 0 24px;
}

.ts-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ts-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font: 700 .8rem/1 'Inter', sans-serif;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
}

.ts-chip svg {
    width: 15px;
    height: 15px;
    color: #4ade80;
}

.ts-hero__art {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: auto;
}

.ts-hero__art::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 25;
    opacity: 1;
    filter: none;
    background:
        linear-gradient(90deg, rgba(5, 6, 10, .94) 0%, rgba(5, 6, 10, .78) 40%, rgba(5, 6, 10, .28) 72%, rgba(5, 6, 10, .48) 100%),
        linear-gradient(180deg, rgba(5, 6, 10, .22) 0%, rgba(5, 6, 10, .06) 42%, rgba(5, 6, 10, .58) 100%),
        radial-gradient(900px 520px at 72% 22%, rgba(255, 122, 0, .14), transparent 62%);
    pointer-events: none;
}

.ts-hero__badge {
    position: absolute;
    right: clamp(20px, 5vw, 72px);
    top: clamp(112px, 13vw, 156px);
    bottom: auto;
    z-index: 46;
    display: grid;
    gap: 3px;
    padding: 10px 18px;
    border-radius: 16px;
    background: rgba(14, 17, 24, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateZ(0);
}

.ts-hero__badge b {
    font: 900 1.4rem/1 'Poppins', sans-serif;
    background: linear-gradient(135deg, #ff8a3d, var(--brand));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ts-hero__badge span {
    font: 800 .62rem/1 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, 0.85);
}

/* ---- SLIDESHOW DO HERO (timed cards com GSAP: card pequeno expande e vira o fundo) ---- */
#tcStage {
    /* primeira imagem já pintada antes do JS rodar: o hero nunca abre preto */
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    background: #0d0e12 url('images/Power%20Bank%2020000%20%2B%20Indu%C3%A7%C3%A3o%20Wup-379.png') center / cover no-repeat;
}

.tc-card {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #111;
    background-position: center;
    background-size: cover;
    box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, .6);
    cursor: pointer;
    opacity: 0;
    overflow: hidden;
    pointer-events: auto;
    /* sem will-change/translate3d aqui: card promovido a camada de GPU sendo
       redimensionado re-rasteriza a cada frame e dá tremida no fim da expansão */
}

.tc-indicator {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: none;
    height: 0;
    z-index: 50;
    background: linear-gradient(90deg, var(--brand-2), #ffcb6a, var(--brand));
    box-shadow: 0 0 18px rgba(255, 90, 31, .58);
    transform: translate3d(-101%, 0, 0);
    pointer-events: none;
}

.tc-pagination {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    pointer-events: auto;
}

.tc-arrow {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    border: 2px solid #ffffff55;
    background: transparent;
    display: grid;
    place-items: center;
    color: #ffffff99;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.tc-arrow+.tc-arrow {
    margin-left: 20px;
}

.tc-arrow:hover,
.tc-arrow:focus-visible {
    color: #fff;
    border-color: rgba(255, 122, 0, .7);
    background: rgba(255, 90, 31, .18);
    outline: none;
}

.tc-arrow svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.tc-progress {
    margin-left: 24px;
    height: 50px;
    display: flex;
    align-items: center;
}

.tc-progress__bg {
    width: 300px;
    height: 3px;
    background-color: #ffffff33;
}

.tc-progress__fg {
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--brand-2), var(--brand));
}

.tc-slide-numbers {
    width: 50px;
    height: 50px;
    margin-left: 12px;
    overflow: hidden;
    position: relative;
}

.tc-slide-numbers .tc-item {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    display: grid;
    place-items: center;
    font: 700 32px/1 'Oswald', 'Poppins', sans-serif;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .58);
}


/* ---- ONDAS ANIMADAS NO HERO ---- */
.ts-hero__grid {
    position: relative;
    z-index: 4;
}

.ts-hero__waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(42px, 7vw, 82px);
    --wave-dur-1: 8.2s;
    --wave-dur-2: 10.8s;
    --wave-dur-3: 13.6s;
    --wave-dur-4: 17.4s;
    --wave-delay-1: -1.4s;
    --wave-delay-2: -4.1s;
    --wave-delay-3: -7.2s;
    --wave-delay-4: -10.5s;
    z-index: 6;
    line-height: 0;
    pointer-events: none;
}

.ts-hero__waves svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ts-wave-parallax>use {
    animation-name: tsWaveMove;
    animation-duration: var(--wave-dur, 13s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.ts-wave-parallax>use:nth-child(1) {
    animation-delay: var(--wave-delay-1, -2s);
    animation-duration: var(--wave-dur-1, 7s);
}

.ts-wave-parallax>use:nth-child(2) {
    animation-delay: var(--wave-delay-2, -3s);
    animation-duration: var(--wave-dur-2, 10s);
}

.ts-wave-parallax>use:nth-child(3) {
    animation-delay: var(--wave-delay-3, -4s);
    animation-duration: var(--wave-dur-3, 13s);
}

.ts-wave-parallax>use:nth-child(4) {
    animation-delay: var(--wave-delay-4, -5s);
    animation-duration: var(--wave-dur-4, 16s);
}

@keyframes tsWaveMove {
    0% {
        transform: translate3d(-88px, 0, 0);
    }

    100% {
        transform: translate3d(88px, 0, 0);
    }
}

@keyframes tsGlowPulse {
    0% {
        opacity: 0.6;
        transform: scale(0.95) rotate(0deg);
        background: radial-gradient(circle, rgba(255, 90, 31, 0.25) 0%, transparent 70%);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.05) rotate(180deg);
        background: radial-gradient(circle, rgba(255, 122, 0, 0.35) 0%, transparent 70%);
    }

    100% {
        opacity: 0.6;
        transform: scale(0.95) rotate(360deg);
        background: radial-gradient(circle, rgba(255, 90, 31, 0.25) 0%, transparent 70%);
    }
}

/* ---- DIVISÓRIA DE ONDA ORIGINAL (anima fluindo, MESMA cor em todas) ---- */
.ts-divider {
    position: relative;
    z-index: 0;
    height: clamp(48px, 6.5vw, 84px);
    --wave-dur-1: 8.6s;
    --wave-dur-2: 11.4s;
    --wave-dur-3: 14.8s;
    --wave-delay-1: -1.7s;
    --wave-delay-2: -5.2s;
    --wave-delay-3: -9.1s;
    line-height: 0;
    overflow: hidden;
    pointer-events: none;
}

.ts-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ts-divider .w-accent1 {
    fill: rgba(255, 90, 31, .42);
}

.ts-divider .w-accent2 {
    fill: rgba(255, 122, 0, .26);
}

.ts-divider--flow-a {
    --wave-dur-1: 7.8s;
    --wave-dur-2: 10.7s;
    --wave-dur-3: 14.3s;
    --wave-delay-1: -1.1s;
    --wave-delay-2: -4.8s;
    --wave-delay-3: -8.6s;
}

.ts-divider--flow-b {
    --wave-dur-1: 9.4s;
    --wave-dur-2: 12.6s;
    --wave-dur-3: 16.2s;
    --wave-delay-1: -3.4s;
    --wave-delay-2: -7.2s;
    --wave-delay-3: -11.8s;
}

.ts-divider--flow-c {
    --wave-dur-1: 8.9s;
    --wave-dur-2: 11.9s;
    --wave-dur-3: 15.5s;
    --wave-delay-1: -2.6s;
    --wave-delay-2: -6.1s;
    --wave-delay-3: -10.2s;
}

.ts-divider--flow-d {
    --wave-dur-1: 10.1s;
    --wave-dur-2: 13.4s;
    --wave-dur-3: 17.2s;
    --wave-delay-1: -4.2s;
    --wave-delay-2: -8.4s;
    --wave-delay-3: -13.1s;
}

.ts-divider--flow-e {
    --wave-dur-1: 8.4s;
    --wave-dur-2: 11.2s;
    --wave-dur-3: 15.1s;
    --wave-delay-1: -2s;
    --wave-delay-2: -6.8s;
    --wave-delay-3: -12.4s;
}

.ts-divider--w2s {
    background: var(--bg);
}

.ts-divider--w2s .w-solid {
    fill: #ffffff;
}

.ts-divider--s2w {
    background: #ffffff;
}

.ts-divider--s2w .w-solid {
    fill: var(--bg);
}

/* -------------------------------------------------- FEATURES */
.ts-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: clamp(-40px, -4vw, -28px);
    position: relative;
    z-index: 5;
}

.ts-feature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.ts-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.ts-feature__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-2), var(--brand-deep));
    box-shadow: var(--shadow-brand);
}

.ts-feature__icon svg {
    width: 22px;
    height: 22px;
}

.ts-feature h3 {
    font-size: 1rem;
    font-weight: 700;
}

.ts-feature p {
    font-size: .86rem;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.45;
}

/* -------------------------------------------------- CATEGORIAS */
.ts-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.ts-cat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid var(--line);
    font-weight: 700;
    color: var(--ink-2);
    box-shadow: var(--shadow-sm);
    transition: all .25s var(--ease);
}

.ts-cat svg {
    width: 18px;
    height: 18px;
    color: var(--brand);
}

.ts-cat:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-2), var(--brand-deep));
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: var(--shadow-brand);
}

.ts-cat:hover svg {
    color: #fff;
}

/* -------------------------------------------------- PRODUTOS (GRID) */
.ts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.ts-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.ts-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 90, 31, .6);
    box-shadow: 0 26px 58px rgba(16, 19, 28, .16), 0 0 0 1px rgba(255, 90, 31, .55), 0 18px 46px rgba(255, 90, 31, .22);
}

.ts-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, #fbfcfe, #f1f3f8);
    padding: 14px;
    overflow: hidden;
}

.ts-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s var(--ease);
}

.ts-card:hover .ts-card__media img {
    transform: scale(1.09);
}

/* badge sempre acima da imagem (sem "atravessar") e amplia JUNTO com a imagem no hover */
.ts-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    transform-origin: top left;
    font: 800 .68rem/1 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--brand-2), var(--brand-deep));
    box-shadow: var(--shadow-brand);
    transition: transform .45s var(--ease);
}

.ts-tag--stock {
    left: auto;
    right: 12px;
    transform-origin: top right;
    background: rgba(14, 17, 24, .82);
    backdrop-filter: blur(6px);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.ts-card:hover .ts-tag {
    transform: scale(1.09);
}

.ts-card__body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ts-card__cat {
    font: 800 .7rem/1 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--brand-deep);
}

.ts-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 8px 0 4px;
}

.ts-card__desc {
    font-size: .86rem;
    color: var(--muted);
    line-height: 1.45;
}

.ts-card__warranty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 12px 0 16px;
    font: 700 .76rem/1 'Inter', sans-serif;
    color: #128a3e;
    background: #e9f9ef;
    border: 1px solid rgba(18, 138, 62, .2);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
}

.ts-card__warranty svg {
    width: 14px;
    height: 14px;
}

.ts-card__actions {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.ts-card__wpp {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand-deep);
    border: 1px solid rgba(255, 90, 31, .2);
    transition: all .2s var(--ease);
}

.ts-card__wpp svg {
    width: 22px;
    height: 22px;
}

.ts-card__wpp:hover {
    background: var(--green);
    color: #fff;
    border-color: transparent;
}

/* -------------------------------------------------- STEPS */
.ts-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ts-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 26px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.ts-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.ts-step__num {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 900 1.05rem/1 'Poppins', sans-serif;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-2), var(--brand-deep));
    box-shadow: var(--shadow-brand);
}

.ts-step__icon {
    width: 56px;
    height: 56px;
    margin: 12px auto 16px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: var(--brand-deep);
    background: var(--brand-soft);
}

.ts-step__icon svg {
    width: 28px;
    height: 28px;
}

.ts-step h3 {
    font-size: 1.2rem;
}

.ts-step p {
    color: var(--ink-2);
    margin-top: 8px;
    font-size: .95rem;
}

/* -------------------------------------------------- DEPOIMENTOS */
.ts-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ts-review {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 90, 31, 0.08);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow:
        0 8px 30px rgba(16, 19, 28, 0.03),
        0 1px 3px rgba(16, 19, 28, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s var(--ease), border-color 0.4s, background-color 0.4s, box-shadow 0.4s;
}

.ts-review:hover {
    transform: translateY(-6px);
    background: #ffffff;
    border-color: rgba(255, 90, 31, 0.25);
    box-shadow:
        0 24px 48px rgba(16, 19, 28, 0.08),
        0 4px 12px rgba(255, 90, 31, 0.04);
}

.ts-stars {
    color: #ff9d00;
    text-shadow: 0 0 10px rgba(255, 157, 0, 0.4);
    letter-spacing: 4px;
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.ts-review p {
    color: var(--ink-2);
    font-style: italic;
    line-height: 1.55;
}

.ts-review__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.ts-review__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--brand);
    box-shadow: 0 0 8px rgba(255, 90, 31, 0.15);
    transition: transform 0.3s var(--ease);
}

.ts-review:hover .ts-review__avatar {
    transform: scale(1.08) rotate(6deg);
}

.ts-review__name {
    font-weight: 700;
    font-size: .98rem;
    color: var(--ink);
}

.ts-review__meta {
    font-size: .78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.ts-review__meta svg {
    width: 13px;
    height: 13px;
    color: var(--green-deep);
}

/* -------------------------------------------------- FAQ */
.ts-faq {
    max-width: min(1040px, 100%);
    margin-inline: auto;
    display: grid;
    gap: 12px;
}

.ts-faq details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color .2s;
}

.ts-faq details[open] {
    border-color: rgba(255, 90, 31, .35);
}

.ts-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 22px;
    font-weight: 700;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ts-faq summary::-webkit-details-marker {
    display: none;
}

.ts-faq summary::after {
    content: "+";
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font: 700 1.5rem/1 'Inter', sans-serif;
    color: var(--brand-deep);
    background: var(--brand-soft);
    border: 1px solid rgba(255, 90, 31, .2);
    border-radius: 11px;
    transition: transform .35s var(--ease), background .35s ease, color .35s ease, box-shadow .35s ease;
}

.ts-faq summary:hover::after {
    background: var(--brand);
    color: #fff;
}

.ts-faq details[open] summary::after {
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--brand-2), var(--brand-deep));
    color: #fff;
    box-shadow: var(--shadow-brand);
}

.ts-faq .ts-faq__a {
    padding: 0 22px 22px;
    color: var(--ink-2);
}

.ts-faq__highlight {
    display: block;
    margin-top: 14px;
    padding: 12px 14px;
    color: #8a2e00;
    background: #fff4ec;
    border: 1px solid rgba(255, 90, 31, .24);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(255, 90, 31, .08);
}

/* -------------------------------------------------- CTA BAND */
.ts-section--cta {
    padding-block: clamp(14px, 2.4vw, 30px) clamp(56px, 7vw, 96px);
}

#faq {
    padding-bottom: clamp(18px, 2.8vw, 34px);
}

#faq+.ts-section--cta {
    padding-top: clamp(8px, 1.8vw, 18px);
}

.ts-section--cta+.ts-divider {
    height: clamp(34px, 4vw, 54px);
    margin-top: clamp(-24px, -2.4vw, -12px);
}

.ts-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: clamp(34px, 6vw, 64px);
    text-align: center;
    color: #fff;
    background:
        radial-gradient(600px 300px at 10% 0%, rgba(255, 255, 255, .14), transparent 60%),
        linear-gradient(135deg, var(--brand-2), var(--brand-deep));
    box-shadow: var(--shadow-lg);
}

.ts-cta::before,
.ts-cta::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.ts-cta::before {
    inset: -35%;
    opacity: .48;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .18) 0 2px, transparent 3px),
        radial-gradient(circle at 80% 68%, rgba(255, 255, 255, .13) 0 1px, transparent 3px),
        linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, .16) 45%, transparent 54%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 18px);
    background-size: 180px 180px, 245px 245px, 220% 220%, 38px 38px;
    animation: tsCtaTextureDrift 15s linear infinite;
}

.ts-cta::after {
    inset: 0;
    opacity: .72;
    background:
        radial-gradient(420px 180px at 16% 18%, rgba(255, 255, 255, .20), transparent 64%),
        radial-gradient(300px 170px at 88% 78%, rgba(255, 211, 148, .22), transparent 72%),
        linear-gradient(100deg, transparent 0 42%, rgba(255, 255, 255, .10) 50%, transparent 59%);
    animation: tsCtaGlowPulse 6.8s ease-in-out infinite alternate;
}

.ts-cta>* {
    position: relative;
    z-index: 1;
}

.ts-cta h2 {
    color: #fff;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 800;
}

.ts-cta p {
    color: rgba(255, 255, 255, .92);
    margin: 14px auto 26px;
    max-width: 32rem;
}

@keyframes tsCtaTextureDrift {
    0% {
        transform: translate3d(-1.5%, -1%, 0) rotate(0deg);
    }

    100% {
        transform: translate3d(1.5%, 1%, 0) rotate(1deg);
    }
}

@keyframes tsCtaGlowPulse {
    0% {
        opacity: .58;
        transform: scale(1);
    }

    100% {
        opacity: .86;
        transform: scale(1.025);
    }
}

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

    .ts-cta::before,
    .ts-cta::after {
        animation: none;
    }
}

/* -------------------------------------------------- FOOTER */
.ts-footer {
    background: #0b0d13;
    color: #cfd3de;
    padding-top: clamp(48px, 7vw, 80px);
}

.ts-footer__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
}

.ts-footer__brand {
    max-width: 560px;
}

.ts-footer__brand p {
    max-width: 460px;
    margin-inline: auto;
}

.ts-footer__cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px 64px;
    width: 100%;
}

.ts-footer__cols>div {
    min-width: 140px;
}

/* telas grandes: footer ocupa a largura (deixa de ficar centralizado/pequeno) */
@media (min-width: 880px) {
    .ts-footer__grid {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        text-align: left;
        gap: 40px 64px;
    }

    .ts-footer__brand {
        max-width: 380px;
        flex: 0 0 auto;
    }

    .ts-footer__brand p {
        margin-inline: 0;
    }

    .ts-footer__cols {
        width: auto;
        flex: 1;
        justify-content: flex-end;
        gap: 30px 72px;
    }
}

.ts-footer__logo {
    font: 900 1.6rem/1 'Poppins', sans-serif;
    color: #fff;
}

.ts-footer__logo b {
    color: var(--brand);
}

.ts-footer p {
    color: #9aa1b3;
    font-size: .9rem;
    margin-top: 14px;
    line-height: 1.7;
}

.ts-footer h4 {
    color: #fff;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 16px;
}

.ts-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ts-footer li {
    margin-bottom: 11px;
    text-align: center;
}

.ts-footer h4 {
    text-align: center;
}

.ts-footer__cols>div {
    text-align: center;
}

.ts-footer a {
    color: #9aa1b3;
    font-size: .92rem;
    transition: color .2s;
}

.ts-footer a:hover {
    color: var(--brand);
}

.ts-footer__contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.ts-footer__contact a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ts-footer__contact a[href^="mailto"] {
    color: #9aa1b3;
}

.ts-footer__contact a[href^="mailto"] svg {
    color: var(--brand);
}

.ts-footer__wpp {
    background: rgba(37, 211, 102, .12);
    border: 1px solid rgba(37, 211, 102, .3);
    border-radius: 12px;
    padding: 11px 15px;
    color: #fff !important;
    font-weight: 700;
}

.ts-footer__wpp svg {
    width: 18px;
    height: 18px;
}

.ts-footer__copy {
    text-align: center;
    padding: 22px 0;
    color: #707892;
    font-size: .84rem;
}

/* -------------------------------------------------- WHATSAPP FLUTUANTE */
.ts-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 16px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #2bd66e, var(--green-deep));
    color: #fff;
    font: 800 1rem/1 'Inter', sans-serif;
    box-shadow: 0 16px 36px rgba(18, 140, 126, .5), 0 0 0 6px rgba(37, 211, 102, .16);
    animation: ts-fab 2.4s ease-in-out infinite;
    transition: transform .25s var(--ease), filter .25s var(--ease);
}

.ts-fab svg {
    width: 26px;
    height: 26px;
}

.ts-fab:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

@keyframes ts-fab {

    0%,
    100% {
        box-shadow: 0 16px 36px rgba(18, 140, 126, .5), 0 0 0 0 rgba(37, 211, 102, .5);
    }

    50% {
        box-shadow: 0 16px 36px rgba(18, 140, 126, .5), 0 0 0 14px rgba(37, 211, 102, 0);
    }
}

/* -------------------------------------------------- REVEAL */
/* REVELAR AO ROLAR — cada seção entra de um jeito diferente */
.ts-reveal {
    opacity: 0;
    transition: opacity .7s ease, transform .75s cubic-bezier(.2, .75, .25, 1);
}

.ts-reveal:not(.is-in) {
    transform: translateY(48px);
}

/* padrão: de baixo */
#categorias .ts-reveal:not(.is-in) {
    transform: translateY(40px) scale(.95);
}

/* sobe + zoom */
#produtos .ts-reveal:not(.is-in) {
    transform: translateX(-70px);
}

/* da esquerda */
#como-comprar .ts-reveal:not(.is-in) {
    transform: translateY(70px);
}

/* avaliacoes: reveal SO com fade (sem transform em nenhum estado) =>
   sem promocao/remocao de camada GPU, logo sem o "pulinho"/re-rasterizacao
   no fim da transicao (vale para desktop E mobile). */
#avaliacoes .ts-reveal,
#avaliacoes .ts-reveal:not(.is-in),
#avaliacoes .ts-reveal.is-in {
    transform: none;
}

/* da direita */
#faq .ts-reveal:not(.is-in) {
    transform: scale(.88);
}

/* zoom */
#trocas .ts-reveal:not(.is-in) {
    transform: translateX(-70px);
}

/* da esquerda */
.ts-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1024px) {
    .ts-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .ts-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ts-hero__grid {
        grid-template-columns: 1fr;
    }

    .ts-hero__art {
        position: absolute;
        inset: 0;
        max-width: none;
        margin: 0;
        width: auto;
    }

}

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

    .ts-steps {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-inline: auto;
    }

    .ts-reviews {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-inline: auto;
    }

    .ts-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    /* sem backdrop-filter no mobile: senão o cabeçalho vira "containing block"
       e prende o menu fixed nele (bug do menu sumir ao rolar) */
    .ts-header {
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* menu mobile (painel lateral) */
    .ts-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(88vw, 380px);
        height: 100dvh;
        z-index: 96;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        padding: 18px 16px 28px;
        box-shadow: -16px 0 50px rgba(0, 0, 0, .28);
        transition: right .38s var(--ease);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.ts-menu-open .ts-nav {
        right: 0;
    }

    .ts-nav__head {
        display: flex;
    }

    .ts-nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 14px;
        font-size: 1.06rem;
        font-weight: 600;
        border-radius: 12px;
        color: var(--ink);
        border-bottom: 1px solid var(--surface-2);
    }

    .ts-nav__link::after {
        content: "\203A";
        color: var(--brand);
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 1;
    }

    .ts-nav__link:active {
        background: var(--brand-soft);
        color: var(--brand-deep);
    }

    .ts-nav>.ts-btn {
        display: inline-flex;
        justify-content: center;
        margin-top: 18px;
    }

    .ts-burger {
        display: block;
    }

    .ts-header__actions .ts-btn--wpp.ts-hide-mobile {
        display: none;
    }
}

@media (max-width: 768px) {
    .ts-hero {
        min-height: 690px;
        padding-top: clamp(70px, 18vw, 96px);
        /* reserva a faixa de baixo p/ a fileira de cards + paginação do slider */
        padding-bottom: 272px;
    }

    .ts-hero::before {
        background:
            linear-gradient(180deg, rgba(6, 7, 12, .88) 0%, rgba(6, 7, 12, .68) 46%, rgba(6, 7, 12, .62) 100%),
            radial-gradient(520px 420px at 22% 36%, rgba(255, 90, 31, .18), transparent 68%);
    }

    .ts-hero__grid {
        gap: 0;
    }

    .ts-hero__art {
        position: absolute;
        inset: 0;
        max-width: none;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .ts-hero__waves {
        bottom: -2px;
        height: clamp(84px, 20vw, 124px);
    }

    .ts-divider {
        height: clamp(78px, 18vw, 116px);
    }

    .ts-hero__badge {
        display: none;
    }

    .tc-card {
        background-position: var(--tc-mobile-pos, 70% center);
    }

    .tc-arrow {
        width: 38px;
        height: 38px;
    }

    .tc-arrow+.tc-arrow {
        margin-left: 12px;
    }

    .tc-arrow svg {
        width: 18px;
        height: 18px;
    }

    .tc-progress {
        margin-left: 14px;
        height: 38px;
    }

    .tc-slide-numbers {
        width: 38px;
        height: 38px;
        margin-left: 10px;
    }

    .tc-slide-numbers .tc-item {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .ts-hero h1 {
        font-size: clamp(2.05rem, 8.5vw, 2.7rem);
        line-height: 1.05;
    }

    .ts-hero p {
        font-size: 1rem;
        max-width: 100%;
    }

    .ts-hero__eyebrow {
        font-size: .7rem;
    }
}

@media (max-width: 560px) {
    .ts-hero__waves {
        height: clamp(92px, 24vw, 132px);
    }

    .ts-divider {
        height: clamp(86px, 22vw, 124px);
    }

    .ts-features {
        grid-template-columns: 1fr;
    }

    .ts-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .ts-card__body {
        padding: 13px 13px 15px;
    }

    .ts-card__title {
        font-size: .98rem;
    }

    .ts-card__actions {
        grid-template-columns: 1fr;
    }

    .ts-card__wpp {
        width: 100%;
        height: 46px;
    }

    .ts-hero__cta .ts-btn {
        width: 100%;
    }

    .ts-fab {
        right: 14px;
        bottom: 14px;
        padding: 15px;
    }

    .ts-fab span {
        display: none;
    }

    .ts-fab svg {
        width: 28px;
        height: 28px;
    }

    .ts-topbar span:nth-of-type(2) {
        display: none;
    }
}

@media (max-width: 380px) {
    .ts-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto;
    }
}

/* =====================================================================
   v2 — CARROSSÉIS, FAQ, ÍCONES ANIMADOS, SEGURANÇA E TROCAS
   ===================================================================== */

/* ---- ÍCONES ANIMADOS NA INTERAÇÃO (hover + toque) ---- */
.ts-feature__icon,
.ts-step__icon,
.ts-pcard__ic,
.ts-trustbar__ic,
.ts-cat svg,
.ts-card__wpp svg,
.ts-card__media img {
    transition: transform .3s var(--ease);
}

.ts-feature:hover .ts-feature__icon {
    transform: translateY(-2px) rotate(-7deg) scale(1.08);
}

.ts-step:hover .ts-step__icon {
    transform: rotate(-7deg) scale(1.1);
}

.ts-pcard:hover .ts-pcard__ic {
    transform: rotate(-7deg) scale(1.1);
}

.ts-trustbar__item:hover .ts-trustbar__ic {
    transform: rotate(-8deg) scale(1.1);
}

.ts-cat:hover svg {
    transform: scale(1.18) rotate(-8deg);
}

.ts-card__wpp:hover svg {
    transform: scale(1.18);
}

@media (hover: none) {

    .ts-feature:active .ts-feature__icon,
    .ts-step:active .ts-step__icon,
    .ts-pcard:active .ts-pcard__ic {
        transform: scale(1.14) rotate(-6deg);
    }

    .ts-cat:active svg {
        transform: scale(1.2);
    }

    .ts-card:active .ts-card__media img {
        transform: scale(1.08);
    }

    .ts-trustbar__item:active .ts-trustbar__ic {
        transform: scale(1.12) rotate(-6deg);
    }
}

/* ---- CARROSSEL HORIZONTAL (arrasta pro lado, todas as telas) ---- */
.ts-rail-wrap {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}

.ts-rail-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: clamp(20px, 6vw, 100px);
    background: linear-gradient(90deg, #ffffff, transparent);
    pointer-events: none;
    z-index: 5;
}

.ts-rail-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(20px, 6vw, 100px);
    background: linear-gradient(-90deg, #ffffff, transparent);
    pointer-events: none;
    z-index: 5;
}

.ts-rail {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    padding: 14px var(--gutter) 28px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.ts-rail::-webkit-scrollbar {
    display: none;
    height: 0;
}

.ts-rail>* {
    scroll-snap-align: start;
}

.ts-rail>.ts-card {
    flex: 0 0 270px;
}

.ts-rail>.ts-review {
    flex: 0 0 348px;
    height: auto;
}

.ts-rail-nav {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: grid;
    place-items: center;
    color: var(--ink);
    z-index: 6;
    transition: background .2s, color .2s, transform .2s var(--ease);
}

.ts-rail-nav svg {
    width: 22px;
    height: 22px;
}

.ts-rail-nav:hover {
    background: linear-gradient(135deg, var(--brand-2), var(--brand-deep));
    color: #fff;
    border-color: transparent;
    transform: translateY(-50%) scale(1.08);
}

.ts-rail-nav--prev {
    left: max(10px, calc(var(--gutter) - 58px));
}

.ts-rail-nav--next {
    right: max(10px, calc(var(--gutter) - 58px));
}

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

    .ts-rail {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 90, 31, 0.4) transparent;
        padding-bottom: 24px;
    }

    .ts-rail::-webkit-scrollbar {
        display: block;
        height: 4px;
    }

    .ts-rail::-webkit-scrollbar-track {
        background: rgba(255, 90, 31, 0.05);
        border-radius: 99px;
        margin-inline: var(--gutter);
    }

    .ts-rail::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, var(--brand), var(--brand-2));
        border-radius: 99px;
    }
}

@media (max-width: 560px) {
    .ts-rail>.ts-card {
        flex: 0 0 70vw;
        max-width: 280px;
    }

    /* card mais estreito => o 2o comentario aparece nitido ao lado (mais solto) */
    .ts-rail>.ts-review {
        flex: 0 0 70vw;
        max-width: 300px;
    }

    /* fades laterais menores pra nao esconder o proximo comentario */
    .ts-rail-wrap::before,
    .ts-rail-wrap::after {
        width: 12px;
    }
}

/* ---- TROCAS E DEVOLUÇÕES ---- */
.ts-policy {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 760px;
    margin-inline: auto;
}

.ts-pcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}

.ts-pcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 90, 31, .35);
}

.ts-pcard__ic {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-2), var(--brand-deep));
    box-shadow: var(--shadow-brand);
}

.ts-pcard__ic svg {
    width: 26px;
    height: 26px;
}

.ts-pcard h3 {
    font-size: 1.15rem;
}

.ts-pcard p {
    color: var(--ink-2);
    font-size: .92rem;
    margin-top: 10px;
}

.ts-pcard strong {
    color: var(--brand-deep);
}

.ts-policy-note {
    margin: 26px auto 0;
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
    max-width: 680px;
}

/* ---- BARRA DE CONFIANÇA / SEGURANÇA (topo do rodapé) ---- */
.ts-trustbar {
    position: relative;
    z-index: 3;
    margin: -90px 0 46px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.ts-trustbar__item {
    background: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px;
}

.ts-trustbar__ic {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-2), var(--brand-deep));
    box-shadow: var(--shadow-brand);
}

.ts-trustbar__ic svg {
    width: 22px;
    height: 22px;
}

.ts-trustbar__t {
    font-weight: 800;
    color: var(--ink);
    font-size: .95rem;
}

.ts-trustbar__s {
    font-size: .78rem;
    color: var(--muted);
}

/* ---- FORMAS DE PAGAMENTO / SELO NO RODAPÉ ---- */
.ts-footer__pay {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.ts-pay {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 800 .72rem/1 'Inter', sans-serif;
    letter-spacing: .03em;
    color: #d7dbe6;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 9px 13px;
    border-radius: 9px;
}

.ts-pay svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: .9;
}

.ts-pay--lock {
    color: #7ef0a8;
    background: rgba(126, 240, 168, .09);
    border-color: rgba(126, 240, 168, .3);
}

/* ícones de pagamento coloridos (a cor afeta só o ícone, via currentColor; texto continua claro) */
.ts-pay svg {
    opacity: 1;
}

.ts-pay--lock svg {
    color: #34d399;
}

.ts-pay--pix svg {
    color: #32d9c4;
}

.ts-pay--visa svg {
    color: #5b8def;
}

.ts-pay--elo svg {
    color: #ffd54a;
}

.ts-pay--mp svg {
    color: #38c5ff;
}

.ts-pay--card svg {
    color: var(--brand-2);
}

.ts-pay--mc svg circle:nth-of-type(1) {
    stroke: #ff5f56;
}

.ts-pay--mc svg circle:nth-of-type(2) {
    stroke: #ffb020;
}

/* ---- RESPONSIVO v2 ---- */
@media (max-width: 860px) {
    .ts-policy {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-inline: auto;
    }

    .ts-trustbar {
        grid-template-columns: 1fr 1fr;
        margin-top: -56px;
    }

    /* RODAPÉ: colunas empilhadas e centralizadas */
    .ts-footer__cols {
        flex-direction: column;
        align-items: center;
        gap: 28px;
    }

    .ts-footer ul {
        align-items: center;
    }

    .ts-footer__contact a {
        justify-content: center;
    }

    .ts-footer p {
        margin-inline: auto;
        max-width: 440px;
    }

    .ts-footer a {
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .ts-trustbar {
        grid-template-columns: 1fr;
        margin-top: 26px;
    }

    .ts-footer__pay {
        gap: 8px;
    }

    .ts-footer__contact a[href^="mailto"] {
        font-size: .82rem;
    }
}

/* ---- MAIS VENDIDOS: VITRINE TOP 3 (seção escura e vibrante) ---- */
#produtos {
    background: #ffffff;
}

/* secao branca como as demais: ondas ao redor ficam claras (sem faixa escura, sem glow) */
.ts-divider:has(+ #produtos) .w-solid {
    fill: #ffffff;
}

.ts-divider--d2l {
    background: #ffffff;
}

.ts-divider--d2l .w-solid {
    fill: #ffffff;
}

.tst {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2.2vw, 26px);
}

.tst__card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #1b1f2d 0%, #12141d 100%);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}

.tst__card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 122, 0, .55);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .45), 0 0 0 3px rgba(255, 90, 31, .16);
}

.tst__card--first {
    border-color: rgba(255, 122, 0, .55);
    box-shadow: 0 24px 56px rgba(255, 90, 31, .22), 0 18px 44px rgba(0, 0, 0, .35);
}

.tst__rank {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font: 900 .76rem/1 'Poppins', sans-serif;
    letter-spacing: .04em;
    color: #fff;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffb347, var(--brand-deep));
    box-shadow: 0 10px 24px rgba(255, 90, 31, .4);
}

.tst__rank--silver {
    background: linear-gradient(135deg, #b8c4d8, #6b7a94);
    box-shadow: 0 10px 24px rgba(107, 122, 148, .4);
}

.tst__rank--bronze {
    background: linear-gradient(135deg, #d99a6c, #9c5a2d);
    box-shadow: 0 10px 24px rgba(156, 90, 45, .4);
}

.tst__stock {
    position: absolute;
    top: 16px;
    right: 14px;
    z-index: 2;
    font: 800 .66rem/1 'Inter', sans-serif;
    color: #052e16;
    background: #4ade80;
    padding: 7px 11px;
    border-radius: 999px;
}

.tst__media {
    position: relative;
    height: clamp(190px, 22vw, 260px);
    background: radial-gradient(130% 110% at 50% 0%, #ffffff 0%, #eef1f7 62%, #e3e7f0 100%);
}

/* imagem absoluta dentro do painel: max-height em % não resolve dentro de grid
   e a foto vazava no tamanho natural por cima do texto */
.tst__media img {
    position: absolute;
    left: 6%;
    top: 24px;
    width: 88%;
    height: calc(100% - 42px);
    object-fit: contain;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .22));
}

.tst__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 18px;
}

.tst__cat {
    font: 800 .7rem/1.2 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: transparent;
    background: linear-gradient(270deg, #ffcb6a, var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
}

.tst__name {
    color: #fff;
    font: 800 1.12rem/1.2 'Poppins', sans-serif;
    margin: 0;
}

.tst__desc {
    color: rgba(255, 255, 255, .68);
    font-size: .85rem;
    line-height: 1.45;
    margin: 0;
}

.tst__perks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
}

.tst__perks span {
    font: 700 .64rem/1 'Inter', sans-serif;
    color: #fff;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
}

.tst__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}

.tst__actions .ts-btn {
    flex: 1;
    min-height: 44px;
    font-size: .88rem;
    padding: 0 12px;
}

.tst__wpp {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2bd66e, var(--green-deep));
    box-shadow: 0 10px 22px rgba(18, 140, 126, .35);
}

.tst__wpp svg {
    width: 21px;
    height: 21px;
}

@media (min-width: 761px) and (max-width: 1023px) {
    .tst__name {
        font-size: .98rem;
    }

    .tst__actions .ts-btn {
        font-size: .78rem;
        padding: 0 10px;
    }
}

@media (max-width: 760px) {
    .tst {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin-inline: auto;
        gap: 16px;
    }

    .tst__media {
        height: 215px;
    }
}

/* ---- TODOS OS PRODUTOS (catálogo por categoria, cada uma com sua cor) ---- */
#todos-produtos {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

#todos-produtos .ts-container {
    max-width: 1180px;
    width: 100%;
    padding-inline: clamp(16px, 4vw, 28px);
}

#todos-produtos .ts-head {
    max-width: 720px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.tsg__group {
    --acc: var(--brand-2);
    --acc-deep: var(--brand-deep);
    --acc-soft: #fff1e8;
    width: 100%;
    margin-top: clamp(34px, 4vw, 52px);
}

.tsg__group:first-of-type {
    margin-top: 0;
}

.tsg__group--fones {
    --acc: #8b5cf6;
    --acc-deep: #6d28d9;
    --acc-soft: #f1ebff;
}

.tsg__group--cabos {
    --acc: #3b82f6;
    --acc-deep: #1d4ed8;
    --acc-soft: #e8f1ff;
}

.tsg__group--power {
    --acc: #10b981;
    --acc-deep: #047857;
    --acc-soft: #e6f9f1;
}

.tsg__group--acess {
    --acc: #ec4899;
    --acc-deep: #be185d;
    --acc-soft: #ffe9f3;
}

.tsg__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.tsg__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--acc), var(--acc-deep));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--acc) 38%, transparent);
}

.tsg__icon svg {
    width: 22px;
    height: 22px;
}

.tsg__head h3 {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    margin: 0;
}

.tsg__count {
    font: 800 .68rem/1 'Inter', sans-serif;
    color: var(--acc-deep);
    background: var(--acc-soft);
    border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
    padding: 6px 10px;
    border-radius: 999px;
}

.tsg__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 312px));
    justify-content: center;
    gap: 18px;
    align-items: stretch;
}

.tsg__card {
    display: flex;
    flex-direction: column;
    min-height: 338px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s ease;
}

.tsg__card:hover {
    transform: translateY(-4px);
    border-color: var(--acc);
    box-shadow: var(--shadow-md);
}

.tsg__media {
    position: relative;
    display: block;
    height: 198px;
    min-height: 198px;
    background: #fff;
}

/* mesma correção: imagem absoluta para nunca vazar do painel */
.tsg__media img {
    position: absolute;
    left: 6%;
    top: 8px;
    width: 88%;
    height: calc(100% - 16px);
    object-fit: contain;
    transition: transform .25s var(--ease);
}

.tsg__card:hover .tsg__media img {
    transform: scale(1.06);
}

.tsg__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px 14px;
}

.tsg__info h4 {
    font: 800 .95rem/1.22 'Poppins', sans-serif;
    color: var(--ink);
    margin: 0;
}

.tsg__info p {
    color: var(--ink-2);
    font-size: .78rem;
    line-height: 1.4;
    margin: 0;
}

.tsg__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    width: 100%;
}

.tsg__btn {
    flex: 1;
    display: grid;
    place-items: center;
    min-height: 38px;
    border-radius: 999px;
    font: 800 .78rem/1 'Inter', sans-serif;
    color: #fff;
    background: linear-gradient(135deg, var(--acc), var(--acc-deep));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--acc) 32%, transparent);
    transition: transform .2s var(--ease), filter .2s ease;
}

.tsg__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.tsg__wpp {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2bd66e, var(--green-deep));
    box-shadow: 0 8px 18px rgba(18, 140, 126, .3);
}

.tsg__wpp svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 780px) {
    #todos-produtos .ts-container {
        padding-inline: clamp(14px, 4vw, 22px);
    }

    .tsg__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .tsg__card {
        min-height: 0;
    }

    .tsg__media {
        height: 150px;
        min-height: 150px;
    }

    .tsg__info {
        justify-content: flex-start;
    }

    .tsg__row {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .tsg__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .tsg__media {
        height: 130px;
        min-height: 130px;
        padding: 12px;
    }

    .tsg__info {
        padding: 10px 10px 12px;
    }

    .tsg__info h4 {
        font-size: .8rem;
    }

    .tsg__info p {
        font-size: .68rem;
    }

    .tsg__btn {
        min-height: 34px;
        font-size: .68rem;
    }

    .tsg__wpp {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .tsg__wpp svg {
        width: 16px;
        height: 16px;
    }

    .tsg__head h3 {
        font-size: 1.05rem;
    }

    .tsg__icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
    }

    .tsg__count {
        margin-left: auto;
    }

    .tsg__group {
        margin-top: 30px;
    }
}

/* Todos os produtos: evita o flash da lista original enquanto o JS monta o carrossel 3D. */
html.ts-js #todos-produtos:not(.tsg-tilted-ready) {
    min-height: clamp(620px, 58vw, 760px);
    overflow: hidden !important;
}

html.ts-js #todos-produtos:not(.tsg-tilted-ready) .tsg__group {
    display: none !important;
}

@media (max-width: 760px) {
    html.ts-js #todos-produtos:not(.tsg-tilted-ready) {
        min-height: 640px;
    }
}
/* ---- TODOS OS PRODUTOS: TILTED CAROUSEL NEUTRO ---- */
#todos-produtos.tsg-tilted-ready {
    min-height: auto;
    background: #ffffff !important;
    font-family: "Bricolage Grotesque", sans-serif !important;
    display: grid;
    place-content: center;
    overflow: hidden !important;
    padding: clamp(40px, 5vw, 70px) 0 clamp(36px, 5vw, 64px);
}

#todos-produtos.tsg-tilted-ready + .ts-divider {
    margin-top: 0;
    position: relative;
    z-index: 0;
}

#todos-produtos.tsg-tilted-ready .ts-container {
    width: min(100vw, 1180px);
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center;
    gap: 0;
    padding-inline: clamp(14px, 4vw, 36px) !important;
}

#todos-produtos.tsg-tilted-ready .ts-head {
    width: min(100%, 720px);
    margin: 0 auto clamp(34px, 4vw, 54px) !important;
    grid-column: auto;
}

#todos-produtos.tsg-tilted-ready .ts-head h2 {
    font-family: "Bricolage Grotesque", sans-serif !important;
    letter-spacing: 0;
}

#todos-produtos.tsg-tilted-ready .tsg__group,
#todos-produtos.tsg-tilted-ready .tsg__grid,
#todos-produtos.tsg-tilted-ready .tsg__head {
    display: none !important;
}

.tilted-products {
    width: min(100vw, 1120px);
    display: grid;
    place-items: center;
    gap: 0;
    color: #262626;
    user-select: none;
}

.tilted-products__viewport {
    width: min(100vw, 1120px);
    height: clamp(370px, 29vw, 455px);
    position: relative;
    overflow: visible;
    perspective: 1200px;
}

.tilted-products__card {
    --neutral-accent: #262626;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: clamp(140px, 10vw, 180px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4;
    display: block !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    opacity: 1;
    filter: none;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transition:
        transform 1s cubic-bezier(.2, .72, .2, 1),
        width 1s cubic-bezier(.2, .72, .2, 1),
        opacity .7s ease,
        filter .7s ease;
}

.tilted-products__card:hover,
.tilted-products__card:focus-within {
    transform: var(--tilted-transform) !important;
}

.tilted-products__card .tsg__media {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    border-radius: 8px;
    background: #fff !important;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(16, 19, 28, .15);
    transition:
        box-shadow 1s cubic-bezier(.2, .72, .2, 1),
        border-radius 1s cubic-bezier(.2, .72, .2, 1);
}

.tilted-products__card .tsg__media img {
    position: absolute !important;
    inset: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
    object-fit: contain !important;
    transition:
        inset 1s cubic-bezier(.2, .72, .2, 1),
        width 1s cubic-bezier(.2, .72, .2, 1),
        height 1s cubic-bezier(.2, .72, .2, 1);
}

.tilted-products__card .tsg__info {
    display: none !important;
}

.tilted-products__title {
    position: relative;
    z-index: 140;
    min-height: 24px;
    margin-top: 14px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(.9rem, 1.2vw, 1rem);
    line-height: 1.25;
    color: #262626;
    text-align: center;
    white-space: nowrap;
    max-width: min(90vw, 520px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.tilted-products__controls {
    position: relative;
    z-index: 140;
    margin-top: 10px;
    width: fit-content;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(38, 38, 38, .08);
    background: rgba(255, 252, 250, .66);
    box-shadow: 0 -8px 20px rgba(16, 19, 28, .10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tilted-products__nav {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #262626;
    cursor: pointer;
    transition: background .2s ease, outline-color .2s ease;
}

.tilted-products__nav:hover,
.tilted-products__nav:focus-visible {
    background: rgba(38, 38, 38, .08);
    outline: 2px solid rgba(38, 38, 38, .8);
    outline-offset: 1px;
}

.tilted-products__nav[disabled] {
    opacity: .35;
    pointer-events: none;
}

.tilted-products__nav svg {
    width: 27px;
    height: 27px;
}

/* setas maiores em telas grandes */
@media (min-width: 1000px) {
    .tilted-products__controls {
        gap: 20px;
        min-height: 62px;
        padding: 7px 16px;
    }

    .tilted-products__nav {
        width: 58px;
        height: 58px;
        border-radius: 12px;
    }

    .tilted-products__nav svg {
        width: 34px;
        height: 34px;
    }
}

.tilted-products__dots {
    width: min(42vw, 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tilted-products__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(38, 38, 38, .28);
    cursor: pointer;
    transition: width .28s ease, background-color .28s ease;
}

.tilted-products__dot.is-active {
    width: 28px;
    background: #262626;
}

@media (max-width: 720px) {
    #todos-produtos.tsg-tilted-ready {
        min-height: auto;
    }

    .tilted-products__viewport {
        height: clamp(280px, 84vw, 350px);
    }

    .tilted-products__card {
        width: clamp(95px, 26vw, 130px) !important;
    }

    .tilted-products__controls {
        gap: 10px;
        margin-top: 12px;
    }

    .tilted-products__dots {
        width: 118px;
        gap: 6px;
    }
}

/* override final para a lista do CodePen nao herdar o grid antigo */
#todos-produtos.tsg-tilted-ready .tilted-products__card {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: clamp(140px, 10vw, 180px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    opacity: 1;
    filter: none;
    transform-style: preserve-3d !important;
    pointer-events: auto;
    transition:
        transform 1s cubic-bezier(.2, .72, .2, 1),
        width 1s cubic-bezier(.2, .72, .2, 1),
        opacity .7s ease,
        filter .7s ease;
}

#todos-produtos.tsg-tilted-ready .tilted-products__card:hover,
#todos-produtos.tsg-tilted-ready .tilted-products__card:focus-within {
    transform: var(--tilted-transform) !important;
    border: 0 !important;
}

#todos-produtos.tsg-tilted-ready .tilted-products__card .tsg__media {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    position: relative !important;
    border-radius: 8px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: 0 16px 36px rgba(16, 19, 28, .15) !important;
    transition:
        box-shadow 1s cubic-bezier(.2, .72, .2, 1),
        border-radius 1s cubic-bezier(.2, .72, .2, 1);
}

#todos-produtos.tsg-tilted-ready .tilted-products__card.is-active .tsg__media {
    box-shadow: 0 30px 86px rgba(16, 19, 28, .24) !important;
}

#todos-produtos.tsg-tilted-ready .tilted-products__card.is-active {
    width: clamp(270px, 21vw, 340px) !important;
    filter: none !important;
    will-change: auto;
    transform-style: flat;
}

#todos-produtos.tsg-tilted-ready .tilted-products__card.is-active .tsg__media img {
    inset: 2px !important;
    width: calc(100% - 4px) !important;
    height: calc(100% - 4px) !important;
}

/* produto ativo: clique abre o WhatsApp -> deixa claro que e clicavel */
#todos-produtos.tsg-tilted-ready .tilted-products__card.is-active,
#todos-produtos.tsg-tilted-ready .tilted-products__card.is-active .tsg__media,
#todos-produtos.tsg-tilted-ready .tilted-products__card.is-active .tsg__media img {
    cursor: pointer !important;
}
#todos-produtos.tsg-tilted-ready .tilted-products__card.is-active .tsg__media {
    transition:
        box-shadow .5s cubic-bezier(.2, .72, .2, 1),
        transform .5s cubic-bezier(.2, .72, .2, 1) !important;
}
#todos-produtos.tsg-tilted-ready .tilted-products__card.is-active:hover .tsg__media {
    box-shadow: 0 36px 96px rgba(16, 19, 28, .30) !important;
    transform: translateY(-4px) !important;
}

#todos-produtos.tsg-tilted-ready .tilted-products__card .tsg__media img {
    position: absolute !important;
    inset: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
    object-fit: contain !important;
    transition:
        inset 1s cubic-bezier(.2, .72, .2, 1),
        width 1s cubic-bezier(.2, .72, .2, 1),
        height 1s cubic-bezier(.2, .72, .2, 1);
}

#todos-produtos.tsg-tilted-ready .tilted-products__card .tsg__info,
#todos-produtos.tsg-tilted-ready .tilted-products__card .tsg__row,
#todos-produtos.tsg-tilted-ready .tilted-products__card .tsg__btn,
#todos-produtos.tsg-tilted-ready .tilted-products__card .tsg__wpp {
    display: none !important;
}

#todos-produtos.tsg-tilted-ready .tilted-products__dot.is-active {
    background: #262626 !important;
}

@media (max-width: 720px) {
    #todos-produtos.tsg-tilted-ready .tilted-products__card {
        width: clamp(95px, 26vw, 130px) !important;
    }

    #todos-produtos.tsg-tilted-ready .tilted-products__card.is-active {
        width: clamp(175px, 55vw, 225px) !important;
    }
}

#todos-produtos .tsg__group {
    --acc: #262626 !important;
    --acc-deep: #262626 !important;
    --acc-soft: #e5e5e5 !important;
}

#todos-produtos .tsg__btn {
    background: #262626 !important;
    box-shadow: none !important;
}

/* ---- TILTED CAROUSEL: TABLETS ---- */
@media (min-width: 721px) and (max-width: 1000px) {
    .tilted-products__viewport {
        height: clamp(360px, 48vw, 430px);
    }

    #todos-produtos.tsg-tilted-ready .tilted-products__card {
        width: clamp(125px, 18vw, 170px) !important;
    }

    #todos-produtos.tsg-tilted-ready .tilted-products__card.is-active {
        width: clamp(260px, 36vw, 320px) !important;
    }
}

/* ---- TILTED CAROUSEL: REVEAL SUAVE (titulo + carrossel entram juntos ao chegar no viewport) ---- */
#todos-produtos .tilted-reveal {
    opacity: 0;
    transform: translateY(46px);
    transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

#todos-produtos .tilted-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* ============================================================
   MAIS VENDIDOS - slider em destaque (tema laranja, dark dramatico)
   ============================================================ */
.mvh {
    width: min(100%, 1320px);
    margin: clamp(6px, 1.6vw, 22px) auto 0;
    padding-inline: clamp(14px, 4vw, 44px);
    transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
    outline: none;
}
.mvh.mvh-anim { opacity: 0; transform: translateY(48px); }
.mvh.mvh-anim.is-in { opacity: 1; transform: none; }

.mvh__stage {
    position: relative;
    height: clamp(560px, 50vw, 680px);
    display: flex;
    align-items: center;
}

.mvh__shape {
    position: absolute;
    left: 0; top: 0;
    width: 50%;
    height: 100%;
    border-radius: 30px;
    background-image: linear-gradient(-45deg, #e8410a 0%, #ff7a00 100%);
    box-shadow: 0 30px 90px rgba(232, 65, 10, .30);
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
}

.mvh__shape::before,
.mvh__shape::after {
    content: "";
    position: absolute;
    inset: -28%;
    z-index: 0;
    pointer-events: none;
}

.mvh__shape::before {
    opacity: .34;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .28) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 62%, rgba(255, 255, 255, .16) 0 1px, transparent 3px),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 16px);
    background-size: 94px 94px, 132px 132px, 34px 34px;
    animation: mvhOrangeTexture 18s linear infinite;
}

.mvh__shape::after {
    opacity: .26;
    background:
        linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, .30) 45%, transparent 53%),
        radial-gradient(520px 240px at 18% 16%, rgba(255, 242, 216, .25), transparent 62%),
        radial-gradient(360px 260px at 90% 82%, rgba(180, 40, 0, .24), transparent 68%);
    background-size: 240% 240%, auto, auto;
    animation: mvhTextureSweep 8.5s ease-in-out infinite alternate;
}

.mvh__brand {
    position: absolute;
    z-index: 1;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    font-family: "Bricolage Grotesque", "Poppins", sans-serif;
    font-weight: 800;
    font-size: 92px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .15);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.mvh__card {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 74%;
    height: 86%;
    border-radius: 30px;
    overflow: hidden;
    background:
        radial-gradient(540px 360px at 86% 14%, rgba(255, 122, 0, .20), transparent 60%),
        linear-gradient(150deg, #1b2030 0%, #0e1118 100%);
    box-shadow: 0 28px 79px rgba(8, 10, 16, .5);
    border: 1px solid rgba(255, 255, 255, .06);
    isolation: isolate;
}

.mvh__card::before,
.mvh__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.mvh__card::before {
    opacity: .36;
    background:
        radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .14) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 74%, rgba(255, 122, 0, .16) 0 1px, transparent 3px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 11px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 15px);
    background-size: 110px 110px, 160px 160px, 100% 100%, 100% 100%;
    mix-blend-mode: screen;
    animation: mvhDarkTexture 20s linear infinite;
}

.mvh__card::after {
    opacity: .58;
    background:
        radial-gradient(560px 300px at 88% 10%, rgba(255, 122, 0, .18), transparent 62%),
        linear-gradient(118deg, transparent 0 40%, rgba(255, 255, 255, .07) 49%, transparent 58%);
    background-size: auto, 260% 260%;
    animation: mvhTextureSweep 10s ease-in-out infinite alternate;
}

.mvh__slides { position: relative; z-index: 1; height: 100%; }
.mvh__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .55s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.mvh__slide.is-active { opacity: 1; pointer-events: auto; }

.mvh__content {
    color: #fff;
    width: 100%;
    padding: 44px 60px 44px clamp(300px, 35%, 430px);
}

.mvh__eyebrow {
    display: inline-block;
    font-family: "Bricolage Grotesque", "Inter", sans-serif;
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffd0bd;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 90, 31, .16);
    border: 1px solid rgba(255, 122, 0, .34);
    margin-bottom: 16px;
}
.mvh__title {
    margin: 0 0 14px;
    font-family: "Bricolage Grotesque", "Poppins", sans-serif;
    font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.85rem);
    line-height: 1.1;
    color: #fff;
}
.mvh__price {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: "Bricolage Grotesque", "Inter", sans-serif;
    font-weight: 800;
    font-size: clamp(1.02rem, 1.7vw, 1.42rem);
    color: #fff;
    margin-bottom: 22px;
}
.mvh__price::before {
    content: "";
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 0 4px rgba(37, 211, 102, .22);
}
.mvh__specs {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.mvh__specs li {
    font-family: "Bricolage Grotesque", "Inter", sans-serif;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .82);
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}
.mvh__actions { margin: 0; }
.mvh__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Bricolage Grotesque", "Inter", sans-serif;
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .4px;
    color: #fff;
    padding: 14px 26px;
    border-radius: 999px;
    background-image: linear-gradient(-45deg, #e8410a 0%, #ff7a00 100%);
    box-shadow: 0 12px 34px rgba(232, 65, 10, .42);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
/* icone do whatsapp em verde (cor do whatsapp), num selo branco redondo */
.mvh__cta svg {
    width: 16px; height: 16px;
    padding: 8px;
    box-sizing: content-box;
    background: #fff;
    border-radius: 50%;
    color: #25d366;
    overflow: visible;
    flex: 0 0 auto;
}
.mvh__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(232, 65, 10, .54); filter: brightness(1.04); }

.mvh__product {
    position: absolute;
    z-index: 3;
    left: 27%; top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(380px, 43vw, 640px);
    height: 100%;
    pointer-events: none;
}
/* flutuacao continua e bem suave; fica no wrapper => nao reinicia ao trocar slide */
.mvh__floater {
    position: absolute;
    inset: 0;
    animation: mvhFloat 6.5s ease-in-out infinite;
    will-change: transform;
    backface-visibility: hidden;
}
@keyframes mvhFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.6deg); }
    50%      { transform: translate3d(0, -15px, 0) rotate(0.6deg); }
}
.mvh__product-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: opacity .55s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
    filter: none !important;
    backface-visibility: hidden;
}
.mvh__product-img.is-active { opacity: 1; }

@media (min-width: 961px) {
    .mvh__product-img[data-slide="3"] {
        left: -15%;
        top: -9%;
        width: 127%;
        height: 120%;
        max-width: none;
        filter: none !important;
    }
}

.mvh__nav {
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    width: 60px; height: 60px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: #fff;
    color: #161a23;
    box-shadow: 0 14px 34px rgba(8, 10, 16, .4);
    transition: transform .2s ease, opacity .2s ease;
}
.mvh__nav svg { width: 22px; height: 22px; fill: currentColor; }
.mvh__nav:hover { transform: translateY(-50%) scale(1.07); }
.mvh__nav[disabled] { opacity: .4; cursor: default; }
.mvh__nav--prev { left: -6px; }
.mvh__nav--next { right: -6px; }

.mvh__dots {
    position: absolute;
    z-index: 5;
    left: 0; right: 0;
    bottom: 2px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.mvh__dot {
    width: 10px; height: 10px;
    padding: 0; border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
    cursor: pointer;
    transition: width .28s ease, background .28s ease;
}
.mvh__dot.is-active { width: 30px; background: #ff7a00; }

@keyframes mvhOrangeTexture {
    0% {
        transform: translate3d(-2%, -1%, 0) rotate(0deg);
    }

    100% {
        transform: translate3d(2%, 1%, 0) rotate(1deg);
    }
}

@keyframes mvhDarkTexture {
    0% {
        transform: translate3d(0, 0, 0);
        background-position: 0 0, 0 0, 0 0, 0 0;
    }

    100% {
        transform: translate3d(1.5%, .8%, 0);
        background-position: 110px 80px, -120px 96px, 0 24px, 18px 0;
    }
}

@keyframes mvhTextureSweep {
    0% {
        background-position: 0% 50%, center, center;
        transform: scale(1);
    }

    100% {
        background-position: 100% 50%, center, center;
        transform: scale(1.025);
    }
}

/* ---- MAIS VENDIDOS: TABLET / MOBILE (foco redobrado) ---- */
@media (max-width: 960px) {
    .mvh__stage {
        height: auto;
        display: block;
        padding-top: 18px;
        padding-bottom: 30px;
    }
    .mvh__shape {
        position: relative;
        width: 100%;
        height: clamp(270px, 54vw, 380px);
        border-radius: 24px;
    }
    .mvh__brand {
        transform: translate(-50%, -50%) rotate(0deg);
        font-size: clamp(40px, 9vw, 70px);
    }
    .mvh__product {
        position: absolute;
        left: 50%; top: 0;
        transform: translateX(-50%);
        width: min(112%, 580px);
        height: clamp(350px, 78vw, 500px);
    }
    .mvh__product-img[data-slide="0"] {
        top: clamp(18px, 4.8vw, 34px);
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 108%;
    }
    .mvh__product-img[data-slide="3"] {
        top: clamp(-10px, -1.6vw, -4px);
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 110%;
    }
    .mvh__card {
        position: relative;
        right: auto; top: auto;
        transform: none;
        width: 100%;
        height: auto;
        margin-top: -54px;
    }
    .mvh__slides { height: auto; }
    .mvh__slide {
        position: relative;
        visibility: visible;
        opacity: 1;
        display: none;
    }
    .mvh__slide.is-active { display: flex; }
    .mvh__content {
        padding: clamp(134px, 35vw, 186px) 24px 40px;
        text-align: center;
    }
    .mvh__slide[data-slide="0"] .mvh__content {
        padding-top: clamp(160px, 43vw, 214px);
    }
    .mvh__slide[data-slide="3"] .mvh__content {
        padding-top: clamp(148px, 39vw, 198px);
    }
    .mvh__title { font-size: clamp(1.55rem, 6vw, 2.2rem); }
    .mvh__price, .mvh__specs { justify-content: center; }
    .mvh__nav { top: clamp(168px, 38vw, 222px); width: 50px; height: 50px; }
    .mvh__nav svg { width: 19px; height: 19px; }
    .mvh__nav--prev { left: 4px; }
    .mvh__nav--next { right: 4px; }
    .mvh__dots { position: relative; bottom: auto; margin-top: 20px; }
}

@media (max-width: 520px) {
    .mvh { padding-inline: 14px; }
    .mvh__content { padding: clamp(126px, 38vw, 168px) 16px 34px; }
    .mvh__product {
        top: 0;
        left: 50%;
        width: 124%;
        height: clamp(360px, 94vw, 430px);
    }
    .mvh__product-img[data-slide="0"] {
        top: clamp(26px, 7.5vw, 40px);
        left: 0;
        width: 100%;
        height: 112%;
    }
    .mvh__product-img[data-slide="3"] {
        top: clamp(-18px, -3vw, -8px);
        left: 0;
        width: 100%;
        height: 114%;
    }
    .mvh__slide[data-slide="0"] .mvh__content {
        padding-top: clamp(168px, 48vw, 204px);
    }
    .mvh__slide[data-slide="3"] .mvh__content {
        padding-top: clamp(152px, 42vw, 188px);
    }
    .mvh__nav {
        top: clamp(174px, 48vw, 212px);
    }
    .mvh__cta { width: 100%; max-width: 320px; justify-content: center; }
}