/* ============================================
   FIRECODING - ESTILOS BASE COMPARTILHADOS
   ============================================ */
:root {
    --bg:          #0d1117;
    --surface:     #161b22;
    --surface2:    #1c2128;
    --border:      #30363d;
    --border-fire: rgba(255, 87, 34, 0.3);
    --orange:      #ff5722;
    --orange-dark: #e64a19;
    --orange-glow: rgba(255, 87, 34, 0.2);
    --text:        #c9d1d9;
    --text-muted:  #8b949e;
    --heading:     #f0f6fc;
    --white:       #ffffff;
    --green:       #2ea44f;
    --radius:      16px;
    --transition:  0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; font-family:'Inter','Segoe UI',Roboto,sans-serif; }
html { scroll-behavior: smooth; }
body { background-color:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }

/* ---- SCROLL REVEAL ---- */
.sr-init {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.sr-init.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- HEADER ---- */
header {
    background-color: rgba(22,27,34,0.98);
    padding: 0 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-fire);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(12px);
    height: 90px;
    overflow: visible;
    transition: box-shadow 0.3s ease;
}
header.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.5); }

.logo { display:flex; align-self:center; }
.logo-img {
    height: 200px; width:auto; object-fit:contain;
    filter: drop-shadow(0 0 8px rgba(255,87,34,0.4));
    transition: transform 0.3s ease;
}
.logo-img:hover { transform: scale(1.05); }

nav ul { display:flex; list-style:none; }
nav ul li { margin-left:35px; }
nav ul li a {
    color: var(--text); text-decoration:none; font-weight:600;
    font-size:1rem; transition:0.3s; text-transform:uppercase; letter-spacing:1px;
}
nav ul li a:hover, nav ul li a.nav-ativo { color:var(--orange); }

/* ---- SECTION TITLE ---- */
.section-title {
    text-align: center;
    margin-bottom: 60px;
}
.section-title h2 {
    font-size: 2.5rem;
    color: var(--white);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
}
.section-title p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}
.section-title .tag-label {
    display: inline-block;
    background: rgba(255,87,34,0.1);
    border: 1px solid var(--border-fire);
    color: var(--orange);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

/* ---- BOTÕES ---- */
.btn-principal {
    background-color: var(--orange); color:white;
    padding:18px 45px; border:none; border-radius:8px;
    font-size:1.1rem; font-weight:bold; text-decoration:none;
    cursor:pointer; transition: var(--transition); display:inline-block;
    box-shadow: 0 10px 20px var(--orange-glow);
}
.btn-principal:hover {
    background-color: var(--orange-dark);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255,87,34,0.4);
}
.btn-outline {
    background-color: transparent; color:var(--orange);
    padding:16px 40px; border:2px solid var(--orange); border-radius:8px;
    font-size:1rem; font-weight:bold; text-decoration:none;
    cursor:pointer; transition: var(--transition); display:inline-block;
}
.btn-outline:hover {
    background-color: rgba(255,87,34,0.1);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px var(--orange-glow);
}
.btn-app {
    background-color:transparent; color:var(--orange);
    padding:18px 45px; border:2px solid var(--orange); border-radius:8px;
    font-size:1.1rem; font-weight:bold; text-decoration:none;
    cursor:pointer; transition: var(--transition);
    display:inline-flex; align-items:center; gap:10px;
}
.btn-app:hover {
    background-color: rgba(255,87,34,0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--orange-glow);
}

/* ---- HAMBÚRGUER ---- */
.menu-hamburguer {
    display:none; flex-direction:column; gap:5px;
    cursor:pointer; padding:8px; border-radius:8px;
    transition:background 0.3s; z-index:1100;
}
.menu-hamburguer:hover { background:rgba(255,87,34,0.1); }
.menu-hamburguer span {
    display:block; width:26px; height:3px;
    background-color:var(--orange); border-radius:3px; transition:0.4s ease;
}
.menu-hamburguer.ativo span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.menu-hamburguer.ativo span:nth-child(2) { opacity:0; }
.menu-hamburguer.ativo span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

