/* ========================= TOKENS (ajuste depois com os HEX oficiais) ========================= */ :root{ --inv-bg:#FFE9F0; /* fundo principal (use apenas em componentes, não no body) */ --inv-bg-strong:#FFD3DF; /* faixa/hero ao redor */ --inv-bg-soft:#FFF5F8; /* cartões suaves / banners */ --inv-card:#FFFFFF; /* cards */ --inv-text:#171717; /* texto principal */ --inv-muted:#6B6B6B; /* texto secundário */ --inv-primary:#E4006A; /* botão / links */ --inv-primary-2:#B10352; /* hover */ --inv-ring:#FFD3E2; /* bordas sutis */ --inv-radius:14px; --inv-shadow:0 8px 24px rgba(0,0,0,.06); } /* Tipografia base (não mexe no Elementor) */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; } /* IMPORTANTE: Este CSS é carregado globalmente pelo plugin. Para não "pintar" o site inteiro (efeito colateral no tema), evitamos setar background/texto/fonte no . Estilos ficam restritos aos componentes que usam classes "inv-". */ :where([class^="inv-"], [class*=" inv-"]){ color:var(--inv-text); font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Utilidades pequenas */ .inv-container{max-width:1120px; margin:0 auto} .inv-badge{ display:inline-block; background:var(--inv-bg-strong); color:var(--inv-primary); padding:.35rem .6rem; border-radius:999px; font-size:.8rem; font-weight:800; letter-spacing:.2px; } .inv-link{ color:var(--inv-primary); font-weight:700; text-decoration:none } .inv-link:hover{ text-decoration:underline } /* Botões */ .inv-btn{ display:inline-block; padding:.9rem 1.05rem; border-radius:999px; text-decoration:none; font-weight:800; text-align:center; border:0; cursor:pointer; transition:transform .06s ease, background .2s ease, box-shadow .2s ease; box-shadow:var(--inv-shadow) } .inv-btn--primary{ background:var(--inv-primary); color:#fff } .inv-btn--primary:hover{ background:var(--inv-primary-2); transform:translateY(-1px) } .inv-btn--ghost{ background:#fff; color:var(--inv-text); border:1px solid var(--inv-ring) } .inv-btn--ghost:hover{ background:#fff; transform:translateY(-1px) } /* ========================= HERO (imagem + cartão) ========================= */ .inv-hero{ display:grid; gap:12px; padding:16px 12px 8px; background:linear-gradient(180deg, var(--inv-bg-strong) 0%, var(--inv-bg-strong) 82%, transparent 82%); } .inv-hero__img{ width:100%; height:210px; background:#eee center/cover no-repeat; border-radius:12px; } .inv-hero__card{ background:var(--inv-card); border-radius:var(--inv-radius); padding:16px; box-shadow:var(--inv-shadow); border:1px solid var(--inv-ring); } .inv-hero__title{ margin:.5rem 0 .25rem; font-size:1.14rem; line-height:1.22 } .inv-hero__desc{ color:var(--inv-muted); font-size:.92rem; margin-bottom:.8rem } /* ========================= SERVIÇOS (3 cards) ========================= */ .inv-servicos{ padding:10px 12px } .inv-servicos__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px } .inv-card{ background:var(--inv-card); border-radius:12px; padding:10px; box-shadow:var(--inv-shadow); border:1px solid var(--inv-ring) } .inv-card--servico .inv-card__thumb img{ width:100%; height:76px; object-fit:cover; border-radius:10px; background:#f6f6f6 } .inv-card__title{ font-size:.96rem; margin:.55rem 0 .125rem; line-height:1.25 } .inv-card__sub{ color:var(--inv-muted); font-size:.83rem; margin:0 0 .32rem } /* ========================= SOBRE NÓS ========================= */ .inv-sobre{ display:grid; gap:12px; padding:12px } .inv-sobre .inv-title{ font-size:1.16rem; margin:.25rem 0 .5rem; line-height:1.25 } .inv-sobre .inv-body{ color:var(--inv-muted); font-size:.92rem } .inv-sobre__media img{ width:100%; height:136px; object-fit:cover; border-radius:12px; border:1px solid var(--inv-ring) } .inv-sobre__cta{ display:block; margin-top:10px; width:100%; text-align:center } /* ========================= PILARES - Slider ========================= */ .inv-pilares{ padding:12px } .inv-pilar{ background:var(--inv-bg-soft); border:1px solid var(--inv-ring); border-radius:12px; padding:12px; height:192px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--inv-shadow) } .inv-pilar__icon{ font-size:1.2rem; color:var(--inv-primary) } .inv-pilar__title{ margin:0; font-size:1rem } .inv-pilar__text{ font-size:.88rem; color:var(--inv-muted); flex:1 } .inv-swiper__controls{ display:flex; align-items:center; gap:14px; justify-content:center; margin-top:10px } .inv-swiper__prev,.inv-swiper__next{ width:36px; height:36px; border-radius:12px; background:#fff; border:1px solid var(--inv-ring); display:flex; align-items:center; justify-content:center; box-shadow:var(--inv-shadow) } .inv-swiper__fraction{ font-size:.9rem; color:#333; min-width:44px; text-align:center } /* ========================= BENEFÍCIOS ========================= */ .inv-beneficios{ padding:14px 12px } .inv-subtitle{ font-size:1rem; margin:0 0 .7rem } .inv-beneficios__list{ list-style:none; padding:0; margin:0; display:grid; gap:8px } .inv-beneficio{ background:#fff; border:1px solid var(--inv-ring); border-radius:12px; padding:10px; box-shadow:var(--inv-shadow) } .inv-beneficio__dot{ width:10px; height:10px; border-radius:50%; background:var(--inv-primary); display:inline-block; margin-right:6px } .inv-beneficio__title{ display:inline; font-size:.94rem } .inv-beneficio__text{ font-size:.84rem; color:var(--inv-muted); margin-top:.15rem } /* ========================= BANNER / MÉTRICAS ========================= */ .inv-banner{ margin:16px 0 64px; padding:18px 12px 24px; background:var(--inv-bg-soft) center/cover no-repeat; } .inv-banner__inner{ background:rgba(255,255,255,.74); backdrop-filter:saturate(130%) blur(8px); border-radius:18px; padding:16px; border:1px solid var(--inv-ring); box-shadow:var(--inv-shadow) } .inv-eyebrow{ color:var(--inv-muted); margin:.125rem 0 } .inv-title{ font-size:1.24rem; margin:.25rem 0 .6rem; line-height:1.2 } .inv-metricas{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 16px } .inv-metrica{ background:#fff; border:1px solid var(--inv-ring); border-radius:14px; padding:12px; text-align:center; box-shadow:var(--inv-shadow) } .inv-metrica__value{ font-size:1.52rem; font-weight:900; color:var(--inv-primary); line-height:1 } .inv-metrica__label{ font-size:.72rem; color:var(--inv-muted) } /* ========================= BOTTOM NAV (opcional) ========================= */ .inv-bottomnav{ position:fixed; left:0; right:0; bottom:0; z-index:99; background:#fff; border-top:1px solid var(--inv-ring); display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:6px 8px; box-shadow:0 -6px 18px rgba(0,0,0,.06); } .inv-bottomnav__item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; color:#444; font-size:.78rem; font-weight:700; padding:8px 4px; border-radius:10px; } .inv-bottomnav__item:hover{ background:var(--inv-bg-soft) } .inv-ico{ font-size:1.05rem; line-height:1 } /* ========================= RESPONSIVO ========================= */ @media (min-width:768px){ .inv-hero{ grid-template-columns: 420px 1fr; align-items:start; padding:22px } .inv-hero__img{ height:264px } .inv-servicos__grid{ grid-template-columns: repeat(3, 1fr) } .inv-sobre{ grid-template-columns: 1fr 1fr; padding:20px } .inv-sobre__media img{ height:220px } .inv-banner{ padding:30px 24px 64px } .inv-bottomnav{ display:none } /* oculto em telas maiores */ }