/* GCC Instalações Elétricas · site 2026
   Cores e tipos da apresentação institucional 2026 (azul do logo + amarelo do raio). */
:root {
  --azul: #030E5D;      /* azul do logo GCC */
  --noite: #020838;     /* fundo escuro */
  --azul2: #1B2C8F;
  --amarelo: #FFC20E;   /* energia / raio */
  --tinta: #14202B;
  --cinza: #5B6477;
  --linha: #D5DAE5;
  --papel: #F3F5F9;
  --branco: #FFFFFF;
  --suave: #AEB6D6;     /* texto secundário sobre azul */
  --tit: "Barlow Semi Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --txt: "Barlow", "Segoe UI", Arial, sans-serif;
  --larg: 1180px;
  --gut: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--branco); color: var(--tinta); font: 400 17px/1.6 var(--txt); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--tit); font-weight: 700; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.005em; }
h2 { font-size: clamp(30px, 4.2vw, 46px); color: var(--azul); max-width: 22ch; }
h3 { font-size: 22px; font-weight: 600; }
p { margin: 0 0 1em; max-width: 64ch; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; border-radius: 4px; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 100; background: var(--amarelo); color: var(--azul); padding: 8px 14px; }

.largura { max-width: var(--larg); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: clamp(64px, 9vw, 112px) 0; }
.claro { background: var(--papel); }
.escuro { background: var(--noite); color: var(--branco); }
.escuro h2 { color: var(--branco); }
.intro { font-size: 19px; color: var(--cinza); margin-bottom: 40px; }

/* botões */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--tit); letter-spacing: .01em; padding: 15px 24px; border-radius: 999px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn svg .cheio { fill: currentColor; stroke: none; }
.btn-am { background: var(--amarelo); color: var(--azul); }
.btn-am:hover { background: #ffd34d; }
.btn-linha { border-color: rgba(255,255,255,.55); color: var(--branco); background: transparent; }
.btn-linha:hover { border-color: var(--amarelo); color: var(--amarelo); }
.btn-azul { background: var(--azul); color: var(--branco); }
.btn-azul:hover { background: var(--azul2); }

/* topo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(2, 8, 56, .96); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,.08); }
.topo-in { max-width: var(--larg); margin: 0 auto; padding: 10px var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca img { width: 96px; height: auto; }
.menu { display: flex; align-items: center; gap: 26px; }
.menu a { color: var(--branco); text-decoration: none; font: 500 17px var(--tit); }
.menu a:not(.btn):hover { color: var(--amarelo); }
.menu .btn { padding: 11px 20px; font-size: 16px; color: var(--azul); }
.menu-insta svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; display: block; }
.menu-insta svg .cheio { fill: currentColor; stroke: none; }
.menu-btn { display: none; background: none; border: 1px solid rgba(255,255,255,.4); color: var(--branco); font: 600 16px var(--tit); padding: 8px 14px; border-radius: 999px; }

/* capa */
.capa { background: var(--noite); color: var(--branco); padding: clamp(40px, 6vw, 80px) 0 0; overflow: hidden; }
.capa-in { max-width: var(--larg); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.capa h1 { font-size: clamp(44px, 6.6vw, 84px); font-weight: 700; line-height: .98; letter-spacing: -.015em; margin-bottom: 28px; max-width: 12ch; }
.capa-sub { font-size: 19px; color: var(--suave); max-width: 46ch; margin-bottom: 36px; }
.capa-acoes { display: flex; flex-wrap: wrap; gap: 14px; }
.capa-fotos { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 230px 190px; gap: 12px; }
.capa-fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.cf1 { grid-column: 1; grid-row: 1; }
.cf2 { grid-column: 2; grid-row: 1 / span 2; }
.cf3 { grid-column: 1; grid-row: 2; }
.numeros { max-width: var(--larg); margin: clamp(48px, 7vw, 80px) auto 0; padding: 28px var(--gut) 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 2px solid var(--amarelo); }
.numeros div { margin: 0; }
.numeros dt { font: 700 clamp(34px, 4vw, 48px)/1 var(--tit); color: var(--amarelo); margin-bottom: 6px; }
.numeros dd { margin: 0; color: var(--suave); font-size: 15px; max-width: 20ch; }

/* empresa */
.dois { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.destaque-txt { font: 600 21px/1.35 var(--tit); color: var(--azul); border-left: 4px solid var(--amarelo); padding-left: 16px; margin-top: 28px; }
.empresa-lado img { border-radius: 18px; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin-bottom: 28px; }
.mvv { display: grid; gap: 20px; }
.mvv div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding-top: 16px; border-top: 1px solid var(--linha); }
.mvv h3 { font-size: 20px; color: var(--azul); margin: 0; }
.mvv p { margin: 0; font-size: 16px; color: var(--cinza); }

/* serviços */
.servicos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--azul); }
.serv { padding: 28px 24px 8px 0; }
.serv + .serv { padding-left: 24px; border-left: 1px solid var(--linha); }
.serv-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; margin-bottom: 18px; }
.serv h3 { color: var(--azul); font-size: 24px; margin-bottom: 16px; }
.serv ul { list-style: none; padding: 0; margin: 0; }
.serv li { padding: 9px 0 9px 18px; position: relative; font-size: 16px; line-height: 1.4; border-bottom: 1px solid var(--papel); }
.serv li::before { content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px; background: var(--amarelo); border-radius: 50%; }

