/* ============================================================
   TecnoTip — Produtos e Projetos
   Depende de landing.css (variáveis --tt-*, .tt-btn, .tt-gradient-text,
   .tt-tech-bg, .tt-tech-orb, .tt-kicker)
   ============================================================ */

/* ---------- Hero ---------- */
.tp-hero {
    position: relative;
    padding: clamp(120px, 16vw, 170px) 0 clamp(70px, 9vw, 110px);
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(60% 60% at 75% 10%, rgba(255,107,0,0.16), transparent 60%),
        radial-gradient(55% 55% at 15% 90%, rgba(255,107,0,0.10), transparent 60%),
        linear-gradient(180deg, #05050a, #0b0c15 85%);
}
.tp-hero .container { position: relative; z-index: 2; }
.tp-hero h1 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); font-weight: 700; margin-bottom: 1rem; }
.tp-hero p { color: var(--tt-muted); max-width: 640px; margin: 0 auto; font-size: clamp(1rem, 1.6vw, 1.2rem); }

/* ---------- Filtro / busca ---------- */
.tp-filter-wrap {
    position: sticky; top: 0; z-index: 40;
    background: rgba(7,7,12,0.86);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tt-border);
    padding: 14px 0;
}
.tp-filter-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tp-search { position: relative; flex: 1 1 260px; min-width: 220px; }
.tp-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tt-muted); }
.tp-search input {
    width: 100%; padding: .8rem 1rem .8rem 2.6rem; border-radius: 999px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--tt-border); color: var(--tt-text);
    font-family: 'Poppins', sans-serif; font-size: .95rem; outline: none;
    transition: border-color .25s, background .25s;
}
.tp-search input::placeholder { color: var(--tt-muted); }
.tp-search input:focus { border-color: var(--tt-orange); background: rgba(255,107,0,0.06); }
.tp-search .tp-clear {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.08);
    color: var(--tt-muted); display: none; place-items: center; cursor: pointer;
}
.tp-search.has-value .tp-clear { display: grid; }

.tp-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.tp-chip {
    padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--tt-border);
    background: rgba(255,255,255,0.03); color: var(--tt-muted);
    font-size: .82rem; font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: all .2s;
}
.tp-chip:hover { border-color: rgba(255,107,0,0.4); color: var(--tt-text); }
.tp-chip.active {
    background: linear-gradient(100deg, var(--tt-orange), var(--tt-orange-2));
    border-color: transparent; color: #100a04;
}
.tp-count { color: var(--tt-muted); font-size: .82rem; white-space: nowrap; }

/* ---------- Grid de produtos ---------- */
.tp-grid-section { padding: clamp(50px, 7vw, 90px) 0 clamp(90px, 10vw, 140px); }
.tp-empty { display: none; text-align: center; padding: 4rem 1rem; color: var(--tt-muted); }
.tp-empty.show { display: block; }
.tp-empty i { font-size: 2.4rem; color: var(--tt-orange); margin-bottom: 1rem; display: block; }

.tp-list { display: flex; flex-direction: column; gap: 1.4rem; max-width: 980px; margin: 0 auto; }

.tp-card {
    position: relative;
    display: flex; align-items: flex-start; gap: clamp(1.4rem, 3vw, 2.2rem);
    background: var(--tt-bg-3); border: 1px solid var(--tt-border); border-radius: 22px;
    overflow: hidden; padding: clamp(1.6rem, 3vw, 2.2rem);
    transition: transform .3s, border-color .3s, box-shadow .3s;
}
.tp-card:hover { transform: translateY(-4px); border-color: rgba(255,107,0,0.35); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6); }

.tp-media {
    position: relative; flex: 0 0 auto;
    width: 112px; height: 112px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,107,0,0.16), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,107,0,0.2);
    display: grid; place-items: center; overflow: hidden;
}
.tp-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; display: block; }
.tp-media > i { font-size: 2.4rem; color: var(--tt-orange); }
.tp-media.has-logo > i { display: none; }

.tp-badge {
    display: inline-block; margin-bottom: .6rem;
    padding: .3rem .75rem; border-radius: 999px; font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    background: rgba(255,107,0,0.1); border: 1px solid rgba(255,107,0,0.3); color: var(--tt-orange-2);
}

.tp-body { flex: 1 1 auto; min-width: 0; }
.tp-name { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 700; margin-bottom: .4rem; }
.tp-tagline { color: var(--tt-orange-2); font-weight: 600; font-size: .95rem; margin-bottom: 1rem; }
.tp-desc { color: var(--tt-muted); font-size: .96rem; margin-bottom: 1.3rem; }

.tp-benefits { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.tp-benefits li { display: flex; align-items: flex-start; gap: .65rem; font-size: .92rem; color: var(--tt-text); }
.tp-benefits li i { color: var(--tt-orange); margin-top: .2rem; flex: 0 0 auto; }

.tp-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; }
.tp-tags span {
    font-size: .72rem; padding: .3rem .65rem; border-radius: 8px;
    background: rgba(255,255,255,0.05); color: var(--tt-muted); border: 1px solid var(--tt-border);
}

.tp-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

@media (max-width: 575.98px) {
    .tp-card { flex-direction: column; align-items: flex-start; }
    .tp-media { width: 84px; height: 84px; border-radius: 16px; }
    .tp-media > i { font-size: 1.9rem; }
}
@media (max-width: 767.98px) {
    .tp-filter-inner { flex-direction: column; align-items: stretch; }
    .tp-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .3rem; }
}

/* ---------- Fade-in genérico via IntersectionObserver ---------- */
.tp-card[data-tp-hidden] { display: none; }