/* refine.css — FireBIM (2026-09-29): famílias reais do template + comunidade em mock de celular.
   Hero intocado. */

/* —— Catálogo do template: imagem panorâmica inteira, sem corte —— */
.template-catalog { aspect-ratio: auto; align-self: center; background: #fff; padding: 14px; }
.template-catalog::after { display: none; }
.template-catalog img.real { position: static; width: 100%; height: auto; object-fit: contain; display: block; }

/* —— Famílias reais (substitui os mini-ícones) —— */
.fb-sys { padding: 28px 40px 36px; border-top: 1px solid rgba(255,107,0,.22); }
.fb-sys-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; }
.fb-sys-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fire-soft); }
.fb-sys-note { font-size: 13px; color: var(--t-3, rgba(255,255,255,.55)); }
.fb-sys-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.fb-sys-card { margin: 0; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,107,0,.22); }
.fb-sys-card picture { display: block; aspect-ratio: 1; background: #fff; }
.fb-sys-card img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }
.fb-sys-card figcaption { padding: 9px 8px; text-align: center; font-family: var(--mono); font-size: 10.5px; line-height: 1.3;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fire-soft); }
.fb-sys-more { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; padding: 14px; border-radius: 12px; text-align: center;
  background: repeating-linear-gradient(135deg, rgba(255,107,0,.06) 0 10px, transparent 10px 20px); border: 1px dashed rgba(255,107,0,.35); }
.fb-sys-more b { width: 100%; font-size: 13px; color: #fff; margin-bottom: 4px; }
.fb-sys-more span { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--fire-soft);
  padding: 4px 7px; border-radius: 999px; border: 1px solid rgba(255,107,0,.3); }
@media (max-width: 980px) { .fb-sys-grid { grid-template-columns: repeat(4, 1fr); } .fb-sys-more { grid-column: span 3; } }
@media (max-width: 880px) { .fb-sys { padding: 22px 22px 28px; } .fb-sys-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .fb-sys-more { grid-column: 1 / -1; } }
@media (max-width: 480px) { .fb-sys-card figcaption { font-size: 9px; padding: 7px 4px; letter-spacing: .03em; } }

/* —— Comunidade: celular com o print dividido —— */
.community-img.fb-phone-wrap { aspect-ratio: auto; background: none; border: 0; padding: 0; overflow: visible; display: flex; justify-content: center; }
.rf-phone { position: relative; width: 290px; max-width: 82vw; aspect-ratio: 9 / 17.5; padding: 12px; border-radius: 46px;
  background: linear-gradient(145deg, #2a2a2a, #0c0c0c); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 2px #050505, 0 40px 80px -35px rgba(0,0,0,.95), 0 0 60px -20px rgba(255,107,0,.35), inset 0 0 0 1px rgba(255,255,255,.06); }
.rf-phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; border-radius: 999px; background: #000; z-index: 2; }
.rf-phone-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; background: #161817; }
.rf-phone-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 10px; font-size: 12px; font-weight: 600; color: #e9edef; background: #161817; }
.rf-phone-icons { display: inline-flex; gap: 4px; }
.rf-phone-icons i { display: block; width: 14px; height: 8px; border-radius: 2px; background: rgba(233,237,239,.8); }
.rf-phone-icons i:first-child { width: 10px; } .rf-phone-icons i:last-child { width: 18px; }
.rf-wa-head img, .rf-wa-chat img { display: block; width: 100%; height: auto; object-fit: initial; }
.rf-phone-fill { flex: 1; min-height: 40px; display: flex; justify-content: center; align-items: flex-start; padding-top: 14px;
  background: #161817 radial-gradient(circle at 30% 40%, rgba(255,255,255,.035) 0 1.5px, transparent 2.5px) 0 0 / 22px 22px; }
.rf-wa-day { font-size: 10.5px; color: #8696a0; background: #232625; padding: 4px 10px; border-radius: 8px; }
.rf-phone-bar { padding: 10px 12px 18px; background: #161817; }
.rf-phone-bar span { display: block; height: 34px; border-radius: 999px; background: #232625; }
@media (max-width: 480px) { .rf-phone { width: 260px; } }
/* neutraliza as regras genéricas de .community-img img/picture (posição absoluta) dentro do celular */
.community-img.fb-phone-wrap picture,
.community-img.fb-phone-wrap img { position: static; inset: auto; width: 100%; height: auto; object-fit: initial; z-index: auto; display: block; }