/* circuito fechado: sequência real, numerada */
.circuito { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.circuito::before { content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 2px; background: var(--amarelo); }
.circuito li { position: relative; padding-right: 28px; }
.passo { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--amarelo); color: var(--azul); font: 700 24px var(--tit); margin-bottom: 22px; }
.circuito h3 { font-size: 23px; }
.circuito p { color: var(--suave); font-size: 16px; }
.circuito-fim { margin-top: 36px; padding-top: 24px; border-top: 1px dashed rgba(255,194,14,.6); font: 600 20px/1.35 var(--tit); max-width: none; }

/* obras: barramento com derivações (o filtro) */
.barramento-wrap { overflow-x: auto; scrollbar-width: thin; margin-bottom: 40px; }
.barramento { max-width: var(--larg); min-width: 980px; margin: 0 auto; padding: 0 var(--gut); position: relative; display: grid; grid-template-columns: 64px 1fr; }
.fonte { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: var(--azul); display: grid; place-items: center; }
.fonte img { height: 38px; width: auto; }
.derivacoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.derivacoes::before { content: ""; position: absolute; left: -2px; right: 0; top: 31px; height: 4px; background: var(--amarelo); border-radius: 0 2px 2px 0; }
.deriv { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: start; align-content: start; gap: 4px; padding: 0 12px 0 16px; width: 100%; height: 100%; position: relative; }
.deriv::before { content: ""; position: absolute; left: 24px; top: 33px; width: 2px; height: 34px; background: var(--azul); }
.deriv .no { margin: 60px 0 10px 1px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--azul); background: var(--papel); transition: background .15s, transform .15s; }
.deriv-nome { font: 700 20px/1.1 var(--tit); color: var(--azul); }
.deriv-txt { font-size: 14px; line-height: 1.35; color: var(--cinza); }
.deriv-n { font-size: 13px; color: var(--azul2); font-weight: 600; margin-top: 4px; }
.deriv:hover .no { background: var(--amarelo); }
.deriv.ativo .no { background: var(--amarelo); transform: scale(1.35); box-shadow: 0 0 0 6px rgba(255,194,14,.28); }
.deriv.ativo .deriv-nome { text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.deriv:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; border-radius: 8px; }

.obras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.obra[hidden] { display: none; }
.obra-abrir { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; width: 100%; }
.obra-foto { display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; margin-bottom: 12px; background: var(--linha); }
.obra-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.obra-abrir:hover .obra-foto img { transform: scale(1.04); }
.obra-abrir:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 4px; border-radius: 16px; }
.obra-seg { display: inline-block; justify-self: start; font: 600 13px var(--tit); color: var(--azul); background: var(--branco); border: 1.5px solid var(--azul); border-radius: 999px; padding: 2px 10px; margin: 0 0 4px; }
.obra-nome { font: 700 23px/1.1 var(--tit); color: var(--azul); }
.obra-sub { font-size: 15px; color: var(--cinza); }
.obra-ficha { display: flex; gap: 16px; font-size: 14px; color: var(--tinta); font-weight: 600; margin-top: 4px; }
.obra-ficha span + span { padding-left: 16px; border-left: 1px solid var(--linha); }