.nav-mobile {
    display:none; position:fixed; top:70px; left:0; right:0;
    background:rgba(22,27,34,0.99); border-bottom:2px solid rgba(255,87,34,0.4);
    backdrop-filter:blur(16px); z-index:999; padding:20px 5%;
    flex-direction:column; gap:12px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.nav-mobile.aberto { display:flex; }
.nav-mobile a {
    display:flex; align-items:center; gap:12px; padding:14px 20px;
    border-radius:10px; text-decoration:none; font-weight:700;
    font-size:1rem; text-transform:uppercase; letter-spacing:1px;
    transition:0.3s; border:1px solid transparent;
}
.nav-mobile a i { font-size:1.1rem; width:20px; text-align:center; }
.nav-mobile a.btn-nav-inicio,
.nav-mobile a.btn-nav-catalogo,
.nav-mobile a.btn-nav-servicos { color:var(--text); border-color:var(--border); }
.nav-mobile a.btn-nav-inicio:hover,
.nav-mobile a.btn-nav-catalogo:hover,
.nav-mobile a.btn-nav-servicos:hover { color:var(--orange); border-color:var(--orange); background:rgba(255,87,34,0.08); }
.nav-mobile a.btn-nav-orcamento {
    color:#fff; background:var(--orange); border-color:var(--orange);
    box-shadow:0 4px 15px rgba(255,87,34,0.35);
}
.nav-mobile a.btn-nav-orcamento:hover {
    background:var(--orange-dark); box-shadow:0 6px 20px rgba(255,87,34,0.5); transform:translateY(-2px);
}

/* ---- FAB ---- */
.fab-container { position:fixed; bottom:30px; right:30px; z-index:1000; display:flex; flex-direction:column; align-items:flex-end; }
.fab-items { display:flex; flex-direction:column; align-items:flex-end; gap:14px; margin-bottom:16px; }
.fab-item {
    display:flex; align-items:center; gap:12px;
    opacity:0; visibility:hidden; transform:translateY(20px) scale(0.85);
    transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events:none; text-decoration:none;
}
.fab-container.aberto .fab-item { opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:all; }
.fab-container.aberto .fab-item:nth-child(3) { transition-delay:0.05s; }
.fab-container.aberto .fab-item:nth-child(2) { transition-delay:0.12s; }
.fab-container.aberto .fab-item:nth-child(1) { transition-delay:0.19s; }
.fab-item-label {
    background:rgba(22,27,34,0.97); color:var(--heading); padding:7px 14px;
    border-radius:20px; font-size:0.85rem; font-weight:600; white-space:nowrap;
    border:1px solid var(--border); box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.fab-item-btn { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 15px rgba(0,0,0,0.35); transition:transform 0.3s; flex-shrink:0; }
.fab-item-btn:hover { transform:scale(1.12); }
.fab-item-btn img { width:26px; }
.fab-item-btn i { font-size:1.3rem; color:white; }
.fab-whatsapp  { background:linear-gradient(135deg,#25d366,#128c7e); box-shadow:0 5px 15px rgba(37,211,102,0.4); }
.fab-instagram { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); box-shadow:0 5px 15px rgba(220,39,67,0.4); }
.fab-catalogo  { background:linear-gradient(135deg,#ff5722,#e64a19); box-shadow:0 5px 15px rgba(255,87,34,0.4); }
.fab-main {
    width:50px; height:50px; border-radius:50%;
    background:linear-gradient(135deg,#ff5722,#e64a19); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(255,87,34,0.5);
    transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275),box-shadow 0.3s; position:relative; z-index:2;
}
.fab-main .fab-icon-open { font-size:1.3rem; color:white; transition:transform 0.4s,opacity 0.3s; }
.fab-main .fab-icon-close { position:absolute; font-size:1.3rem; color:white; opacity:0; transform:rotate(-90deg) scale(0); transition:transform 0.4s,opacity 0.3s; }
.fab-container.aberto .fab-main .fab-icon-open { opacity:0; transform:rotate(90deg) scale(0); }
.fab-container.aberto .fab-icon-close { opacity:1; transform:rotate(0deg) scale(1); }
.fab-main:hover { transform:scale(1.1); box-shadow:0 10px 28px rgba(255,87,34,0.65); }

/* ---- FOOTER ---- */
footer { padding:80px 8% 40px; text-align:center; border-top:1px solid var(--border); color:var(--text-muted); font-size:0.95rem; }

/* ---- PAGE HERO (páginas internas) ---- */
.page-hero {
    padding: 100px 8% 80px; text-align:center;
    background-color: var(--bg);
    background-image: radial-gradient(circle at center, rgba(255,87,34,0.08) 0%, rgba(13,17,23,1) 70%);
    border-bottom: 1px solid rgba(48,54,61,0.5);
}
.page-hero h1 { font-size:3rem; color:var(--white); font-weight:800; letter-spacing:-1px; margin-bottom:20px; }
.page-hero p { font-size:1.2rem; color:var(--text-muted); max-width:600px; margin:0 auto; }

/* ---- RESPONSIVIDADE ---- */
@media (max-width: 768px) {
    header { padding:0 5%; height:64px; overflow:visible; }
    .logo-img { height:50px; }
    nav ul { display:none; }
    .menu-hamburguer { display:flex; }
    .page-hero h1 { font-size:2.2rem; }
    .section-title h2 { font-size:2rem; }
}