/* Extras da página Componentes Eletrônicos (carregado depois do main.css) */
/* ─── PÁGINA COMPONENTES ──────────────────── */
#servicos  { background: var(--bg2); }
#quem-somos{ background: var(--bg); }
#segmentos { background: var(--bg2); }
#marcas    { background: var(--bg); }
#processo  { background: var(--bg2); }
#clientes  { background: var(--bg); }
#servicos .services-grid { grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
@media (max-width:400px) { #servicos .services-grid { grid-template-columns:1fr; } }

.hero-product {
    position:relative; justify-self:center; width:100%; max-width:420px;
    background:#fff; border-radius:18px; padding:1rem;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 20px 50px rgba(0,0,0,.5);
    animation: fadeUp .7s .3s ease both;
}
.hero-product img { display:block; width:100%; height:auto; border-radius:10px; }
.hero-product .hero-photo-tag { position:static; margin-top:.85rem; justify-content:center; }
@media (min-width:961px) { .hero-product { justify-self:end; } }

.about-grid {
    display:grid; grid-template-columns:1.1fr .9fr;
    gap:3.5rem; align-items:center;
}
.about-text p { color:var(--muted); font-size:1rem; line-height:1.8; margin-bottom:1rem; }
.about-text p strong { color:var(--text); }
.why-card {
    background:var(--bg2); border:1px solid var(--border);
    border-radius:18px; padding:2.25rem; box-shadow:var(--sh-sm);
}
.why-card h3 { font-size:1.2rem; font-weight:800; color:var(--text); margin-bottom:1.25rem; }
.why-list { list-style:none; display:flex; flex-direction:column; gap:.9rem; }
.why-list li { display:flex; align-items:center; gap:.85rem; color:var(--text); font-size:.95rem; font-weight:500; }
.why-list i {
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    background:var(--blue); color:#fff; font-size:.75rem;
    display:flex; align-items:center; justify-content:center;
}

.seg-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:1.1rem; margin-top:3rem;
}
.seg-card {
    text-align:center; background:var(--bg2);
    border:1px solid var(--border); border-radius:16px;
    padding:1.75rem 1rem; box-shadow:var(--sh-sm); transition:all .3s;
}
.seg-card:hover { border-color:#c3d4ea; box-shadow:var(--sh); transform:translateY(-5px); }
.seg-card .svc-icon { margin:0 auto 1rem; }
.seg-card h4 { font-size:.95rem; font-weight:700; color:var(--text); line-height:1.4; }

@media (max-width:900px) {
    .about-grid { grid-template-columns:1fr; gap:2.5rem; }
}