.relacao { margin-top: 56px; border-top: 2px solid var(--azul); }
.relacao summary { cursor: pointer; font: 700 22px var(--tit); color: var(--azul); padding: 20px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.relacao summary::-webkit-details-marker { display: none; }
.relacao summary::after { content: "+"; font-size: 30px; color: var(--azul); }
.relacao[open] summary::after { content: "−"; }
.rel-grid { columns: 3 280px; column-gap: 40px; padding-bottom: 16px; }
.rel-grupo { break-inside: avoid; margin-bottom: 28px; }
.rel-grupo h4 { font-size: 19px; color: var(--azul); margin-bottom: 8px; }
.rel-grupo ul { list-style: none; margin: 0; padding: 0; }
.rel-grupo li { font-size: 15px; padding: 5px 0; border-bottom: 1px solid var(--linha); color: var(--tinta); }

/* clientes */
.logos { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.logos li { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; height: 84px; display: grid; place-items: center; padding: 12px 16px; }
.logos img { max-height: 54px; max-width: 100%; width: auto; object-fit: contain; }
.logos-p li { height: 92px; }
.logo-txt { font: 700 17px/1.15 var(--tit); color: var(--azul); text-align: center; }
.sub-h { margin-top: 56px; color: var(--azul); font-size: 26px; }

/* instagram */
.insta-in { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.insta-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.insta-grid a { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.insta-grid a:hover img { opacity: .85; }

/* contato */
.contato { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contato-esq > p { color: var(--suave); font-size: 18px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 32px; }
.campo { display: grid; gap: 6px; }
.campo-l, .form-aviso, .form-acoes, .form-erro { grid-column: 1 / -1; }
.campo label { font: 600 15px var(--tit); color: var(--branco); letter-spacing: .01em; }
.campo input, .campo select, .campo textarea { font: 400 16px var(--txt); color: var(--tinta); background: var(--branco); border: 2px solid transparent; border-radius: 10px; padding: 12px 14px; width: 100%; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--amarelo); }
.campo [aria-invalid="true"] { border-color: #ff8a80; }
.form-aviso { font-size: 14px; color: var(--suave); margin: 0; max-width: none; }
.form-aviso a { color: var(--amarelo); }
.form-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.form-erro { color: #ffb4ab; font-weight: 600; margin: 0; }
.cartao { background: var(--azul); border-radius: 20px; padding: 28px; }
.cartao-nome { font: 700 26px var(--tit); margin: 0; }
.cartao-cargo { color: var(--amarelo); font: 600 16px var(--tit); margin: 0 0 18px; }
.canais { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.canais li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; font-size: 15.5px; }
.canais svg { width: 22px; height: 22px; fill: none; stroke: var(--amarelo); stroke-width: 1.8; stroke-linejoin: round; }
.canais svg .cheio { fill: var(--amarelo); stroke: none; }
.canais span { display: grid; gap: 3px; color: var(--branco); }
.canais a { text-decoration: none; overflow-wrap: anywhere; }
.canais a:hover { color: var(--amarelo); text-decoration: underline; }
.mapa { margin-top: 16px; border-radius: 20px; overflow: hidden; height: 220px; background: var(--azul); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.outros { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-size: 15px; color: var(--suave); }
.outros strong { color: var(--branco); font-weight: 600; }
.outros a { color: var(--amarelo); overflow-wrap: anywhere; }

/* rodapé */
.rodape { background: #01052a; color: var(--suave); padding: 36px 0; font-size: 14px; }
.rodape-in { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.rodape img { width: 84px; height: auto; }
.rodape p { margin: 0; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 18px; }
.rodape nav a { text-decoration: none; color: var(--branco); }
.rodape nav a:hover { color: var(--amarelo); }

/* whatsapp flutuante */
.whats-flut { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(2,8,56,.35); }
.whats-flut svg { width: 32px; height: 32px; fill: #fff; }

/* modal da obra */
.modal { border: 0; padding: 0; border-radius: 20px; width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px); color: var(--tinta); }
.modal::backdrop { background: rgba(2, 8, 56, .78); }
.modal-in { display: grid; grid-template-columns: 1.3fr 1fr; }
.modal-galeria { background: var(--noite); padding: 16px; display: grid; gap: 10px; align-content: start; }
.modal-galeria > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.modal-miniaturas { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-miniaturas button { all: unset; cursor: pointer; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; opacity: .55; border: 2px solid transparent; }
.modal-miniaturas button[aria-current="true"] { opacity: 1; border-color: var(--amarelo); }
.modal-miniaturas button:focus-visible { outline: 3px solid var(--amarelo); }
.modal-miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.modal-txt { padding: 32px 28px 28px; overflow-y: auto; }
.modal-txt h3 { font-size: 32px; color: var(--azul); margin: 6px 0 4px; }
.modal-sub { color: var(--azul2); font: 600 17px var(--tit); }
.ficha { margin: 20px 0; display: grid; gap: 0; }
.ficha div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linha); font-size: 15px; }
.ficha dt { font: 600 14px var(--tit); color: var(--cinza); }
.ficha dd { margin: 0; }
.credito { font-size: 13px; color: var(--cinza); }
.modal-fechar { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--branco); color: var(--azul); border: 1.5px solid var(--azul); border-radius: 999px; padding: 6px 14px; font: 600 15px var(--tit); cursor: pointer; }

/* responsivo */
@media (max-width: 1020px) {
  .servicos { grid-template-columns: 1fr 1fr; }
  .serv:nth-child(3) { border-left: 0; padding-left: 0; }
  .circuito { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .circuito::before { display: none; }
  .obras { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--noite); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px var(--gut) 20px; border-bottom: 2px solid var(--amarelo); }
  .menu.aberto { display: flex; }
  .menu a:not(.btn) { padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  .menu .btn { margin-top: 14px; }
  .capa-in, .dois, .insta-in, .contato { grid-template-columns: 1fr; }
  .capa-fotos { grid-template-rows: 170px 140px; }
  .numeros { grid-template-columns: 1fr 1fr; }
  .rodape-in { grid-template-columns: 1fr; gap: 16px; }
  .modal-in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .servicos, .circuito, .obras, .form { grid-template-columns: 1fr; }
  .serv + .serv { border-left: 0; padding-left: 0; }
  .mvv div { grid-template-columns: 1fr; gap: 4px; }
  .barramento { min-width: 640px; }
  .deriv-txt { display: none; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .modal-txt h3 { font-size: 26px; }
}