/* ===== Presets de tipografia por classe no ===== */
html.tipografia-classico{
--fonte-titulo: "Playfair Display", serif;
--fonte-texto: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html.tipografia-moderno{
--fonte-titulo: Lora, serif;
--fonte-texto: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html.tipografia-sistema{
--fonte-titulo: Georgia, "Times New Roman", Times, serif;
--fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Estilo minimalista e elegante; personalize via :root vars */
:root{
--cor-primaria: #9b59b6;
--cor-secundaria: #f4f0fa;
--texto: #2c2c2c;
--bg: #ffffff;
}
*{box-sizing:border-box}
body{
margin:0;
font-family: var(--fonte-texto);
color:var(--texto);
background:var(--bg);
}
header{
padding:24px 16px;
display:flex;
align-items:center;
gap:12px;
border-bottom:1px solid #eee;
background:#fff;
position:sticky; top:0; z-index:10;
}
header img.logo{height:40px;width:auto;border-radius:8px}
header .title{
font-family: var(--fonte-titulo);
font-weight:700;font-size:20px
}
.container{max-width:1080px;margin:0 auto;padding:16px}
.card{border:1px solid #eee;border-radius:16px;padding:16px;background:#fff}
.btn{display:inline-block;background:var(--cor-primaria);color:#fff;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:600}
.btn:hover{filter:brightness(0.95)}
.notice{padding:12px 14px;background:#f8f9fb;border:1px solid #e8eaef;border-radius:12px;margin:12px 0;color:#333}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.gallery img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid #eee}
/* ======= NOVO LAYOUT DA HOME ======= */
.section{padding:56px 0}
.section.alt{background:var(--cor-secundaria)}
.hero2{display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px;align-items:center;padding:24px 0}
.kicker{letter-spacing:.08em;text-transform:uppercase;color:#666;font-size:12px}
.headline{font-family: var(--fonte-titulo); font-size:40px;line-height:1.1;margin:8px 0 12px}
.subhead{font-size:18px;color:#444}
.cta-row{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
.badges{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.badge{padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #eee;color:#333;font-size:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card.service{border:1px solid #ece8ff}
.card .icon{font-size:28px}
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.quote{font-style:italic;color:#333}
.quote::before{content:'“';font-size:24px;margin-right:4px;color:#888}
.quote::after{content:'”';font-size:24px;margin-left:4px;color:#888}
.avatar{width:36px;height:36px;border-radius:999px;background:#ddd;display:inline-block;margin-right:8px;vertical-align:middle}
.cta-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border:1px dashed #cdb7ff;border-radius:16px;background:linear-gradient(180deg, #fff, #f8f5ff)}
.cta-banner .left{max-width:700px}
.cta-banner strong{color:#2a1856}
footer{margin-top:40px;border-top:1px solid #eee;padding:16px;color:#666}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact .card{min-height:120px}
@media(max-width:880px){
.hero2{grid-template-columns:1fr}
.headline{font-size:32px}
.contact{grid-template-columns:1fr}
}
/* ====== Ícones dos serviços (destaque) ====== */
.card.service .svc-icon{
width:64px; height:64px; border-radius:14px;
display:flex; align-items:center; justify-content:center;
border:1px solid #ece8ff; background:#fff; margin-bottom:8px;
}
.card.service .svc-icon img{
width:42px; height:42px; object-fit:contain; display:block;
}
/* (já existia) cards “genéricos”: mantido para fallback por emoji */
.card .icon{font-size:28px}
/* ====== Grid do seletor de ícones no painel ====== */
/* (se você copiou o inline do aparencia.php, isso reforça globalmente, opcional) */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(84px,1fr));gap:10px}
.icon-opt{border:1px solid #eee;border-radius:10px;padding:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff}
.icon-opt img{width:48px;height:48px;object-fit:contain}
.icon-opt.active{outline:2px solid var(--cor-primaria); border-color:var(--cor-primaria);}
/* ... seu CSS existente ... */
/* Ícone via mask – herda cor do tema */
.svc-icon{
display:inline-block;
background-color: var(--cor-primaria);
width: 40px; height: 40px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.svc-icon-lg{ width:40px; height:40px; } /* maior na Home */
/* Cards de serviço: um pouco mais de respiro p/ ícone grande */
.card.service { border:1px solid #ece8ff; padding-top:20px; }
.card.service h3 { margin-top:10px; }
/* Modal do seletor de ícones — (mantém o que já injetei inline no aparencia.php se quiser mover pra cá) */
.icon-picker-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:9999}
.icon-picker{background:#fff;border-radius:16px;max-width:800px;width:95%;padding:16px;border:1px solid #eee;box-shadow:0 20px 50px rgba(0,0,0,.12)}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;max-height:60vh;overflow:auto;border:1px solid #eee;border-radius:12px;padding:10px}
.icon-item{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid #eee;border-radius:12px;padding:10px;cursor:pointer;user-select:none}
.icon-item:hover{border-color:var(--cor-primaria)}
.icon-item .box{width:48px;height:48px;background:var(--cor-primaria);-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-position:center;mask-repeat:no-repeat}
.icon-search{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;margin-bottom:12px}
.icon-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.icon-name{font-size:11px;color:#666;word-break:break-all;text-align:center}
.btn-ghost{background:#f5f5f5;color:#333}
.inline-icon-preview{display:inline-flex;align-items:center;gap:8px}
.inline-icon-preview .box{width:28px;height:28px;background:var(--cor-primaria);-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-position:center;mask-repeat:no-repeat;border:1px solid #eee;border-radius:8px}