/* ==========================================================================
Eletroserv Engenharia — Tema WordPress
CSS único, sem build. Mobile-first: estilos base = mobile, media queries
(min-width) adicionam/ajustam para tablet e desktop.
Breakpoints usados: 480px, 640px, 768px, 1024px, 1280px, 1440px.
========================================================================== */
/* --------------------------------------------------------------------------
1. Variáveis de design — TODAS as cores principais vivem aqui.
-------------------------------------------------------------------------- */
:root {
/* Cores de marca — ajustar aqui para reskin futuro */
--color-navy-950: #071224;
--color-navy-900: #0b1c33;
--color-navy-850: #0e2340;
--color-navy-800: #12294a;
--color-navy-700: #1b3860;
--color-blue-600: #0b6dd6;
--color-blue-500: #2f8ef0;
--color-blue-400: #5aa8f5;
--color-blue-100: #e6f1fd;
--color-blue-50: #f2f8fe;
--color-white: #ffffff;
--color-gray-50: #f6f8fa;
--color-gray-100: #edf1f5;
--color-gray-200: #dde3ea;
--color-gray-300: #c3ccd6;
--color-gray-500: #7c8798;
--color-gray-600: #5c6675;
--color-gray-700: #414b58;
--color-gray-800: #262e38;
--color-graphite: #1c2229;
/* Papéis semânticos (usar estes nos componentes, não os brutos acima) */
--color-bg: var(--color-white);
--color-text: var(--color-graphite);
--color-text-muted: var(--color-gray-600);
--color-border: var(--color-gray-200);
--color-accent: var(--color-blue-600);
--color-accent-hover: var(--color-blue-500);
/* Tipografia — pilha de sistema para performance (sem fonte externa) */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--line-height-base: 1.6;
--tracking-tight: -0.02em;
--tracking-wide: 0.06em;
/* Espaçamento */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-8: 3rem;
--space-10: 4rem;
--space-12: 5rem;
--space-14: 6rem;
--space-16: 7rem;
--container-max: 1280px;
--container-narrow: 820px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--radius-xl: 28px;
--border-width: 1px;
--shadow-sm: 0 1px 2px rgba(7, 18, 36, 0.06);
--shadow-md: 0 12px 32px rgba(7, 18, 36, 0.10);
--shadow-lg: 0 24px 60px rgba(7, 18, 36, 0.16);
--shadow-navy: 0 20px 48px rgba(7, 18, 36, 0.35);
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 450ms cubic-bezier(0.16, 1, 0.3, 1);
--header-height: 84px;
--header-height-compact: 64px;
}
/* --------------------------------------------------------------------------
2. Reset / base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height-compact) + 16px);
}
body {
min-height: 100svh;
font-family: var(--font-sans);
font-size: 1rem;
line-height: var(--line-height-base);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.es-no-scroll { overflow: hidden; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
/* --------------------------------------------------------------------------
3. Acessibilidade
-------------------------------------------------------------------------- */
.es-skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
z-index: 1000;
background: var(--color-navy-900);
color: #fff;
padding: 0.85rem 1.25rem;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
font-weight: 700;
transition: top var(--transition-fast);
}
.es-skip-link:focus { top: 0; }
:focus-visible {
outline: 3px solid var(--color-blue-500);
outline-offset: 2px;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background: #fff;
color: var(--color-navy-900);
clip: auto;
clip-path: none;
height: auto;
width: auto;
padding: 1rem;
z-index: 1000;
position: fixed;
top: var(--space-4);
left: var(--space-4);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
4. Layout base
-------------------------------------------------------------------------- */
.es-container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}
.es-container--narrow { max-width: var(--container-narrow); }
.es-section { padding-block: var(--space-10); position: relative; }
.es-section--tight { padding-block: var(--space-6); }
.es-section--cozy { padding-block: var(--space-8); }
@media (min-width: 1024px) {
.es-section { padding-block: var(--space-16); }
.es-section--tight { padding-block: var(--space-8); }
.es-section--cozy { padding-block: var(--space-12); }
}
.es-section__head { margin-bottom: var(--space-8); }
/* Seção "O que é" da página de Manutenção Elétrica Empresarial: só tem o
cabeçalho (sem grid/cards abaixo), então a margem padrão do cabeçalho fica
sem função e só some no padding-bottom da seção. Reduz ambos, sem mexer em
.es-section--tight (compartilhada com Home/Hub). */
.es-svc-value { padding-block: var(--space-6); }
.es-svc-value .es-section__head { margin-bottom: 0; }
@media (min-width: 1024px) {
.es-svc-value { padding-block: var(--space-8); }
}
/* Hub B2B (/engenharia-eletrica-para-empresas/): sequência com várias seções
--cozy em fila deixava vãos verticais grandes demais em desktop, sobretudo
entre "Soluções Energéticas" e "Operações Multiunidade". Escopado pelo
body class da própria página para não afetar Home nem as páginas de
serviço, que reaproveitam a mesma .es-section--cozy. Mobile fica como
estava — já é a versão mais enxuta. */
@media (min-width: 1024px) {
.page-engenharia-eletrica-para-empresas .es-section--cozy { padding-block: var(--space-10); }
.page-engenharia-eletrica-para-empresas #solucoes-empresariais { padding-bottom: var(--space-8); }
.page-engenharia-eletrica-para-empresas #multiplas-unidades { padding-top: var(--space-8); }
}
/* Traço fino no topo de seções escuras: marca a transição como intencional
em vez de deixar o corte de fundo acontecer "sem querer". */
.es-section--seam::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-blue-500), transparent);
opacity: 0.55;
}
.es-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-size: 0.8rem;
font-weight: 800;
color: var(--color-accent);
margin-bottom: var(--space-3);
}
.es-eyebrow::before {
content: '';
width: 18px;
height: 2px;
background: currentColor;
border-radius: 2px;
}
.es-eyebrow--light { color: var(--color-blue-400); }
.es-section__title {
font-size: clamp(1.6rem, 3.2vw, 2.4rem);
font-weight: 800;
color: var(--color-navy-900);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-4);
max-width: 720px;
}
.es-section__title--light { color: var(--color-white); }
.es-section__lead {
font-size: 1.05rem;
color: var(--color-text-muted);
max-width: 620px;
}
.es-section__lead--light { color: rgba(255, 255, 255, 0.78); }
/* --------------------------------------------------------------------------
5. Botões
-------------------------------------------------------------------------- */
.es-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.9rem 1.6rem;
border-radius: var(--radius-sm);
border: 2px solid transparent;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.es-btn--lg { padding: 1.05rem 2rem; }
.es-btn--sm { padding: 0.6rem 1.15rem; font-size: 0.78rem; }
.es-btn--primary { background: var(--color-accent); color: #fff; }
.es-btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.es-btn--outline { background: transparent; color: var(--color-navy-900); border-color: var(--color-navy-900); }
.es-btn--outline:hover { background: var(--color-navy-900); color: #fff; }
.es-btn--light { background: #fff; color: var(--color-navy-900); }
.es-btn--light:hover { background: var(--color-gray-100); }
.es-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.es-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
/* --------------------------------------------------------------------------
6. Header e navegação
-------------------------------------------------------------------------- */
.es-header {
position: sticky;
top: 0;
z-index: 500;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--color-border);
transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
body.admin-bar .es-header { top: var(--wp-admin--admin-bar--height, 32px); }
.es-header.is-scrolled { box-shadow: var(--shadow-md); border-bottom-color: transparent; }
.es-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: var(--header-height);
transition: min-height var(--transition-base);
}
.es-header.is-scrolled .es-header__inner { min-height: var(--header-height-compact); }
.es-header__brand img { max-height: 42px; width: auto; height: auto; object-fit: contain; transition: max-height var(--transition-base); }
.es-header.is-scrolled .es-header__brand img { max-height: 34px; }
/* Desktop: assinatura "Engenharia e Serviços" precisa de mais altura para
ficar legível; o header-height desktop (84px) comporta a diferença sem
crescer. */
@media (min-width: 1024px) {
.es-header__brand img { max-height: 52px; }
.es-header.is-scrolled .es-header__brand img { max-height: 40px; }
}
.es-logo-text {
font-weight: 800;
font-size: 1.2rem;
color: var(--color-navy-900);
letter-spacing: var(--tracking-tight);
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
}
.es-logo-text::before {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-radius: 2px;
background: var(--color-accent);
transform: translateY(-1px);
}
.es-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.es-header__cta { display: none; }
.es-header__menu-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
}
.es-header__menu-toggle:hover { background: var(--color-gray-100); }
.es-header__menu-icon { position: relative; width: 22px; height: 2px; background: var(--color-navy-900); transition: background-color var(--transition-fast); }
.es-header__menu-icon::before,
.es-header__menu-icon::after {
content: '';
position: absolute;
left: 0;
width: 22px;
height: 2px;
background: var(--color-navy-900);
transition: transform var(--transition-fast);
}
.es-header__menu-icon::before { top: -7px; }
.es-header__menu-icon::after { top: 7px; }
.es-header__menu-toggle[aria-expanded="true"] .es-header__menu-icon { background: transparent; }
.es-header__menu-toggle[aria-expanded="true"] .es-header__menu-icon::before { transform: translateY(7px) rotate(45deg); }
.es-header__menu-toggle[aria-expanded="true"] .es-header__menu-icon::after { transform: translateY(-7px) rotate(-45deg); }
/* Nav mobile: painel off-canvas */
.es-nav {
position: fixed;
inset: 0 0 0 auto;
width: min(86vw, 360px);
background: var(--color-white);
transform: translateX(100%);
transition: transform var(--transition-base);
z-index: 600;
overflow-y: auto;
padding: var(--space-5);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.es-nav.is-open { transform: translateX(0); }
.es-nav__mobile-head { display: flex; align-items: center; justify-content: space-between; }
.es-nav__mobile-title { font-weight: 800; color: var(--color-navy-900); }
.es-nav__close { padding: 0.5rem; color: var(--color-navy-900); }
.es-nav__list { display: flex; flex-direction: column; gap: var(--space-1); }
.es-nav__item { border-bottom: 1px solid var(--color-gray-100); }
.es-nav__link, .es-nav__sublink {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 0;
font-weight: 600;
color: var(--color-navy-900);
}
.es-nav__item--current > .es-nav__link { color: var(--color-accent); }
.es-nav__toggle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--color-gray-500); transition: transform var(--transition-fast); }
.es-nav__item--has-children.is-open > .es-nav__toggle { transform: rotate(180deg); }
.es-nav__submenu { display: none; flex-direction: column; padding-left: var(--space-3); }
.es-nav__item--has-children.is-open > .es-nav__submenu { display: flex; }
.es-nav__sublink { font-weight: 500; color: var(--color-gray-700); padding: 0.6rem 0; }
.es-nav__mobile-extra {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-gray-100);
margin-top: auto;
}
.es-nav__mobile-cta { width: 100%; }
.es-nav__mobile-contact { display: flex; flex-direction: column; gap: 0.5rem; }
.es-nav__mobile-contact .es-contact-item { color: var(--color-navy-900); font-weight: 600; font-size: 0.92rem; }
.es-nav-overlay {
position: fixed;
inset: 0;
background: rgba(7, 18, 36, 0.5);
z-index: 550;
}
.es-nav-overlay[hidden] { display: none; }
@media (min-width: 768px) {
.es-header__cta { display: inline-flex; }
}
@media (min-width: 1024px) {
.es-header__menu-toggle { display: none; }
.es-nav-overlay { display: none; }
.es-nav {
position: static;
width: auto;
transform: none;
background: transparent;
box-shadow: none;
padding: 0;
overflow: visible;
flex-direction: row;
align-items: center;
gap: var(--space-6);
}
.es-nav__mobile-head, .es-nav__mobile-extra { display: none; }
.es-nav__list { flex-direction: row; align-items: center; gap: var(--space-1); }
.es-nav__item { border-bottom: none; position: relative; }
/* Item + seta na mesma linha: link e toggle são irmãos block-level. */
.es-nav__list > .es-nav__item { display: flex; align-items: center; }
.es-nav__list > .es-nav__item > .es-nav__link { white-space: nowrap; }
.es-nav__link, .es-nav__sublink { padding: 0.6rem 0.35rem; font-size: 0.92rem; position: relative; }
.es-nav__link::after {
content: '';
position: absolute;
left: 0.35rem;
right: 0.35rem;
bottom: 0.2rem;
height: 2px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-fast);
}
.es-nav__link:hover::after,
.es-nav__item--current > .es-nav__link::after { transform: scaleX(1); }
.es-nav__toggle { width: 20px; height: 20px; margin-left: 0.15rem; }
.es-nav__submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
background: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: var(--space-2);
margin-top: var(--space-2);
z-index: 50;
}
.es-nav__item--has-children:hover > .es-nav__submenu,
.es-nav__item--has-children:focus-within > .es-nav__submenu,
.es-nav__item--has-children.is-open > .es-nav__submenu {
display: flex;
}
.es-nav__sublink { padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); }
.es-nav__sublink:hover { background: var(--color-gray-50); color: var(--color-accent); }
}
/* --------------------------------------------------------------------------
7. Hero
-------------------------------------------------------------------------- */
.es-hero {
padding-block: var(--space-12) var(--space-10);
background: linear-gradient(180deg, var(--color-gray-50), var(--color-white) 70%);
overflow: hidden;
}
.es-hero__inner { display: grid; gap: var(--space-10); align-items: center; }
.es-hero__title {
font-size: clamp(2.1rem, 6vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--color-navy-900);
margin-bottom: var(--space-5);
}
.es-hero__subtitle { font-size: 1.12rem; line-height: 1.65; color: var(--color-text-muted); max-width: 560px; margin-bottom: var(--space-6); }
.es-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Painel visual do Hero: enquanto não há fotografia institucional oficial,
usa uma composição geométrica/técnica sóbria (grade + nós), preparada
para virar o container de uma ![]()
real no futuro (ver comentário em
section-hero.php sobre onde inserir o arquivo). */
.es-hero__visual { display: none; }
.es-hero__frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-xl);
background:
radial-gradient(120% 120% at 15% 10%, var(--color-navy-700) 0%, var(--color-navy-900) 45%, var(--color-navy-950) 100%);
overflow: hidden;
box-shadow: var(--shadow-navy);
}
.es-hero__pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.es-hero__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
}
@media (min-width: 1280px) { .es-hero__photo { object-position: center 40%; } }
.es-hero__pattern-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.es-hero__pattern-line { stroke: rgba(90, 168, 245, 0.55); stroke-width: 1.4; }
.es-hero__pattern-node { fill: var(--color-blue-400); }
.es-hero__pattern-node--dim { fill: rgba(90, 168, 245, 0.35); }
.es-hero__pattern-arc { fill: none; stroke: rgba(90, 168, 245, 0.28); stroke-width: 1; }
.es-hero__frame::before,
.es-hero__frame::after {
content: '';
position: absolute;
width: 34px;
height: 34px;
border: 1.5px solid rgba(255, 255, 255, 0.35);
z-index: 2;
}
.es-hero__frame::before { top: var(--space-5); left: var(--space-5); border-right: none; border-bottom: none; }
.es-hero__frame::after { bottom: var(--space-5); right: var(--space-5); border-left: none; border-top: none; }
.es-hero__frame-caption {
position: absolute;
left: var(--space-5);
bottom: var(--space-5);
z-index: 3;
color: rgba(255, 255, 255, 0.85);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
@media (min-width: 1024px) {
.es-hero { padding-block: var(--space-14) var(--space-12); }
.es-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
.es-hero__visual { display: block; }
}
/* --------------------------------------------------------------------------
8. Faixa de autoridade
-------------------------------------------------------------------------- */
.es-authority { background: var(--color-navy-950); }
.es-authority__list { display: grid; gap: 1px; grid-template-columns: 1fr; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); overflow: hidden; }
.es-authority__item {
padding: var(--space-6) var(--space-5);
background: var(--color-navy-950);
}
.es-authority__title { font-weight: 800; color: #fff; margin-bottom: var(--space-2); font-size: 1.05rem; letter-spacing: -0.01em; }
.es-authority__text { color: rgba(255, 255, 255, 0.62); font-size: 0.88rem; }
@media (min-width: 768px) { .es-authority__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .es-authority__list { grid-template-columns: repeat(4, 1fr); } }
/* --------------------------------------------------------------------------
9. Soluções (cards)
-------------------------------------------------------------------------- */
.es-solutions__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.es-card {
position: relative;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-6);
overflow: hidden;
transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.es-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-accent), var(--color-blue-400));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
}
.es-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-blue-100); transform: translateY(-4px); }
.es-card:hover::before { transform: scaleX(1); }
.es-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
background: var(--color-blue-50);
color: var(--color-accent);
margin-bottom: var(--space-5);
transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.es-card__icon svg { width: 24px; height: 24px; }
.es-card:hover .es-card__icon { background: var(--color-accent); color: #fff; transform: scale(1.06); }
.es-card__title { font-size: 1.12rem; font-weight: 700; color: var(--color-navy-900); margin-bottom: var(--space-3); letter-spacing: -0.01em; }
.es-card__text { color: var(--color-text-muted); font-size: 0.94rem; }
@media (min-width: 640px) { .es-solutions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .es-solutions__grid { grid-template-columns: repeat(3, 1fr); } }
/* Dois grupos de soluções (Engenharia Elétrica / Soluções Energéticas): cada
grupo fecha sua própria grade por completo, para nunca deixar um card
isolado sozinho na última linha. */
.es-solutions__group:not(:first-child) { margin-top: var(--space-8); }
.es-solutions__group-title {
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-gray-500);
margin-bottom: var(--space-5);
}
@media (min-width: 640px) { .es-solutions__grid--energy { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .es-solutions__grid--energy { grid-template-columns: repeat(4, 1fr); } }
/* Grade de 4 cards que deve fechar em 2x2 no desktop (nunca 3+1): mantém as
2 colunas já definidas em .es-solutions__grid a partir de 640px, só
sobrepondo o padrão de 3 colunas que a grade base assume a partir de 1024px. */
@media (min-width: 1024px) { .es-solutions__grid--pair { grid-template-columns: repeat(2, 1fr); } }
/* --------------------------------------------------------------------------
10. Engenharia para empresas (seção escura)
-------------------------------------------------------------------------- */
.es-b2b { background: var(--color-navy-900); position: relative; }
.es-b2b__grid { display: grid; gap: var(--space-8); }
.es-b2b__list { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
/* Fotografia institucional opcional (Customizer). Ausente por padrão: a
coluna de intro fica completa só com texto, sem espaço reservado. */
.es-b2b__photo-frame {
position: relative;
aspect-ratio: 5 / 4;
margin-top: var(--space-6);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.12);
overflow: hidden;
}
.es-b2b__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 1024px) { .es-b2b__photo { object-position: center 30%; } }
.es-b2b__item {
position: relative;
padding: var(--space-5);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
transition: border-color var(--transition-base), transform var(--transition-base), background var(--transition-base);
}
.es-b2b__item:hover { border-color: rgba(90, 168, 245, 0.45); transform: translateY(-3px); background: linear-gradient(160deg, rgba(90, 168, 245, 0.10), rgba(255, 255, 255, 0.015)); }
.es-b2b__item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
border: 1px solid rgba(90, 168, 245, 0.35);
color: var(--color-blue-400);
margin-bottom: var(--space-4);
}
.es-b2b__item-icon svg { width: 20px; height: 20px; }
.es-b2b__item-title { font-weight: 700; color: #fff; margin-bottom: var(--space-2); font-size: 1.02rem; }
.es-b2b__item-text { color: rgba(255, 255, 255, 0.66); font-size: 0.9rem; }
@media (min-width: 640px) { .es-b2b__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .es-b2b__grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }
/* --------------------------------------------------------------------------
11. Múltiplas unidades
-------------------------------------------------------------------------- */
.es-multi-unit__grid { display: grid; gap: var(--space-6); }
.es-multi-unit__panel {
background: var(--color-gray-50);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.es-multi-unit__visual {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--radius-md);
background: linear-gradient(150deg, var(--color-navy-800), var(--color-navy-950));
overflow: hidden;
margin-bottom: var(--space-5);
}
.es-multi-unit__photo { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.es-multi-unit__points { display: flex; flex-direction: column; gap: var(--space-1); }
.es-multi-unit__point {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-2);
border-bottom: 1px solid var(--color-border);
font-weight: 700;
font-size: 0.92rem;
color: var(--color-navy-900);
}
.es-multi-unit__point:last-child { border-bottom: none; }
.es-multi-unit__point-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-blue-100);
color: var(--color-accent);
}
.es-multi-unit__point-icon svg { width: 14px; height: 14px; }
@media (min-width: 1024px) { .es-multi-unit__grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; } }
/* --------------------------------------------------------------------------
12. Clientes / prova social
-------------------------------------------------------------------------- */
.es-clients { background: var(--color-gray-50); }
.es-clients__head { text-align: center; margin-bottom: var(--space-6); }
.es-clients__title { font-weight: 700; color: var(--color-navy-900); font-size: 1.05rem; }
.es-clients__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.es-clients__tile {
display: flex;
align-items: center;
justify-content: center;
min-height: 92px;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.es-clients__tile:hover { border-color: var(--color-blue-100); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.es-clients__name {
font-weight: 700;
font-size: 1rem;
color: var(--color-gray-700);
text-align: center;
letter-spacing: -0.005em;
}
.es-clients__logo {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: var(--es-logo-max-h, 36px);
object-fit: contain;
}
@media (min-width: 640px) {
.es-clients__grid { grid-template-columns: repeat(3, 1fr); }
.es-clients__logo { max-height: var(--es-logo-max-h, 44px); }
}
@media (min-width: 1024px) {
.es-clients__grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
.es-clients__tile { min-height: 108px; padding: var(--space-5); }
.es-clients__logo { max-height: var(--es-logo-max-h, 52px); }
}
/* Ajuste fino de peso visual por cliente: as 5 logomarcas trazem proporções e
áreas vazias internas diferentes, então o mesmo teto de altura (acima) lê
como tamanhos desiguais. Cada modificador só redefine a variável
--es-logo-max-h consumida por .es-clients__logo — o object-fit: contain e a
proporção original continuam intactos, e o .es-clients__tile (min-height,
não altura fixa) absorve a diferença sem cortar nem estourar o card. */
.es-clients__tile--autoglass { --es-logo-max-h: 58px; }
.es-clients__tile--carrefour { --es-logo-max-h: 51px; }
.es-clients__tile--isoeste-kingspan { --es-logo-max-h: 45px; }
.es-clients__tile--construtora-rocha { --es-logo-max-h: 67px; }
@media (min-width: 640px) {
.es-clients__tile--autoglass { --es-logo-max-h: 71px; }
.es-clients__tile--carrefour { --es-logo-max-h: 62px; }
.es-clients__tile--isoeste-kingspan { --es-logo-max-h: 55px; }
.es-clients__tile--construtora-rocha { --es-logo-max-h: 81px; }
}
@media (min-width: 1024px) {
.es-clients__tile--autoglass { --es-logo-max-h: 84px; }
.es-clients__tile--carrefour { --es-logo-max-h: 74px; }
.es-clients__tile--isoeste-kingspan { --es-logo-max-h: 65px; }
.es-clients__tile--construtora-rocha { --es-logo-max-h: 96px; }
}
/* --------------------------------------------------------------------------
13. Case em destaque
-------------------------------------------------------------------------- */
.es-case__layout { display: grid; gap: var(--space-6); }
.es-case__visual {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
background: linear-gradient(155deg, var(--color-navy-800), var(--color-navy-950));
overflow: hidden;
}
.es-case__visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.es-case__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 768px) { .es-case__visual { aspect-ratio: 5 / 6; } }
@media (min-width: 1024px) { .es-case__visual { aspect-ratio: 6 / 5; } }
.es-case__visual-tag {
position: absolute;
left: var(--space-4);
bottom: var(--space-4);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: rgba(255, 255, 255, 0.7);
}
.es-case__content { display: flex; flex-direction: column; }
.es-case__facts { display: flex; flex-direction: column; gap: 0; margin-block: var(--space-2) var(--space-6); }
.es-case__fact { padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.es-case__fact:first-child { border-top: none; padding-top: 0; }
.es-case__label {
display: block;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-size: 0.74rem;
font-weight: 800;
color: var(--color-accent);
margin-bottom: var(--space-2);
}
.es-case__text { color: var(--color-text); font-size: 0.98rem; }
@media (min-width: 768px) { .es-case__layout { grid-template-columns: 0.85fr 1.15fr; align-items: center; } }
/* --------------------------------------------------------------------------
14. Energia Solar
-------------------------------------------------------------------------- */
.es-solar { background: linear-gradient(160deg, var(--color-blue-100), var(--color-blue-50)); }
.es-solar__grid { display: grid; gap: var(--space-6); }
.es-solar__content .es-btn { margin-top: var(--space-2); }
.es-solar__topics { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.es-solar__topic {
display: flex;
align-items: center;
gap: var(--space-3);
background: #fff;
border-radius: var(--radius-md);
padding: var(--space-4);
font-weight: 700;
color: var(--color-navy-900);
font-size: 0.92rem;
border: 1px solid rgba(11, 109, 214, 0.14);
transition: border-color var(--transition-base), transform var(--transition-base);
}
.es-solar__topic:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.es-solar__topic-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--color-blue-100);
color: var(--color-accent);
}
.es-solar__topic-icon svg { width: 18px; height: 18px; }
@media (min-width: 640px) { .es-solar__topics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .es-solar__grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; } }
/* --------------------------------------------------------------------------
15. Diferenciais
-------------------------------------------------------------------------- */
.es-differentiators__list { display: grid; gap: 0; grid-template-columns: 1fr; }
.es-differentiators__item {
display: flex;
gap: var(--space-5);
padding-block: var(--space-5);
border-top: 1px solid var(--color-border);
}
.es-differentiators__list .es-differentiators__item:first-child { border-top: none; padding-top: 0; }
.es-differentiators__index {
flex: none;
font-size: 1.9rem;
font-weight: 800;
line-height: 1;
color: var(--color-blue-100);
-webkit-text-stroke: 1px var(--color-accent);
letter-spacing: -0.02em;
width: 3ch;
}
.es-differentiators__title { font-weight: 800; color: var(--color-navy-900); margin-bottom: var(--space-2); font-size: 1.02rem; }
.es-differentiators__text { color: var(--color-text-muted); font-size: 0.92rem; }
@media (min-width: 768px) {
.es-differentiators__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); }
.es-differentiators__item:nth-child(2) { border-top: none; padding-top: 0; }
}
/* --------------------------------------------------------------------------
16. Atuação geográfica (seção escura) — painel de estados, sem mapa/JS
-------------------------------------------------------------------------- */
.es-coverage { background: var(--color-navy-950); }
.es-coverage__grid { display: grid; gap: var(--space-8); align-items: center; }
.es-coverage__panel {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.es-coverage__states {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-2);
}
.es-coverage__state {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
border: 1px solid rgba(90, 168, 245, 0.3);
border-radius: var(--radius-sm);
background: rgba(90, 168, 245, 0.07);
transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
.es-coverage__state:hover { border-color: var(--color-blue-400); background: rgba(90, 168, 245, 0.15); transform: translateY(-2px); }
.es-coverage__state-uf {
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.04em;
color: #fff;
text-decoration: none;
border: 0;
}
.es-coverage__states-note {
margin-top: var(--space-4);
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-blue-400);
}
@media (min-width: 480px) { .es-coverage__states { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) {
.es-coverage__grid { grid-template-columns: 1fr 1fr; }
.es-coverage__states { grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
}
/* Grade de artigos: com 2 posts, duas colunas centralizadas e equilibradas
(sem vazio à direita); com 1, coluna única estreita centralizada. */
@media (min-width: 1024px) {
.es-articles__grid--pair { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
.es-articles__grid--single { grid-template-columns: minmax(0, 380px); justify-content: center; }
}
/* --------------------------------------------------------------------------
17. Artigos / cards de post (reutilizado em index.php e archive.php)
-------------------------------------------------------------------------- */
.es-articles__grid, .es-post-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.es-post-card {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: #fff;
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.es-post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.es-post-card__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-gray-100); }
.es-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.es-post-card__thumb--pattern {
background:
repeating-linear-gradient(135deg, var(--color-gray-100) 0 2px, var(--color-gray-50) 2px 14px);
position: relative;
}
.es-post-card__thumb--pattern::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(11, 29, 51, 0.04), rgba(11, 29, 51, 0.12));
}
.es-post-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.es-post-card__title { font-size: 1.05rem; font-weight: 700; color: var(--color-navy-900); }
.es-post-card__title a:hover { color: var(--color-accent); }
.es-post-card__excerpt { color: var(--color-text-muted); font-size: 0.92rem; flex: 1; }
.es-post-card__link { font-weight: 700; color: var(--color-accent); font-size: 0.88rem; margin-top: var(--space-2); }
.es-empty-state {
text-align: center;
padding: var(--space-10) var(--space-4);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.es-empty-state__text { color: var(--color-text-muted); max-width: 480px; }
@media (min-width: 640px) { .es-articles__grid, .es-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .es-articles__grid, .es-post-grid { grid-template-columns: repeat(3, 1fr); } }
/* --------------------------------------------------------------------------
18. CTA final (seção escura)
-------------------------------------------------------------------------- */
.es-cta-final { background: radial-gradient(120% 160% at 50% 0%, var(--color-navy-800) 0%, var(--color-navy-900) 55%, var(--color-navy-950) 100%); }
.es-cta-final__inner { text-align: center; max-width: 720px; margin-inline: auto; }
.es-cta-final__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; color: #fff; letter-spacing: -0.015em; margin-bottom: var(--space-4); }
.es-cta-final__text { color: rgba(255, 255, 255, 0.76); margin-bottom: var(--space-6); font-size: 1.06rem; }
.es-cta-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
/* --------------------------------------------------------------------------
19. Footer
-------------------------------------------------------------------------- */
.es-footer { background: var(--color-navy-950); color: rgba(255, 255, 255, 0.85); position: relative; }
.es-footer .es-logo-text { color: #fff; font-size: 1.3rem; }
.es-footer__grid { display: flex; flex-wrap: wrap; gap: var(--space-8); padding-block: var(--space-10) var(--space-8); }
.es-footer__brand-col, .es-footer__col { flex: 1 1 100%; }
.es-footer__tagline { color: rgba(255, 255, 255, 0.6); margin-block: var(--space-3) var(--space-4); font-size: 0.92rem; max-width: 280px; line-height: 1.6; }
.es-footer-col-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 800; color: #fff; margin-bottom: var(--space-4); }
.es-footer__list { display: flex; flex-direction: column; gap: var(--space-3); }
.es-footer__list a { color: rgba(255, 255, 255, 0.62); font-size: 0.92rem; transition: color var(--transition-fast); }
.es-footer__list a:hover { color: #fff; }
.es-footer__contact-items { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.es-contact-item { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; display: inline-block; transition: color var(--transition-fast); }
.es-contact-item:hover { color: #fff; }
.es-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.es-footer__bottom-inner { padding-block: var(--space-4); text-align: center; }
.es-footer__copyright { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); }
.es-social-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.es-social-link { font-size: 0.85rem; font-weight: 700; color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.4rem 0.8rem; border-radius: 999px; transition: color var(--transition-fast), border-color var(--transition-fast); }
.es-social-link:hover { color: #fff; border-color: #fff; }
@media (min-width: 768px) {
.es-footer__brand-col, .es-footer__col { flex: 1 1 calc(50% - var(--space-8) / 2); }
}
@media (min-width: 1024px) {
.es-footer__brand-col { flex: 1.4 1 0; min-width: 220px; }
.es-footer__col { flex: 0.9 1 0; min-width: 140px; }
}
/* --------------------------------------------------------------------------
20. Conteúdo genérico (page.php, single.php, archive.php, 404.php)
-------------------------------------------------------------------------- */
.es-page__title, .es-single__title, .es-archive-title {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 800;
color: var(--color-navy-900);
margin-bottom: var(--space-4);
}
.es-archive-header { margin-bottom: var(--space-8); }
.es-page__thumbnail img, .es-single__thumbnail img { border-radius: var(--radius-md); margin-bottom: var(--space-6); }
.es-single__meta { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.es-single__category { margin-bottom: var(--space-3); }
.es-single__category a { color: var(--color-accent); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.es-single__tags { margin-top: var(--space-8); }
.es-tag { display: inline-block; padding: 0.35rem 0.75rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.8rem; color: var(--color-text-muted); margin-right: var(--space-2); margin-top: var(--space-2); }
.es-prose { color: var(--color-text); line-height: 1.75; }
.es-prose h2 { font-size: 1.5rem; font-weight: 800; color: var(--color-navy-900); margin-block: var(--space-8) var(--space-4); }
.es-prose h3 { font-size: 1.2rem; font-weight: 700; color: var(--color-navy-900); margin-block: var(--space-6) var(--space-3); }
.es-prose p { margin-bottom: var(--space-4); }
.es-prose ul, .es-prose ol { margin-bottom: var(--space-4); padding-left: 1.25rem; list-style: revert; }
.es-prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.es-prose img { border-radius: var(--radius-md); margin-block: var(--space-4); }
.es-404__inner { text-align: center; padding-block: var(--space-12); }
.es-404__eyebrow { color: var(--color-accent); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: var(--space-3); }
.es-404__title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; color: var(--color-navy-900); margin-bottom: var(--space-4); }
.es-404__text { color: var(--color-text-muted); max-width: 520px; margin-inline: auto; margin-bottom: var(--space-6); }
.es-404__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
/* --------------------------------------------------------------------------
21. Reveal on scroll (progressive enhancement via IntersectionObserver)
-------------------------------------------------------------------------- */
.es-reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }
.es-reveal--visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.es-reveal { opacity: 1; transform: none; transition: none; }
}
/* --------------------------------------------------------------------------
22. Ajustes finos — telas muito pequenas (390–430px)
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
:root { --header-height: 72px; --header-height-compact: 58px; }
.es-hero__actions .es-btn,
.es-hub-hero__actions .es-btn,
.es-cta-final__actions .es-btn,
.es-404__actions .es-btn { width: 100%; }
.es-clients__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.es-authority__item { padding: var(--space-5) var(--space-4); }
}
/* --------------------------------------------------------------------------
23. Página "Engenharia Elétrica para Empresas" (hub B2B)
-------------------------------------------------------------------------- */
/* Hero sem fotografia: seção escura só com tipografia, texto centralizado. */
.es-hub-hero {
padding-block: var(--space-12) var(--space-10);
background: linear-gradient(160deg, var(--color-navy-900), var(--color-navy-950));
}
.es-hub-hero__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.es-hub-hero__title {
font-size: clamp(2rem, 4.6vw, 3.1rem);
font-weight: 800;
color: #fff;
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-5);
}
.es-hub-hero__subtitle {
font-size: 1.08rem;
color: rgba(255, 255, 255, 0.78);
max-width: 620px;
margin-inline: auto;
}
.es-hub-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-6);
}
@media (min-width: 1024px) { .es-hub-hero { padding-block: var(--space-14) var(--space-12); } }
/* Problema do cliente: intro + checklist de sintomas. */
.es-hub-problem__grid { display: grid; gap: var(--space-6); }
.es-hub-problem__list { display: grid; gap: 0; }
.es-hub-problem__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding-block: var(--space-3);
border-top: 1px solid var(--color-border);
font-weight: 600;
color: var(--color-navy-900);
font-size: 0.94rem;
}
.es-hub-problem__list .es-hub-problem__item:first-child { border-top: none; padding-top: 0; }
.es-hub-problem__icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-top: 0.05rem;
border-radius: 50%;
background: var(--color-blue-50);
color: var(--color-accent);
}
.es-hub-problem__icon svg { width: 12px; height: 12px; }
@media (min-width: 1024px) { .es-hub-problem__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-10); align-items: start; } }
/* Fluxo "como atuamos": 6 etapas, lista horizontal a partir de telas largas,
com conector simples entre etapas (pseudo-elemento decorativo, sem texto).
Em telas médias (1024–1279px) fica em 2 linhas de 3 para não espremer o
texto; o conector só aparece quando as 6 etapas cabem numa única linha. */
.es-process__list { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.es-process__step {
position: relative;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
}
.es-process__step-number {
display: block;
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
color: var(--color-blue-100);
-webkit-text-stroke: 1px var(--color-accent);
letter-spacing: -0.02em;
margin-bottom: var(--space-2);
}
.es-process__step-title { font-weight: 800; color: var(--color-navy-900); margin-bottom: var(--space-1); font-size: 0.96rem; }
.es-process__step-text { color: var(--color-text-muted); font-size: 0.86rem; }
@media (min-width: 640px) { .es-process__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .es-process__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) {
.es-process__list { grid-template-columns: repeat(6, 1fr); }
.es-process__step:not(:last-child)::after {
content: '';
position: absolute;
top: 38px;
right: calc(var(--space-3) * -1 - 1px);
width: calc(var(--space-3) + 2px);
height: 2px;
background: var(--color-blue-100);
}
}
/* Card de solução que já aponta para uma página real: o .es-card vira ,
então precisa voltar a ser block (âncora é inline por padrão). */
.es-card--link { display: block; }
/* --------------------------------------------------------------------------
13. Atuação — versão do hub B2B (composição simples, sem gráfico abstrato)
-------------------------------------------------------------------------- */
.es-hub-coverage { background: var(--color-navy-950); }
.es-hub-coverage__grid { display: grid; gap: var(--space-6); }
.es-hub-coverage__facts { display: flex; flex-direction: column; gap: var(--space-3); }
.es-hub-coverage__fact {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
font-weight: 700;
color: #fff;
font-size: 0.94rem;
}
.es-hub-coverage__fact-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(90, 168, 245, 0.35);
color: var(--color-blue-400);
}
.es-hub-coverage__fact-icon svg { width: 16px; height: 16px; }
/* Link interno dentro do texto claro sobre fundo navy (ex.: página local
de Campina Grande apontando para a página pilar nacional). Escopado ao
componente — não afeta links em nenhuma outra seção. */
.es-hub-coverage__link { color: var(--color-blue-400); text-decoration: underline; text-underline-offset: 2px; }
.es-hub-coverage__link:hover, .es-hub-coverage__link:focus-visible { color: var(--color-white); }
@media (min-width: 1024px) { .es-hub-coverage__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
/* --------------------------------------------------------------------------
14. FAQ — componente das páginas internas (details/summary nativos)
-------------------------------------------------------------------------- */
.es-faq { display: flex; flex-direction: column; gap: var(--space-3); }
.es-faq__item {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
background: var(--color-white);
}
.es-faq__question {
cursor: pointer;
list-style: none;
font-weight: 700;
color: var(--color-navy-900);
font-size: 0.98rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.es-faq__question::-webkit-details-marker { display: none; }
.es-faq__question::after {
content: '+';
flex: none;
font-size: 1.2rem;
font-weight: 700;
color: var(--color-accent);
transition: transform var(--transition-fast);
}
.es-faq__item[open] .es-faq__question::after { transform: rotate(45deg); }
.es-faq__answer { margin-top: var(--space-3); color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.65; }
/* --------------------------------------------------------------------------
24. Compactação da Home — escopada por body.home (is_front_page()).
Reduz ~10–15% dos espaços verticais entre seções e ~20–25% da altura
combinada CTA final + rodapé, sem comprimir o Hero. Espelha o escopo
.page-engenharia-eletrica-para-empresas já usado acima; não afeta as
páginas internas nem o Hub.
-------------------------------------------------------------------------- */
.home .es-section { padding-block: var(--space-8); }
.home .es-section--cozy { padding-block: var(--space-6); }
.home .es-cta-final { padding-block: var(--space-8); }
.home .es-section__head { margin-bottom: var(--space-6); }
@media (min-width: 1024px) {
.home .es-section { padding-block: var(--space-14); }
.home .es-section--cozy { padding-block: var(--space-10); }
.home .es-section--tight { padding-block: var(--space-6); }
.home .es-b2b { padding-block: var(--space-12); }
.home .es-cta-final { padding-block: var(--space-10); }
}
/* ES HOME VISUAL POLISH START */
/* ----------------------------------------------------
Engenharia para empresas
Centralizacao vertical mais equilibrada.
---------------------------------------------------- */
.home .es-b2b__grid,
.home .es-b2b__layout {
align-items: center !important;
}
.home .es-b2b__content,
.home .es-b2b__copy,
.home .es-b2b__intro {
align-self: center;
}
.home .es-b2b__content > :first-child,
.home .es-b2b__copy > :first-child {
margin-top: 0;
}
.home .es-b2b__cards {
align-self: center;
}
/* ----------------------------------------------------
Multiplas unidades
Fotografia real no lugar do grafico abstrato.
---------------------------------------------------- */
.home .es-multi-unit__grid {
align-items: center;
gap: clamp(40px, 5vw, 72px);
}
.home .es-multi-unit__panel {
overflow: hidden;
}
.home .es-multi-unit__visual {
min-height: 0;
aspect-ratio: 16 / 10;
border-radius: 22px;
overflow: hidden;
background: var(--color-navy-950);
}
.home .es-multi-unit__photo {
position: static;
display: block;
width: 100%;
height: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: center;
}
/* ----------------------------------------------------
Cliente em destaque
Mais preenchido e equilibrado.
---------------------------------------------------- */
.home .es-case__layout {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 0.92fr);
gap: clamp(32px, 4vw, 56px);
align-items: stretch;
max-width: 1180px;
margin-inline: auto;
}
.home .es-case__visual {
aspect-ratio: 6 / 5 !important;
min-height: 100%;
}
.home .es-case__content {
align-self: stretch;
justify-content: center;
background: #f7faff;
border: 1px solid var(--color-border);
border-radius: 26px;
padding: clamp(30px, 4vw, 52px);
}
.home .es-case__facts {
margin-bottom: var(--space-4);
}
/* ----------------------------------------------------
Redes sociais
---------------------------------------------------- */
.es-footer .es-social-links--icons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.es-footer .es-social-links--icons .es-social-link {
width: 46px;
height: 46px;
min-width: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.20);
color: rgba(255, 255, 255, 0.82);
transition:
transform .2s ease,
background .2s ease,
border-color .2s ease,
color .2s ease;
}
.es-footer .es-social-links--icons .es-social-link:hover,
.es-footer .es-social-links--icons .es-social-link:focus-visible {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.55);
color: #fff;
}
.es-footer .es-social-links--icons svg {
display: block;
width: 21px;
height: 21px;
fill: currentColor;
}
/* ----------------------------------------------------
Mobile
---------------------------------------------------- */
@media (max-width: 767px) {
.home .es-case__layout {
grid-template-columns: 1fr;
gap: 24px;
}
.home .es-case__visual {
aspect-ratio: 16 / 11 !important;
}
.home .es-case__content {
padding: 24px;
border-radius: 20px;
}
.home .es-multi-unit__visual,
.home .es-multi-unit__photo {
aspect-ratio: 16 / 11;
}
.es-footer .es-social-links--icons {
justify-content: flex-start;
}
}
/* ES HOME VISUAL POLISH END */
/* ES PHOTO FOOTER FINAL START */
/* ====================================================
MULTIPLAS UNIDADES
Mostrar a fotografia inteira, sem corte agressivo
==================================================== */
.home .es-multi-unit__visual {
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
background: #eaf0f7;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.home .es-multi-unit__photo {
position: static !important;
display: block;
width: 100% !important;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center center !important;
}
/* ====================================================
FOOTER
Marca à esquerda e redes sociais à direita
==================================================== */
.es-footer__brand-col {
flex: 1 1 100% !important;
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"brand social"
"tagline social";
column-gap: clamp(48px, 8vw, 120px);
row-gap: 8px;
align-items: center;
}
.es-footer__brand-col > :first-child {
grid-area: brand;
}
.es-footer__brand-col .es-footer__tagline {
grid-area: tagline;
margin-top: 8px;
margin-bottom: 0;
}
.es-footer__brand-col .es-social-links--icons {
grid-area: social;
margin: 0 !important;
display: flex;
flex-wrap: nowrap;
gap: 14px;
align-items: center;
justify-content: flex-end;
}
/* ====================================================
ICONES SOCIAIS
Cores de marca, mantendo visual premium
==================================================== */
.es-footer .es-social-links--icons .es-social-link {
width: 52px;
height: 52px;
min-width: 52px;
border-radius: 50%;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.14);
box-shadow:
0 8px 22px rgba(0,0,0,.13);
transition:
transform .2s ease,
background .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.es-footer .es-social-links--icons .es-social-link svg {
width: 22px;
height: 22px;
fill: currentColor;
}
/* Instagram */
.es-footer .es-social-links--icons .es-social-link:nth-child(1) {
color: #E4405F;
border-color: rgba(228,64,95,.38);
background: rgba(228,64,95,.08);
}
/* LinkedIn */
.es-footer .es-social-links--icons .es-social-link:nth-child(2) {
color: #0A66C2;
border-color: rgba(10,102,194,.42);
background: rgba(10,102,194,.10);
}
/* YouTube */
.es-footer .es-social-links--icons .es-social-link:nth-child(3) {
color: #FF0000;
border-color: rgba(255,0,0,.38);
background: rgba(255,0,0,.08);
}
/* TikTok */
.es-footer .es-social-links--icons .es-social-link:nth-child(4) {
color: #69C9D0;
border-color: rgba(105,201,208,.42);
background: rgba(105,201,208,.09);
}
.es-footer .es-social-links--icons .es-social-link:hover,
.es-footer .es-social-links--icons .es-social-link:focus-visible {
transform: translateY(-3px);
background: rgba(255,255,255,.10);
border-color: currentColor;
box-shadow:
0 12px 28px rgba(0,0,0,.20);
}
/* ====================================================
DESKTOP
==================================================== */
@media (min-width: 1024px) {
.es-footer__grid {
padding-top: 54px;
padding-bottom: 48px;
}
.es-footer__brand-col .es-social-links--icons {
padding-right: clamp(12px, 4vw, 60px);
}
}
/* ====================================================
TABLET / MOBILE
==================================================== */
@media (max-width: 767px) {
.es-footer__brand-col {
grid-template-columns: 1fr;
grid-template-areas:
"brand"
"tagline"
"social";
row-gap: 14px;
}
.es-footer__brand-col .es-social-links--icons {
justify-content: flex-start;
margin-top: 6px !important;
flex-wrap: wrap;
}
.es-footer .es-social-links--icons .es-social-link {
width: 48px;
height: 48px;
min-width: 48px;
}
.home .es-multi-unit__visual {
border-radius: 18px;
}
}
/* ES PHOTO FOOTER FINAL END */
/* ES MULTI PHOTO CORRECTION START */
/*
* Corrige a heranca de altura do painel.
* A fotografia passa a definir sua propria altura,
* preservando o enquadramento original.
*/
.home .es-multi-unit__grid {
align-items: center !important;
}
.home .es-multi-unit__panel {
align-self: center !important;
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
.home .es-multi-unit__visual {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
background: transparent !important;
}
.home .es-multi-unit__photo {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: initial !important;
object-position: initial !important;
margin: 0 !important;
padding: 0 !important;
}
.home .es-multi-unit__points {
margin-top: 0 !important;
}
/* Desktop: painel proporcional e sem alongamento */
@media (min-width: 1024px) {
.home .es-multi-unit__panel {
width: 100% !important;
max-width: 500px;
margin-left: auto;
}
}
/* Mobile */
@media (max-width: 767px) {
.home .es-multi-unit__panel {
max-width: 100%;
margin-inline: auto;
}
}
/* ES MULTI PHOTO CORRECTION END */
/* ES MULTI PHOTO FINAL CROP START */
/*
* A imagem original é vertical.
* Em desktop usamos recorte 4:3 controlado para manter
* a seção compacta e valorizar equipe + operação.
*/
.home .es-multi-unit__grid {
align-items: center !important;
gap: clamp(42px, 5vw, 70px) !important;
}
.home .es-multi-unit__panel {
display: block !important;
width: 100% !important;
max-width: 470px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
align-self: center !important;
margin-left: auto !important;
overflow: hidden !important;
}
.home .es-multi-unit__visual {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 4 / 3 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
background: #eaf0f7 !important;
border-radius: 20px !important;
}
.home .es-multi-unit__photo {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: cover !important;
/*
* Ajuste do enquadramento:
* mantém o técnico inferior e boa parte da plataforma.
*/
object-position: 50% 58% !important;
margin: 0 !important;
padding: 0 !important;
}
.home .es-multi-unit__points {
margin-top: 18px !important;
}
/* Tablet */
@media (max-width: 1023px) {
.home .es-multi-unit__panel {
max-width: 620px !important;
margin-inline: auto !important;
}
}
/* Mobile */
@media (max-width: 767px) {
.home .es-multi-unit__visual {
aspect-ratio: 4 / 3 !important;
border-radius: 18px !important;
}
.home .es-multi-unit__photo {
object-position: 50% 55% !important;
}
}
/* ES MULTI PHOTO FINAL CROP END */
/* ES MULTI PHOTO TUNE START */
/* Ajuste fino do enquadramento da foto de múltiplas unidades */
.home .es-multi-unit__photo {
object-position: 54% 46% !important;
}
@media (max-width: 767px) {
.home .es-multi-unit__photo {
object-position: 53% 44% !important;
}
}
/* ES MULTI PHOTO TUNE END */
/* ES SOCIAL YOUTUBE FIX START */
/* YouTube mais legível no rodapé */
footer a[href*="youtube.com"],
footer a[href*="youtu.be"] {
background: #ff0000 !important;
border-color: rgba(255, 255, 255, 0.18) !important;
box-shadow: 0 10px 24px rgba(255, 0, 0, 0.28) !important;
}
footer a[href*="youtube.com"] i,
footer a[href*="youtube.com"] svg,
footer a[href*="youtube.com"] path,
footer a[href*="youtube.com"] span,
footer a[href*="youtu.be"] i,
footer a[href*="youtu.be"] svg,
footer a[href*="youtu.be"] path,
footer a[href*="youtu.be"] span {
color: #ffffff !important;
fill: #ffffff !important;
stroke: transparent !important;
opacity: 1 !important;
}
footer a[href*="youtube.com"]:hover,
footer a[href*="youtu.be"]:hover {
transform: translateY(-2px) !important;
box-shadow: 0 14px 28px rgba(255, 0, 0, 0.34) !important;
}
/* ES SOCIAL YOUTUBE FIX END */
/* ES MULTI YOUTUBE FINAL START */
/* ====================================================
MULTIPLAS UNIDADES
Enquadramento mais alto e deslocado para cima.
==================================================== */
.home .es-multi-unit__visual {
aspect-ratio: 5 / 4 !important;
}
.home .es-multi-unit__photo {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
/*
* Movimento perceptível para cima.
* Valor anterior estava praticamente central.
*/
object-position: 50% 32% !important;
}
/* ====================================================
YOUTUBE
O círculo continua coerente com as demais redes.
A marca fica dentro dele com sua identidade real:
vermelho + play branco.
==================================================== */
.es-footer
.es-social-links--icons
a[href*="youtube.com"] {
background:
rgba(255,255,255,.035) !important;
border-color:
rgba(255,0,0,.52) !important;
color: #ffffff !important;
box-shadow:
0 8px 22px rgba(0,0,0,.13) !important;
}
.es-footer
.es-social-links--icons
a[href*="youtube.com"]:hover,
.es-footer
.es-social-links--icons
a[href*="youtube.com"]:focus-visible {
background:
rgba(255,0,0,.08) !important;
border-color:
#ff0000 !important;
box-shadow:
0 12px 26px rgba(255,0,0,.18) !important;
}
.es-footer
.es-social-links--icons
.es-youtube-brand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 21px;
color: initial !important;
}
.es-footer
.es-social-links--icons
.es-youtube-brand svg {
display: block;
width: 28px !important;
height: 20px !important;
overflow: visible;
fill: initial !important;
}
/*
* Impede regras antigas do footer de pintar
* todas as partes do SVG de branco.
*/
.es-footer
.es-social-links--icons
.es-youtube-brand svg rect {
fill: #ff0000 !important;
stroke: none !important;
}
.es-footer
.es-social-links--icons
.es-youtube-brand svg path {
fill: #ffffff !important;
stroke: none !important;
}
/* Mobile */
@media (max-width: 767px) {
.home .es-multi-unit__visual {
aspect-ratio: 5 / 4 !important;
}
.home .es-multi-unit__photo {
object-position: 50% 30% !important;
}
}
/* ES MULTI YOUTUBE FINAL END */
/* ES MULTI REAL POSITION START */
/*
* Ajuste visual final da seção "Múltiplas Unidades"
* Objetivos:
* - eliminar o grande espaço vazio;
* - deixar a foto ocupando bem a área;
* - manter um enquadramento mais agradável;
* - reduzir a altura total do card da direita.
*/
.home .es-multi-unit__visual {
width: 100% !important;
max-width: 520px !important;
margin-left: auto !important;
padding: 18px !important;
border-radius: 24px !important;
background: #eef3f8 !important;
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
align-self: start !important;
justify-content: flex-start !important;
overflow: hidden !important;
}
/* remove qualquer altura exagerada herdada */
.home .es-multi-unit__visual,
.home .es-multi-unit__visual * {
box-sizing: border-box !important;
}
/* foto principal */
.home .es-multi-unit__visual img.es-multi-unit__photo--positioned,
.home .es-multi-unit__visual img.es-multi-unit__photo {
width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
display: block !important;
object-fit: cover !important;
object-position: center 42% !important;
border-radius: 18px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
position: relative !important;
inset: auto !important;
background: #dde6ef !important;
}
/* evita "caixa fantasma" enorme acima/abaixo da foto */
.home .es-multi-unit__visual > figure,
.home .es-multi-unit__visual > .wp-block-image,
.home .es-multi-unit__visual > .es-multi-unit__media,
.home .es-multi-unit__visual > .es-multi-unit__image {
margin: 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
}
/* bloco de itens logo abaixo da foto */
.home .es-multi-unit__visual ul,
.home .es-multi-unit__visual ol,
.home .es-multi-unit__visual .es-multi-unit__items,
.home .es-multi-unit__visual .es-multi-unit__list,
.home .es-multi-unit__visual .es-multi-unit__features {
margin: 0 !important;
padding-top: 0 !important;
}
/* melhor alinhamento do conjunto da seção */
.home .es-multi-unit .es-section__grid,
.home .es-multi-unit__grid,
.home .es-multi-unit__inner {
align-items: center !important;
}
/* tablet */
@media (max-width: 1023px) {
.home .es-multi-unit__visual {
max-width: 100% !important;
padding: 16px !important;
gap: 16px !important;
}
.home .es-multi-unit__visual img.es-multi-unit__photo--positioned,
.home .es-multi-unit__visual img.es-multi-unit__photo {
height: 250px !important;
min-height: 250px !important;
max-height: 250px !important;
object-position: center 40% !important;
}
}
/* mobile */
@media (max-width: 767px) {
.home .es-multi-unit__visual {
padding: 14px !important;
border-radius: 20px !important;
}
.home .es-multi-unit__visual img.es-multi-unit__photo--positioned,
.home .es-multi-unit__visual img.es-multi-unit__photo {
height: 220px !important;
min-height: 220px !important;
max-height: 220px !important;
border-radius: 16px !important;
object-position: center 38% !important;
}
}
/* ES MULTI REAL POSITION END */
/* ES HUB B2B SPACING FINAL START */
/*
* Compactação exclusiva do Hub B2B.
*
* Objetivo:
* - reduzir grandes áreas vazias;
* - aumentar ritmo de leitura;
* - preservar aspecto premium;
* - não comprimir agressivamente o Hero.
*/
/* ----------------------------------------------------
Faixa de autoridade
---------------------------------------------------- */
.page-engenharia-eletrica-para-empresas
.es-authority {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ----------------------------------------------------
Problemas / desafios
---------------------------------------------------- */
.page-engenharia-eletrica-para-empresas
.es-hub-problem {
padding-top:
clamp(64px, 5.5vw, 82px) !important;
padding-bottom:
clamp(58px, 5vw, 76px) !important;
}
/* ----------------------------------------------------
Soluções empresariais
---------------------------------------------------- */
.page-engenharia-eletrica-para-empresas
.es-hub-solutions {
padding-top:
clamp(58px, 5vw, 76px) !important;
padding-bottom:
clamp(58px, 5vw, 76px) !important;
}
/* ----------------------------------------------------
Múltiplas unidades
---------------------------------------------------- */
.page-engenharia-eletrica-para-empresas
.es-hub-multi-unit {
padding-top:
clamp(58px, 5vw, 76px) !important;
padding-bottom:
clamp(58px, 5vw, 76px) !important;
}
/* ----------------------------------------------------
Como atuamos / processo
---------------------------------------------------- */
.page-engenharia-eletrica-para-empresas
.es-hub-process {
padding-top:
clamp(58px, 5vw, 76px) !important;
padding-bottom:
clamp(58px, 5vw, 76px) !important;
}
/* ----------------------------------------------------
Confiança / clientes
---------------------------------------------------- */
.page-engenharia-eletrica-para-empresas
.es-hub-trust {
padding-top:
clamp(50px, 4.5vw, 68px) !important;
padding-bottom:
clamp(50px, 4.5vw, 68px) !important;
}
/* ----------------------------------------------------
Atuação nacional
---------------------------------------------------- */
.page-engenharia-eletrica-para-empresas
.es-hub-coverage {
padding-top:
clamp(58px, 5vw, 76px) !important;
padding-bottom:
clamp(58px, 5vw, 76px) !important;
}
/* ----------------------------------------------------
CTA final
---------------------------------------------------- */
.page-engenharia-eletrica-para-empresas
.es-hub-cta {
padding-top:
clamp(56px, 5vw, 74px) !important;
padding-bottom:
clamp(56px, 5vw, 74px) !important;
}
/* ----------------------------------------------------
Espaço interno de títulos
---------------------------------------------------- */
.page-engenharia-eletrica-para-empresas
.es-section__title {
margin-bottom:
clamp(16px, 2vw, 24px);
}
/* ----------------------------------------------------
Mobile
---------------------------------------------------- */
@media (max-width: 767px) {
.page-engenharia-eletrica-para-empresas
.es-hub-problem,
.page-engenharia-eletrica-para-empresas
.es-hub-solutions,
.page-engenharia-eletrica-para-empresas
.es-hub-multi-unit,
.page-engenharia-eletrica-para-empresas
.es-hub-process,
.page-engenharia-eletrica-para-empresas
.es-hub-trust,
.page-engenharia-eletrica-para-empresas
.es-hub-coverage,
.page-engenharia-eletrica-para-empresas
.es-hub-cta {
padding-top:
52px !important;
padding-bottom:
52px !important;
}
}
/* ----------------------------------------------------
Reduced motion
---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.page-engenharia-eletrica-para-empresas
[data-reveal] {
transition: none !important;
animation: none !important;
}
}
/* ES HUB B2B SPACING FINAL END */
/* ES SERVICE 193 FINAL START */
/*
* Manutenção Elétrica Empresarial
* Compactação exclusiva da página 193.
*/
/* O que é */
body.page-id-193
.es-svc-value {
padding-top:
clamp(60px, 5vw, 78px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* Tipos de operação */
body.page-id-193
.es-solutions {
padding-top:
clamp(54px, 4.8vw, 72px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* Escopo */
body.page-id-193
#escopo {
padding-top:
clamp(54px, 4.8vw, 72px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* Multiunidade */
body.page-id-193
#manutencao-multiunidade {
padding-top:
clamp(54px, 4.8vw, 72px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* Autoridade */
body.page-id-193
.es-authority {
padding-top:
clamp(42px, 3.8vw, 58px) !important;
padding-bottom:
clamp(42px, 3.8vw, 58px) !important;
}
/* FAQ */
body.page-id-193
section[aria-labelledby="es-svc-faq-title"] {
padding-top:
clamp(54px, 4.8vw, 72px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* CTA */
body.page-id-193
#contato.es-cta-final {
padding-top:
clamp(54px, 4.8vw, 72px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* Grid */
body.page-id-193
.es-solutions__grid {
row-gap:
clamp(20px, 2vw, 28px);
}
/* Âncoras */
body.page-id-193
#escopo,
body.page-id-193
#manutencao-multiunidade,
body.page-id-193
#contato {
scroll-margin-top:
96px;
}
/* Mobile */
@media (max-width: 767px) {
body.page-id-193
.es-svc-value,
body.page-id-193
.es-solutions,
body.page-id-193
#escopo,
body.page-id-193
#manutencao-multiunidade,
body.page-id-193
.es-authority,
body.page-id-193
section[aria-labelledby="es-svc-faq-title"],
body.page-id-193
#contato.es-cta-final {
padding-top:
48px !important;
padding-bottom:
48px !important;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
body.page-id-193
[data-reveal] {
animation:
none !important;
transition:
none !important;
}
}
/* ES SERVICE 193 FINAL END */
/* ES INSTALLATIONS FINAL START */
/*
* Instalações Elétricas Empresariais
* Compactação exclusiva desta página.
*/
/* O QUE É */
body.page-id-194
.es-svc-value {
padding-top:
clamp(60px, 5vw, 78px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* FRENTES DE ATUAÇÃO */
body.page-id-194
.es-solutions {
padding-top:
clamp(54px, 4.8vw, 72px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* ESCOPO */
body.page-id-194
#escopo {
padding-top:
clamp(54px, 4.8vw, 72px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* MULTIUNIDADE */
body.page-id-194
.es-hub-coverage {
padding-top:
clamp(54px, 4.8vw, 72px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* AUTORIDADE */
body.page-id-194
.es-authority {
padding-top:
clamp(42px, 3.8vw, 58px) !important;
padding-bottom:
clamp(42px, 3.8vw, 58px) !important;
}
/* FAQ */
body.page-id-194
section[aria-labelledby="es-svc-faq-title"] {
padding-top:
clamp(54px, 4.8vw, 72px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* CTA FINAL */
body.page-id-194
#contato.es-cta-final {
padding-top:
clamp(54px, 4.8vw, 72px) !important;
padding-bottom:
clamp(54px, 4.8vw, 72px) !important;
}
/* CARDS */
body.page-id-194
.es-solutions__grid {
row-gap:
clamp(20px, 2vw, 28px);
}
/* ANCORA */
body.page-id-194
#escopo,
body.page-id-194
#contato {
scroll-margin-top:
96px;
}
/* MOBILE */
@media (max-width: 767px) {
body.page-id-194
.es-svc-value,
body.page-id-194
.es-solutions,
body.page-id-194
#escopo,
body.page-id-194
.es-hub-coverage,
body.page-id-194
.es-authority,
body.page-id-194
section[aria-labelledby="es-svc-faq-title"],
body.page-id-194
#contato.es-cta-final {
padding-top:
48px !important;
padding-bottom:
48px !important;
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
body.page-id-194
[data-reveal] {
animation:
none !important;
transition:
none !important;
}
}
/* ES INSTALLATIONS FINAL END */
/* ES PROJECTS REPORTS FINAL START */
/* HERO - BOTOES LADO A LADO EM DESKTOP */
@media (min-width: 1024px) {
body.page-id-195 .es-hero__actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
}
body.page-id-195 .es-hero__actions .es-btn {
width: auto;
min-width: 0;
padding-left: 18px;
padding-right: 18px;
font-size: 0.82rem;
white-space: nowrap;
}
}
/* O QUE E */
body.page-id-195 .es-svc-value {
padding-top: clamp(60px, 5vw, 78px) !important;
padding-bottom: clamp(54px, 4.8vw, 72px) !important;
}
/* TIPOS DE ENTREGA */
body.page-id-195 .es-solutions {
padding-top: clamp(54px, 4.8vw, 72px) !important;
padding-bottom: clamp(54px, 4.8vw, 72px) !important;
}
/* ESCOPO */
body.page-id-195 #escopo {
padding-top: clamp(54px, 4.8vw, 72px) !important;
padding-bottom: clamp(54px, 4.8vw, 72px) !important;
}
/* MULTIUNIDADE */
body.page-id-195 .es-hub-coverage {
padding-top: clamp(54px, 4.8vw, 72px) !important;
padding-bottom: clamp(54px, 4.8vw, 72px) !important;
}
/* AUTORIDADE */
body.page-id-195 .es-authority {
padding-top: clamp(42px, 3.8vw, 58px) !important;
padding-bottom: clamp(42px, 3.8vw, 58px) !important;
}
/* FAQ */
body.page-id-195 section[aria-labelledby="es-svc-faq-title"] {
padding-top: clamp(54px, 4.8vw, 72px) !important;
padding-bottom: clamp(54px, 4.8vw, 72px) !important;
}
/* CTA FINAL */
body.page-id-195 #contato.es-cta-final {
padding-top: clamp(54px, 4.8vw, 72px) !important;
padding-bottom: clamp(54px, 4.8vw, 72px) !important;
}
/* CARDS */
body.page-id-195 .es-solutions__grid {
row-gap: clamp(20px, 2vw, 28px);
}
/* ANCORA */
body.page-id-195 #escopo,
body.page-id-195 #contato {
scroll-margin-top: 96px;
}
/* MOBILE */
@media (max-width: 767px) {
body.page-id-195 .es-svc-value,
body.page-id-195 .es-solutions,
body.page-id-195 #escopo,
body.page-id-195 .es-hub-coverage,
body.page-id-195 .es-authority,
body.page-id-195 section[aria-labelledby="es-svc-faq-title"],
body.page-id-195 #contato.es-cta-final {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
body.page-id-195 [data-reveal] {
animation: none !important;
transition: none !important;
}
}
/* ES PROJECTS REPORTS FINAL END */
/* ES SUBSTATIONS FINAL START */
/* HERO */
@media (min-width: 1024px) {
body.page-id-196 .es-hero__actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
}
body.page-id-196 .es-hero__actions .es-btn {
width: auto;
min-width: 0;
padding-left: 18px;
padding-right: 18px;
white-space: nowrap;
}
}
/* SECAO O QUE E */
body.page-id-196 .es-svc-value {
padding-top: clamp(58px, 5vw, 76px) !important;
padding-bottom: clamp(50px, 4.5vw, 68px) !important;
}
/* FRENTES DE ATUACAO */
body.page-id-196 .es-solutions {
padding-top: clamp(50px, 4.5vw, 68px) !important;
padding-bottom: clamp(50px, 4.5vw, 68px) !important;
}
/* ESCOPO */
body.page-id-196 #escopo {
padding-top: clamp(50px, 4.5vw, 68px) !important;
padding-bottom: clamp(50px, 4.5vw, 68px) !important;
}
/* MULTIUNIDADE */
body.page-id-196 .es-hub-coverage {
padding-top: clamp(50px, 4.5vw, 68px) !important;
padding-bottom: clamp(50px, 4.5vw, 68px) !important;
}
/* DIFERENCIAIS */
body.page-id-196 .es-authority {
padding-top: clamp(40px, 3.8vw, 56px) !important;
padding-bottom: clamp(40px, 3.8vw, 56px) !important;
}
/* FAQ */
body.page-id-196 section[aria-labelledby="es-svc-faq-title"] {
padding-top: clamp(50px, 4.5vw, 68px) !important;
padding-bottom: clamp(50px, 4.5vw, 68px) !important;
}
/* CTA FINAL */
body.page-id-196 #contato.es-cta-final {
padding-top: clamp(52px, 4.7vw, 70px) !important;
padding-bottom: clamp(52px, 4.7vw, 70px) !important;
}
/* CARDS */
body.page-id-196 .es-solutions__grid {
row-gap: clamp(18px, 2vw, 26px);
}
/* ANCORA */
body.page-id-196 #escopo,
body.page-id-196 #contato {
scroll-margin-top: 96px;
}
/* MOBILE */
@media (max-width: 767px) {
body.page-id-196 .es-svc-value,
body.page-id-196 .es-solutions,
body.page-id-196 #escopo,
body.page-id-196 .es-hub-coverage,
body.page-id-196 .es-authority,
body.page-id-196 section[aria-labelledby="es-svc-faq-title"],
body.page-id-196 #contato.es-cta-final {
padding-top: 46px !important;
padding-bottom: 46px !important;
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
body.page-id-196 [data-reveal] {
animation: none !important;
transition: none !important;
}
}
/* ES SUBSTATIONS FINAL END */
/* ES SUBESTACOES HERO FINAL START */
/*
* Ajuste exclusivo da pagina de Subestacoes.
* Reduz o vazio entre o Hero e a primeira secao,
* sem alterar as demais paginas de servico.
*/
body.page-id-196 .es-hero {
padding-bottom: 36px;
}
body.page-id-196 .es-hero + .es-svc-value {
margin-top: 0;
padding-top: 42px;
}
@media (max-width: 767px) {
body.page-id-196 .es-hero {
padding-bottom: 28px;
}
body.page-id-196 .es-hero + .es-svc-value {
padding-top: 32px;
}
}
/* ES SUBESTACOES HERO FINAL END */
/* ES SPDA FINAL START */
/*
* Ajustes exclusivos da página SPDA e Aterramento.
* Reduz áreas vazias sem comprometer a leitura.
*/
body.page-id-197 .es-hero {
min-height: auto;
}
body.page-id-197 .es-hero + .es-svc-value {
padding-top: clamp(3.25rem, 4.5vw, 4.75rem);
}
body.page-id-197 .es-svc-value {
padding-bottom: clamp(3.25rem, 4.5vw, 4.75rem);
}
body.page-id-197 .es-solutions,
body.page-id-197 .es-multi-unit {
padding-top: clamp(3.5rem, 4.5vw, 5rem);
padding-bottom: clamp(3.5rem, 4.5vw, 5rem);
}
body.page-id-197 .es-hub-coverage {
padding-top: clamp(3.75rem, 5vw, 5.5rem);
padding-bottom: clamp(3.75rem, 5vw, 5.5rem);
}
body.page-id-197 .es-authority {
padding-top: clamp(2.75rem, 4vw, 4.25rem);
padding-bottom: clamp(2.75rem, 4vw, 4.25rem);
}
body.page-id-197 .es-cta-final {
padding-top: clamp(4rem, 5.5vw, 6rem);
padding-bottom: clamp(4rem, 5.5vw, 6rem);
}
/*
* Mobile:
* preserva respiro sem criar grandes áreas vazias.
*/
@media (max-width: 767px) {
body.page-id-197 .es-hero + .es-svc-value,
body.page-id-197 .es-svc-value,
body.page-id-197 .es-solutions,
body.page-id-197 .es-multi-unit,
body.page-id-197 .es-hub-coverage,
body.page-id-197 .es-authority {
padding-top: 3rem;
padding-bottom: 3rem;
}
body.page-id-197 .es-cta-final {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
}
/* ES SPDA FINAL END */
/* ES EFICIENCIA HERO PHOTO START */
/*
* Eficiência Energética:
* mostra uma fotografia tecnicamente compreensível,
* sem distorção e sem o crop agressivo 800x1000.
*/
.page-id-198 .es-hero__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
/*
* Evita ampliação exagerada no desktop.
*/
@media (min-width: 1024px) {
.page-id-198 .es-hero__media,
.page-id-198 .es-hero__visual,
.page-id-198 .es-hero__figure {
overflow: hidden;
}
.page-id-198 .es-hero__photo {
max-height: 640px;
object-position: center center;
}
}
/*
* Tablet e celular:
* imagem continua ocupando o bloco sem deformação.
*/
@media (max-width: 1023px) {
.page-id-198 .es-hero__photo {
width: 100%;
height: auto;
max-height: none;
object-fit: cover;
object-position: center center;
}
}
/* ES EFICIENCIA HERO PHOTO END */
/* ES EFICIENCIA ENERGETICA FINAL START */
/*
* Compactação exclusiva da página 198.
* Mantém respiro visual sem grandes vazios.
*/
body.page-id-198 .es-hero {
padding-bottom: clamp(2.75rem, 4vw, 4rem);
}
body.page-id-198 .es-svc-value {
padding-top: clamp(2.75rem, 4vw, 4rem);
padding-bottom: clamp(3rem, 4.5vw, 4.5rem);
}
body.page-id-198 .es-section.es-section--cozy {
padding-top: clamp(3rem, 4.5vw, 4.5rem);
padding-bottom: clamp(3rem, 4.5vw, 4.5rem);
}
body.page-id-198 .es-multi-unit {
padding-top: clamp(3rem, 4.5vw, 4.5rem);
padding-bottom: clamp(3rem, 4.5vw, 4.5rem);
}
body.page-id-198 .es-authority {
padding-top: clamp(2.75rem, 4vw, 4rem);
padding-bottom: clamp(2.75rem, 4vw, 4rem);
}
body.page-id-198 .es-cta-final {
padding-top: clamp(3.75rem, 5vw, 5.25rem);
padding-bottom: clamp(3.75rem, 5vw, 5.25rem);
}
body.page-id-198 .es-hero__media {
overflow: hidden;
}
body.page-id-198 .es-hero__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
@media (max-width: 767px) {
body.page-id-198 .es-hero {
padding-bottom: 2.5rem;
}
body.page-id-198 .es-svc-value,
body.page-id-198 .es-section.es-section--cozy,
body.page-id-198 .es-multi-unit {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
body.page-id-198 .es-authority {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
body.page-id-198 .es-cta-final {
padding-top: 3.25rem;
padding-bottom: 3.25rem;
}
}
/* ES EFICIENCIA ENERGETICA FINAL END */
/* ES ENERGIA SOLAR PILAR FINAL START */
/*
* Compactacao exclusiva da pagina nacional de Energia Solar.
* Nao interfere nas paginas locais ou demais servicos.
*/
.page-id-199 .es-hero {
padding-top: clamp(3.5rem, 5vw, 5.25rem);
padding-bottom: clamp(3.25rem, 4.5vw, 4.75rem);
}
.page-id-199 .es-section {
padding-top: clamp(3.25rem, 4.5vw, 4.75rem);
padding-bottom: clamp(3.25rem, 4.5vw, 4.75rem);
}
.page-id-199 .es-cta-final {
padding-top: clamp(3.75rem, 5vw, 5.25rem);
padding-bottom: clamp(3.75rem, 5vw, 5.25rem);
}
/*
* Cluster de Energia Solar.
*/
.es-solar-related {
background: #f7f9fc;
}
.es-solar-related__intro {
max-width: 780px;
margin: 0 0 2rem;
}
.es-solar-related__intro h2 {
max-width: 720px;
margin-bottom: 1rem;
}
.es-solar-related__intro > p:last-child {
max-width: 760px;
}
.es-solar-related__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.es-solar-related__card {
position: relative;
display: flex;
flex-direction: column;
min-height: 220px;
padding: 1.5rem;
border: 1px solid rgba(16, 40, 70, 0.12);
border-radius: 18px;
background: #ffffff;
color: inherit;
text-decoration: none;
transition:
transform 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease;
}
.es-solar-related__card:hover,
.es-solar-related__card:focus-visible {
transform: translateY(-2px);
border-color: rgba(0, 119, 221, 0.32);
box-shadow: 0 12px 28px rgba(10, 35, 65, 0.08);
}
.es-solar-related__card:focus-visible {
outline: 3px solid rgba(0, 119, 221, 0.24);
outline-offset: 3px;
}
.es-solar-related__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 1.15rem;
border-radius: 50%;
background: #edf6ff;
color: #0878df;
font-size: 1.2rem;
font-weight: 700;
}
.es-solar-related__card h3 {
margin: 0 0 0.7rem;
font-size: 1.08rem;
line-height: 1.28;
}
.es-solar-related__card p {
margin: 0 0 1rem;
color: var(--es-color-text-muted, #667085);
line-height: 1.6;
}
.es-solar-related__link {
margin-top: auto;
color: #0878df;
font-weight: 700;
font-size: 0.92rem;
}
@media (max-width: 1024px) {
.es-solar-related__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.page-id-199 .es-hero,
.page-id-199 .es-section {
padding-top: 2.75rem;
padding-bottom: 2.75rem;
}
.es-solar-related__grid {
grid-template-columns: 1fr;
}
.es-solar-related__card {
min-height: auto;
padding: 1.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.es-solar-related__card {
transition: none;
}
}
/* ES ENERGIA SOLAR PILAR FINAL END */
/* ES ENERGIA SOLAR ACABAMENTO FINAL START */
/* ==========================================================
ENERGIA SOLAR - RITMO VERTICAL FINAL
Aqui a regra é realmente compacta.
Não aumentamos o padding original.
Reduzimos os grandes vazios observados visualmente.
========================================================== */
/* ----------------------------------------------------------
TODAS AS SEÇÕES INTERNAS
---------------------------------------------------------- */
body.page-id-199 .es-main > section:not(.es-hero):not(.es-cta-final) {
padding-top:
clamp(2.25rem, 2.8vw, 3.25rem) !important;
padding-bottom:
clamp(2.25rem, 2.8vw, 3.25rem) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: 0 !important;
}
/* ----------------------------------------------------------
PRIMEIRA SEÇÃO DEPOIS DO HERO
Este era um dos maiores vazios da página.
---------------------------------------------------------- */
body.page-id-199
.es-main
> .es-hero
+ section {
padding-top:
clamp(1.5rem, 2vw, 2.25rem) !important;
}
/* ----------------------------------------------------------
SEÇÕES "COZY"
---------------------------------------------------------- */
body.page-id-199
.es-main
> section.es-section--cozy {
padding-top:
clamp(2rem, 2.5vw, 3rem) !important;
padding-bottom:
clamp(2rem, 2.5vw, 3rem) !important;
}
/* ----------------------------------------------------------
SEÇÕES "TIGHT"
---------------------------------------------------------- */
body.page-id-199
.es-main
> section.es-section--tight {
padding-top:
clamp(1.75rem, 2.2vw, 2.5rem) !important;
padding-bottom:
clamp(1.75rem, 2.2vw, 2.5rem) !important;
}
/* ----------------------------------------------------------
ELIMINA ESPAÇO ARTIFICIAL ENTRE SEÇÕES CONSECUTIVAS
---------------------------------------------------------- */
body.page-id-199
.es-main
> section
+ section {
margin-top: 0 !important;
}
/* ==========================================================
CLUSTER DE ENERGIA SOLAR
Desktop:
[ 1 ][ 2 ][ 3 ]
[ 4 ][ 5 ]
Mantemos a melhoria visual sem interferir no espaçamento.
========================================================== */
@media (min-width: 1101px) {
body.page-id-199
.es-main
section:has(a[href*="/energia-solar-campina-grande/"])
.es-container
> div:last-child {
display: grid !important;
grid-template-columns:
repeat(6, minmax(0, 1fr)) !important;
gap:
clamp(1rem, 1.4vw, 1.4rem) !important;
align-items: stretch;
}
body.page-id-199
.es-main
section:has(a[href*="/energia-solar-campina-grande/"])
.es-container
> div:last-child
> * {
grid-column:
span 2 !important;
width: 100%;
min-width: 0;
}
body.page-id-199
.es-main
section:has(a[href*="/energia-solar-campina-grande/"])
.es-container
> div:last-child
> *:nth-child(4) {
grid-column:
2 / span 2 !important;
}
body.page-id-199
.es-main
section:has(a[href*="/energia-solar-campina-grande/"])
.es-container
> div:last-child
> *:nth-child(5) {
grid-column:
4 / span 2 !important;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (min-width: 641px) and (max-width: 1100px) {
body.page-id-199
.es-main
section:has(a[href*="/energia-solar-campina-grande/"])
.es-container
> div:last-child {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 1rem !important;
}
body.page-id-199
.es-main
section:has(a[href*="/energia-solar-campina-grande/"])
.es-container
> div:last-child
> * {
grid-column:
auto !important;
width: 100%;
min-width: 0;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 640px) {
body.page-id-199
.es-main
> section:not(.es-hero):not(.es-cta-final) {
padding-top:
2rem !important;
padding-bottom:
2rem !important;
}
body.page-id-199
.es-main
> .es-hero
+ section {
padding-top:
1.25rem !important;
}
body.page-id-199
.es-main
section:has(a[href*="/energia-solar-campina-grande/"])
.es-container
> div:last-child {
display: grid !important;
grid-template-columns:
minmax(0, 1fr) !important;
gap: 0.875rem !important;
}
body.page-id-199
.es-main
section:has(a[href*="/energia-solar-campina-grande/"])
.es-container
> div:last-child
> * {
grid-column:
auto !important;
width: 100%;
min-width: 0;
}
}
/* ES ENERGIA SOLAR ACABAMENTO FINAL END */
/* ES SERVICE PAGES GLOBAL SPACING START */
/* ==========================================================
ELETROSERV
PAGINAS DE SERVICO RESTANTES
NORMALIZACAO GLOBAL DE RITMO VERTICAL
Paginas:
200 - Energia Solar Campina Grande
201 - Energia Solar Joao Pessoa
202 - Usinas Solares
203 - Sistemas Hibridos e Baterias
204 - Manutencao Fotovoltaica
205 - Infraestrutura Veiculos Eletricos
Objetivo:
- eliminar vazios excessivos;
- preservar Hero;
- preservar CTA final;
- não alterar textos ou imagens;
- não forçar altura mínima;
- manter ritmo visual uniforme.
========================================================== */
/* ----------------------------------------------------------
VARIAVEIS DE ESPACAMENTO
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
) {
--es-service-section-space:
clamp(2.25rem, 2.8vw, 3.25rem);
--es-service-section-tight:
clamp(1.75rem, 2.2vw, 2.5rem);
--es-service-first-space:
clamp(1.5rem, 2vw, 2.25rem);
--es-service-grid-gap:
clamp(1rem, 1.4vw, 1.4rem);
}
/* ----------------------------------------------------------
SECOES INTERNAS
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-main
> section:not(.es-hero):not(.es-cta-final) {
padding-top:
var(--es-service-section-space) !important;
padding-bottom:
var(--es-service-section-space) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: 0 !important;
}
/* ----------------------------------------------------------
PRIMEIRA SECAO APOS HERO
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-main
> .es-hero
+ section {
padding-top:
var(--es-service-first-space) !important;
}
/* ----------------------------------------------------------
SECOES COZY
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-main
> section.es-section--cozy {
padding-top:
var(--es-service-section-space) !important;
padding-bottom:
var(--es-service-section-space) !important;
}
/* ----------------------------------------------------------
SECOES TIGHT
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-main
> section.es-section--tight {
padding-top:
var(--es-service-section-tight) !important;
padding-bottom:
var(--es-service-section-tight) !important;
}
/* ----------------------------------------------------------
SECOES SEAM
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-main
> section.es-section--seam {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ----------------------------------------------------------
REMOVE ESPACO ARTIFICIAL ENTRE SECOES
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-main
> section
+ section {
margin-top: 0 !important;
}
/* ----------------------------------------------------------
GRIDS DE CARDS
Garante ritmo mais compacto sem mudar quantidade
ou estrutura dos cards.
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-solutions__grid,
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-service-grid {
gap:
var(--es-service-grid-gap) !important;
}
/* ----------------------------------------------------------
BLOCO DE ESCOPO COM IMAGEM
Evita que uma coluna force um grande vazio na outra.
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-multi-unit__grid {
align-items: center;
}
/* ----------------------------------------------------------
AUTORIDADE / DIFERENCIAIS
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-authority {
padding-top:
var(--es-service-section-tight) !important;
padding-bottom:
var(--es-service-section-tight) !important;
}
/* ----------------------------------------------------------
FAQ
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-main
section:has(details) {
padding-top:
var(--es-service-section-space) !important;
padding-bottom:
var(--es-service-section-space) !important;
}
/* ----------------------------------------------------------
CTA FINAL
Compacta, mas continua visualmente forte.
---------------------------------------------------------- */
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-cta-final {
padding-top:
clamp(3rem, 4vw, 4.25rem) !important;
padding-bottom:
clamp(3rem, 4vw, 4.25rem) !important;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 1024px) {
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
) {
--es-service-section-space:
clamp(2rem, 4vw, 2.75rem);
--es-service-section-tight:
clamp(1.5rem, 3vw, 2.25rem);
--es-service-first-space:
clamp(1.25rem, 3vw, 1.75rem);
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 640px) {
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
) {
--es-service-section-space:
2rem;
--es-service-section-tight:
1.5rem;
--es-service-first-space:
1.25rem;
--es-service-grid-gap:
0.875rem;
}
body:is(
.page-id-200,
.page-id-201,
.page-id-202,
.page-id-203,
.page-id-204,
.page-id-205
)
.es-cta-final {
padding-top:
2.75rem !important;
padding-bottom:
2.75rem !important;
}
}
/* ES SERVICE PAGES GLOBAL SPACING END */
/* ES USINAS SOLARES FINAL START */
/*
* Usinas Solares — ajuste específico.
*
* A normalização global permanece intacta.
* Apenas alinhamos o texto de "Como atuamos" ao topo
* do painel técnico, evitando o grande vazio visual
* gerado pelo alinhamento vertical central.
*/
body.page-id-202 .es-multi-unit__grid {
align-items: start !important;
}
body.page-id-202 .es-multi-unit__content {
align-self: start !important;
padding-top: clamp(0.25rem, 0.8vw, 0.75rem);
}
body.page-id-202 .es-multi-unit__panel {
align-self: start !important;
}
/* Mobile permanece natural */
@media (max-width: 767px) {
body.page-id-202 .es-multi-unit__content {
padding-top: 0;
}
}
/* ES USINAS SOLARES FINAL END */
/* ES HIBRIDOS COMPOSICAO FINAL START */
/*
* HERO — Mostruário ID 229.
* Mantém a fotografia vertical inteira e bem presente.
*/
body.page-id-203 .es-hero__visual {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.page-id-203 .es-hero__frame {
width: min(100%, 455px) !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
margin-inline: auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border-radius: 28px !important;
}
body.page-id-203 .es-hero__frame::before,
body.page-id-203 .es-hero__frame::after {
display: none !important;
content: none !important;
}
body.page-id-203 .es-hero__photo {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 28px !important;
}
/*
* COMO ATUAMOS — técnico ID 173.
*
* Fotografia horizontal para diminuir a altura do painel
* e eliminar o grande vazio do lado esquerdo.
*/
body.page-id-203 .es-multi-unit__visual {
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 3 / 2 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border-radius: 18px !important;
}
body.page-id-203 .es-multi-unit__photo {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
border-radius: 18px !important;
}
body.page-id-203 .es-multi-unit__visual::before,
body.page-id-203 .es-multi-unit__visual::after {
display: none !important;
content: none !important;
}
body.page-id-203 .es-multi-unit__panel {
align-self: start !important;
}
body.page-id-203 .es-multi-unit__points {
margin-top: 1.1rem !important;
}
/*
* Mobile.
*/
@media (max-width: 767px) {
body.page-id-203 .es-hero__frame {
width: min(100%, 390px) !important;
border-radius: 22px !important;
}
body.page-id-203 .es-hero__photo {
border-radius: 22px !important;
}
body.page-id-203 .es-multi-unit__visual {
aspect-ratio: 16 / 10 !important;
}
}
/* ES HIBRIDOS COMPOSICAO FINAL END */
/* ES HIBRIDOS RELATED START */
body.page-id-203 .es-hib-related {
margin-top: 1rem;
font-size: 0.95rem;
line-height: 1.7;
}
body.page-id-203 .es-hib-related p {
margin: 0;
}
body.page-id-203 .es-hib-related a {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.18em;
}
/* ES HIBRIDOS RELATED END */
/* ES OM FINAL START */
/*
* HERO — página O&M.
*
* A fotografia 183 é horizontal 3:2.
* Eliminamos o crop vertical do componente padrão.
*/
body.page-id-204 .es-hero__visual {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.page-id-204 .es-hero__frame {
width: 100% !important;
max-width: 560px !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 3 / 2 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border-radius: 26px !important;
}
body.page-id-204 .es-hero__frame::before,
body.page-id-204 .es-hero__frame::after {
display: none !important;
content: none !important;
}
body.page-id-204 .es-hero__photo {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 26px !important;
}
/*
* COMO ATUAMOS.
*
* Cabeçalho acima e conteúdo técnico abaixo.
* Isso elimina o grande vazio do layout anterior.
*/
body.page-id-204 .es-om-scope__head {
max-width: 820px;
margin-bottom: 2rem;
}
body.page-id-204 .es-om-scope__grid {
display: grid;
grid-template-columns:
minmax(0, 1.05fr)
minmax(0, 0.95fr);
gap: clamp(1.5rem, 3vw, 3rem);
align-items: start;
}
body.page-id-204 .es-om-scope__visual {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: 20px;
}
body.page-id-204 .es-om-scope__photo {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
body.page-id-204 .es-om-scope__points {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid rgba(15, 43, 76, 0.10);
border-radius: 20px;
background: #f7f9fc;
overflow: hidden;
}
body.page-id-204 .es-om-scope__point {
display: grid;
grid-template-columns:
2rem
minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
padding: 1rem 1.1rem;
font-weight: 700;
line-height: 1.45;
}
body.page-id-204 .es-om-scope__point + .es-om-scope__point {
border-top: 1px solid rgba(15, 43, 76, 0.09);
}
body.page-id-204 .es-om-scope__icon {
display: inline-flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #edf6ff;
}
body.page-id-204 .es-om-scope__icon svg {
width: 1rem;
height: 1rem;
}
/*
* Links contextuais.
*/
body.page-id-204 .es-om-related {
margin-top: 1rem;
font-size: 0.95rem;
line-height: 1.7;
}
body.page-id-204 .es-om-related p {
margin: 0;
}
body.page-id-204 .es-om-related a {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.18em;
}
/*
* Mobile.
*/
@media (max-width: 767px) {
body.page-id-204 .es-hero__frame {
max-width: 100% !important;
border-radius: 20px !important;
}
body.page-id-204 .es-hero__photo {
border-radius: 20px !important;
}
body.page-id-204 .es-om-scope__grid {
grid-template-columns: 1fr;
}
body.page-id-204 .es-om-scope__visual {
border-radius: 16px;
}
body.page-id-204 .es-om-scope__points {
border-radius: 16px;
}
}
/* ES OM FINAL END */
/* ES EV FINAL START */
/*
* HERO — imagem horizontal 3:2.
*/
body.page-id-205 .es-hero__visual {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.page-id-205 .es-hero__frame {
position: relative !important;
width: 100% !important;
max-width: 560px !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 3 / 2 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border-radius: 26px !important;
}
body.page-id-205 .es-hero__frame::before,
body.page-id-205 .es-hero__frame::after {
display: none !important;
content: none !important;
}
body.page-id-205 .es-hero__photo {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 26px !important;
}
/*
* ESCOPO — cabeçalho acima,
* foto e checklist lado a lado.
*/
body.page-id-205 .es-ev-scope__head {
max-width: 850px;
margin-bottom: 2rem;
}
body.page-id-205 .es-ev-scope__grid {
display: grid;
grid-template-columns:
minmax(0, 1.05fr)
minmax(0, 0.95fr);
gap: clamp(1.5rem, 3vw, 3rem);
align-items: start;
}
body.page-id-205 .es-ev-scope__visual {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: 20px;
}
body.page-id-205 .es-ev-scope__photo {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
body.page-id-205 .es-ev-scope__points {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid rgba(15, 43, 76, 0.10);
border-radius: 20px;
background: #f7f9fc;
overflow: hidden;
}
body.page-id-205 .es-ev-scope__point {
display: grid;
grid-template-columns:
2rem
minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
padding: 1rem 1.1rem;
font-weight: 700;
line-height: 1.45;
}
body.page-id-205 .es-ev-scope__point + .es-ev-scope__point {
border-top: 1px solid rgba(15, 43, 76, 0.09);
}
body.page-id-205 .es-ev-scope__icon {
display: inline-flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #edf6ff;
}
body.page-id-205 .es-ev-scope__icon svg {
width: 1rem;
height: 1rem;
}
/*
* Links contextuais.
*/
body.page-id-205 .es-ev-related {
margin-top: 1rem;
font-size: 0.95rem;
line-height: 1.7;
}
body.page-id-205 .es-ev-related p {
margin: 0;
}
body.page-id-205 .es-ev-related a {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.18em;
}
@media (max-width: 767px) {
body.page-id-205 .es-hero__frame {
max-width: 100% !important;
border-radius: 20px !important;
}
body.page-id-205 .es-hero__photo {
border-radius: 20px !important;
}
body.page-id-205 .es-ev-scope__grid {
grid-template-columns: 1fr;
}
body.page-id-205 .es-ev-scope__visual {
border-radius: 16px;
}
body.page-id-205 .es-ev-scope__points {
border-radius: 16px;
}
}
/* ES EV FINAL END */