/* ==========================================================================
   PRODUTOS.PHP — Módulo 1 (Vitrine/Filtro) + Módulo 2 (Abas/Raio-X/Fluxo)
   ========================================================================== */

.catalog-hero { padding: 64px 0 40px; border-bottom: 1px solid var(--color-border); }
.catalog-hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); max-width: 680px; }
.catalog-hero p { max-width: 560px; font-size: 1.05rem; }

/* --- Filtro assíncrono --- */
.filter-bar { display: flex; gap: 10px; padding: 32px 0 8px; flex-wrap: wrap; }
.filter-btn {
  font-family: var(--font-display); font-size: .88rem; font-weight: 600;
  padding: 11px 22px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border); color: var(--color-text-body);
  transition: all var(--transition-base);
}
.filter-btn:hover { border-color: var(--color-brand); color: var(--color-brand); background: var(--badge-blue-bg); }
.filter-btn.is-active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; box-shadow: 0 6px 16px rgba(0,131,203,.28); }
.dark-theme .filter-btn.is-active { color: #0B1013; box-shadow: var(--glow-neon); }

/* --- Grid de cards --- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 32px 0 88px; }
.product-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-elevated); }
.product-card.is-filtered-out { opacity: 0; transform: scale(.94); pointer-events: none; position: absolute; }

.product-card-media {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--badge-blue-bg), var(--color-bg-alt) 72%);
}
.product-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform var(--transition-base); z-index: 1; }
.product-card:hover .product-card-media img { transform: scale(1.04); }
.product-card-media .media-placeholder {
  position: absolute; inset: 0; z-index: 1; display: none; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted);
}
.product-card-media .media-placeholder svg { width: 30px; height: 30px; margin-bottom: 8px; opacity: .45; }

.category-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.94); color: #16191D; box-shadow: 0 2px 8px rgba(20,30,45,.1);
}

.product-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-card-body h3 { font-size: 1.15rem; margin: 0; }
.product-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.product-card-meta span { font-family: var(--font-mono); font-size: .76rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 5px; }
.product-card-meta svg { width: 13px; height: 13px; color: var(--color-brand); }

.product-card-cta {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: .88rem; font-weight: 600; color: var(--color-brand);
  overflow: hidden; height: 0; opacity: 0;
  transition: height var(--transition-base), opacity var(--transition-base), transform var(--transition-base);
  transform: translateY(10px);
}
.product-card:hover .product-card-cta, .product-card:focus-within .product-card-cta { height: 22px; opacity: 1; transform: translateY(0); }
.product-card-cta svg { width: 16px; height: 16px; transition: transform var(--transition-base); }
.product-card:hover .product-card-cta svg { transform: translateX(4px); }

/* --- Abas de produto (Módulo 2) --- */
.tabs-section { padding: 0 0 96px; border-top: 1px solid var(--color-border); scroll-margin-top: 100px; }
.tabs-nav { display: flex; gap: 8px; overflow-x: auto; padding: 32px 0 24px; scrollbar-width: thin; }
.tabs-nav::-webkit-scrollbar { height: 4px; }
.tabs-nav::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
.tab-pill {
  flex-shrink: 0; font-family: var(--font-mono); font-size: .8rem;
  padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  color: var(--color-text-muted); transition: all var(--transition-base); white-space: nowrap;
}
.tab-pill:hover { color: var(--color-text-heading); border-color: var(--color-accent); }
.tab-pill.is-active { background: var(--color-text-heading); color: var(--color-bg); border-color: var(--color-text-heading); }
.dark-theme .tab-pill.is-active { background: var(--color-accent-cyan); color: #0B1013; border-color: var(--color-accent-cyan); box-shadow: var(--glow-neon); }

.tab-panel {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 40px; box-shadow: var(--shadow-card);
}

/* --- Estágio Raio-X ---
   A foto real fica sempre visível. No hover, ela escurece um pouco e o
   esquemático (mix-blend-mode: screen) "acende" por cima, como um raio-x de
   verdade — não é uma troca de cena, é uma sobreposição holográfica. */
.xray-stage { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: #0B1013; cursor: crosshair; }
.xray-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .4s ease; z-index: 2; }
.xray-photo-placeholder {
  position: absolute; inset: 0; z-index: 2; transition: opacity .4s ease; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(circle at 50% 40%, #1B2833, #0B1013 75%);
  font-family: var(--font-mono); font-size: .72rem; color: #7C8790; text-align: center; padding: 24px;
}
.xray-photo-placeholder svg { width: 40px; height: 40px; opacity: .5; color: var(--color-accent-cyan); }
.xray-schematic {
  position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity .4s ease;
  mix-blend-mode: screen; pointer-events: none;
}
.xray-schematic svg { width: 100%; height: 100%; }
.xray-stage:hover .xray-photo { opacity: .45; }
.xray-stage:hover .xray-photo-placeholder { opacity: .1; }
.xray-stage:hover .xray-schematic { opacity: 1; }
.xray-caption {
  position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 5;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.7); pointer-events: none;
}

/* --- Simulador de fluxo de ar (setas animadas) ---
   O ícone de seta (af_flow_arrow_svg) aponta para a DIREITA por padrão.
   Cada classe abaixo faz apenas dois ajustes: a posição de entrada/saída
   e a rotação necessária para a seta apontar na direção do movimento —
   nunca os dois descoordenados, que era o bug das setas "desgovernadas". */
.flow-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .3s ease .1s; }
.xray-stage:hover .flow-layer { opacity: .95; }
.flow-arrow { position: absolute; width: 32px; height: 15px; filter: drop-shadow(0 0 5px currentColor); animation-play-state: paused; }
.xray-stage:hover .flow-arrow { animation-play-state: running; }
.flow-arrow svg { width: 100%; height: 100%; display: block; }

/* Ar quente entrando pelas laterais (climatizador) */
.flow-arrow.in-left  { top: 28%; left: -10%;  color: var(--color-flow-hot); transform: rotate(0deg); animation: flow-in-left 2.6s linear infinite; }
.flow-arrow.in-left.d2 { top: 64%; animation-delay: .9s; }
.flow-arrow.in-right { top: 34%; right: -10%; color: var(--color-flow-hot); transform: rotate(180deg); animation: flow-in-right 2.6s linear infinite; }
.flow-arrow.in-right.d2 { top: 70%; animation-delay: 1.1s; }

/* Ar frio saindo pela frente (climatizador) */
.flow-arrow.out-front { bottom: -10%; left: 50%; color: var(--color-flow-cold); transform: translateX(-50%) rotate(90deg); animation: flow-out 2.4s ease-in infinite; }
.flow-arrow.out-front.d2 { left: 35%; animation-delay: .6s; }
.flow-arrow.out-front.d3 { left: 65%; animation-delay: 1.2s; }

@keyframes flow-in-left { 0% { left: -12%; opacity: 0; } 18% { opacity: 1; } 100% { left: 42%; opacity: 0; } }
@keyframes flow-in-right { 0% { right: -12%; opacity: 0; } 18% { opacity: 1; } 100% { right: 42%; opacity: 0; } }
@keyframes flow-out { 0% { bottom: 34%; opacity: 0; } 20% { opacity: 1; } 100% { bottom: -16%; opacity: 0; } }

/* Exaustor: sem laterais — ar do ambiente é sugado (pressão negativa) para dentro,
   de baixo para cima, então a seta aponta para cima. */
[data-categoria="exaustores"] .flow-arrow.in-left,
[data-categoria="exaustores"] .flow-arrow.in-right { display: none; }
[data-categoria="exaustores"] .flow-arrow.out-front {
  color: var(--color-secondary); transform: translateX(-50%) rotate(-90deg); animation-name: flow-suction;
}
@keyframes flow-suction { 0% { bottom: -16%; opacity: 0; } 20% { opacity: 1; } 100% { bottom: 42%; opacity: 0; } }

/* Hélice: leve giro contínuo enquanto o Raio-X está visível (hover) */
.af-fan-blades { transform-box: fill-box; transform-origin: 50% 50%; }
.xray-stage:hover .af-fan-blades { animation: af-fan-spin 2.2s linear infinite; }
@keyframes af-fan-spin { to { transform: rotate(360deg); } }

/* --- Bloco de informações da aba --- */
.tab-info h3 { font-size: 1.6rem; margin-bottom: 4px; }
.tab-info .category-badge { margin-bottom: 16px; margin-right: 8px; }
.tab-info .recurso-badge { margin-bottom: 16px; color: var(--color-success-dark); border-color: var(--color-success); }

.specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 24px 0; }
.spec-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; background: var(--color-surface); box-shadow: var(--shadow-card); }
.spec-card .spec-label { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-top: 10px; }
.spec-card .spec-value { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--color-text-heading); margin: 2px 0; }
.spec-card .spec-desc { font-size: .8rem; color: var(--color-text-muted); }

@media (max-width: 980px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .tab-panel { grid-template-columns: 1fr; padding: 24px; }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; }
  .specs-grid { grid-template-columns: 1fr; }
}

/* Chamada para o Simulador + Economia (substitui a antiga calculadora inline) */
.calc-cta-section {
  padding: 80px 0; border-top: 1px solid var(--color-border);
  text-align: center;
}
.calc-cta-section .eyebrow { display: inline-block; }
.calc-cta-section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 6px; }