/* ========================================================= artigos (PÁGINAS DE CIDADES) — 100% ISOLADO Requisito: ========================================================= */ body.artigos{ padding-top: 120px; background: #f3f3f3; color: #111; font-family: Arial, Helvetica, sans-serif; } /* ===== HERO DESKTOP ===== */ body.artigos .hero{ max-width: 1400px; margin: 40px auto; background: #fff; border-radius: 20px; padding: 60px; box-sizing: border-box; } body.artigos .hero-text{ width: 100%; min-width: 0; } body.artigos .hero-text h1{ font-size: 32px; line-height: 1.2; margin: 0 0 20px 0; } body.artigos .hero-text h2{ margin: 0 0 16px 0; } body.artigos .linha1{ display: block; font-size: clamp(26px, 3.2vw, 56px); } body.artigos .cidade{ font-weight: 800; } body.artigos .hero-text p{ font-size: 18px; color: #555; line-height: 1.6; } /* ===== RESPONSIVO ===== */ @media (max-width: 768px){ body.artigos .hero{ padding: 30px 20px; } body.artigos .hero-text{ width: 100%; } body.artigos .hero-text h1{ font-size: 32px; } } /* ===== LISTA (UL/LI) ===== */ body.artigos .hero-text ul{ margin: 20px 0; padding-left: 22px; line-height: 1.6; } body.artigos .hero-text li{ margin-bottom: 10px; font-size: 18px; color: #555; } /* ===== SERVIÇOS ===== */ body.artigos .servicos{ max-width: 1400px; margin: 40px auto; padding: 60px; box-sizing: border-box; } body.artigos .servicos h2{ margin: 0 0 40px 0; font-size: 34px; text-align: center; } body.artigos .servicos-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } body.artigos .servico{ background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } body.artigos .servico:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); } body.artigos .servico img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; display: block; } body.artigos .servico p{ margin: 14px 0 0 0; font-weight: 600; font-size: 16px; text-align: center; } /* ===== HERO TOPO ===== */ body.artigos .hero-topo{ align-items: center; } body.artigos .hero-topo .hero-text{ width: 100%; } body.artigos .hero-topo .hero-text h1{ font-size: clamp(42px, 3vw, 56px); white-space: nowrap; } /* ===== REGIÕES DE ATENDIMENTO ===== */ body.artigos .area-atendimento{ max-width: 1400px; margin: 80px auto 40px auto; background: #fff; border-radius: 20px; padding: 60px; box-sizing: border-box; } body.artigos .area-atendimento h2{ text-align: center; font-size: 30px; line-height: 1.2; margin: 0 0 20px 0; color: #111; } body.artigos .area-atendimento .intro{ text-align: center; max-width: 900px; margin: 0 auto 50px auto; font-size: 18px; color: #555; line-height: 1.6; } body.artigos .regioes-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } body.artigos .regiao-card{ background: #fafafa; border: 1px solid #ececec; border-radius: 18px; padding: 35px; transition: transform 0.25s ease, box-shadow 0.25s ease; } body.artigos .regiao-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); } body.artigos .regiao-card h3{ margin: 0 0 18px 0; font-size: 26px; color: #111; } body.artigos .regiao-card p{ margin: 0; color: #555; line-height: 1.8; } @media (max-width: 768px){ body.artigos .area-atendimento{ padding: 30px 20px; } body.artigos .area-atendimento h2{ font-size: 28px; } body.artigos .regiao-card{ padding: 25px; } body.artigos .regiao-card h3{ font-size: 22px; } }