/* ============================================================
   HOME — elementos visuais da primeira versão do site.
   A home é a vitrine completa: malha técnica, etiqueta de obra,
   barra de credibilidade, seções de serviço com foto e FAQ.
   As páginas internas continuam com o visual editorial próprio.
   ============================================================ */

/* ---------------------------------------------------------
   MALHA TÉCNICA (plano cartesiano de projeto elétrico)
   --------------------------------------------------------- */

.grid-plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-dark) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  opacity: 0.85;
}

/* ---------------------------------------------------------
   RÓTULO TÉCNICO (mono com traço — assinatura da v1)
   --------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-5);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

/* ---------------------------------------------------------
   HERO — halo, etiqueta de obra e linha de corrente
   --------------------------------------------------------- */

.hero {
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -18%;
  left: 50%;
  width: min(76rem, 130%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(111, 190, 68, 0.09) 0%,
    rgba(38, 53, 61, 0.16) 34%,
    transparent 62%
  );
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

/* --- Cena técnica animada ---
   No lugar de foto: um esquema de engenharia desenhado à mão, com a
   energia pulsando dos módulos para a casa e para o carro. É vivo,
   é da marca, e não depende da resolução das fotos disponíveis. */

.hero__scene {
  position: relative;
  width: min(100%, 30rem);
  margin-inline: auto;
}

.hero__scene::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(111, 190, 68, 0.13) 0%,
    rgba(111, 190, 68, 0.04) 38%,
    transparent 64%
  );
  pointer-events: none;
}

.hscene {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

.hscene-dash {
  fill: none;
  stroke: var(--line-dark);
  stroke-width: 1;
  stroke-dasharray: 3 10;
  stroke-linecap: round;
  transform-origin: 240px 260px;
  animation: hscene-spin 90s linear infinite;
}

@keyframes hscene-spin {
  to { transform: rotate(360deg); }
}

.hscene-mark {
  fill: none;
  stroke: var(--line-dark);
  stroke-width: 1;
  stroke-linecap: round;
}

.hscene-face {
  fill: rgba(111, 190, 68, 0.06);
  stroke: none;
  animation: hscene-glow 6s ease-in-out infinite alternate;
}

@keyframes hscene-glow {
  from { fill: rgba(111, 190, 68, 0.045); }
  to   { fill: rgba(111, 190, 68, 0.1); }
}

.hscene-strong {
  fill: none;
  stroke: var(--line-dark-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hscene-cell {
  fill: none;
  stroke: var(--line-dark);
  stroke-width: 1;
}

.hscene-line {
  fill: none;
  stroke: var(--line-dark-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hscene-green {
  fill: none;
  stroke: var(--brand-green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hscene-label {
  fill: var(--text-on-dark-low);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* pulsos de corrente percorrendo os condutores */
.hscene-pulse {
  fill: none;
  stroke: var(--brand-green-bright);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 14 400;
  animation: hscene-travel 4.2s linear infinite;
}

.hscene-pulse--b {
  animation-delay: 2.1s;
}

@keyframes hscene-travel {
  from { stroke-dashoffset: 414; }
  to   { stroke-dashoffset: 0; }
}

/* pulso mais curto, calibrado para o cabo de recarga (~270 unidades) */
.hscene-pulse--cable {
  stroke-dasharray: 12 300;
  animation-name: hscene-travel-cable;
  animation-duration: 3s;
}

@keyframes hscene-travel-cable {
  from { stroke-dashoffset: 312; }
  to   { stroke-dashoffset: 0; }
}

/* bateria enchendo em ciclo: carga sobe, segura e recomeça */
.hscene-batt {
  fill: rgba(111, 190, 68, 0.75);
  stroke: none;
  transform-origin: 304px 157px;
  animation: hscene-batt 6s ease-in-out infinite;
}

@keyframes hscene-batt {
  0%   { transform: scaleX(0.12); opacity: 1; }
  68%  { transform: scaleX(0.96); opacity: 1; }
  84%  { transform: scaleX(0.96); opacity: 1; }
  92%  { transform: scaleX(0.96); opacity: 0; }
  93%  { transform: scaleX(0.12); opacity: 0; }
  100% { transform: scaleX(0.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hscene-batt {
    animation: none;
    transform: scaleX(0.75);
  }
}

/* nó de junção com anel de operação */
.hscene-node {
  fill: var(--brand-green-bright);
  stroke: none;
}

.hscene-ring {
  fill: none;
  stroke: var(--brand-green);
  stroke-width: 1.5;
  transform-origin: 240px 216px;
  animation: hscene-ring 2.4s var(--ease-out) infinite;
}

@keyframes hscene-ring {
  0%   { transform: scale(1); opacity: 0.9; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hscene-dash,
  .hscene-face,
  .hscene-ring {
    animation: none;
  }

  .hscene-pulse {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.35;
  }

  .hscene-ring {
    opacity: 0.4;
  }
}

.hero__note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-on-dark-low);
}

/* linha de corrente — divisor animado do hero */
.current-line {
  position: relative;
  height: 1px;
  margin-top: clamp(3.5rem, 2rem + 5vw, 6rem);
  background: var(--line-dark);
  overflow: hidden;
}

.current-line::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: linear-gradient(
    to right,
    transparent,
    var(--brand-green) 45%,
    var(--brand-green-bright) 55%,
    transparent
  );
  animation: current-line-travel 5.5s var(--ease-in-out) infinite;
}

@keyframes current-line-travel {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(394%); }
}

@media (prefers-reduced-motion: reduce) {
  .current-line::after {
    animation: none;
    opacity: 0.35;
  }
}

/* ---------------------------------------------------------
   BARRA DE CREDIBILIDADE
   --------------------------------------------------------- */

.credbar {
  background: var(--ink-900);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.credbar__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 56rem) {
  .credbar__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }
}

.credbar__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--line-dark);
}

.credbar__value {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--text-on-dark);
  line-height: 1.3;
}

.credbar__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark-low);
}

/* ---------------------------------------------------------
   O PROBLEMA (3 colunas com fio verde no topo)
   --------------------------------------------------------- */

.problem__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 52rem) {
  .problem__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-7);
  }
}

.problem__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--brand-green);
}

.problem__item h3 {
  font-size: var(--fs-xl);
  letter-spacing: var(--track-tight);
}

.problem__item p {
  color: var(--text-mid);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ---------------------------------------------------------
   PILARES (cards brancos com ícone, selo e hover)
   --------------------------------------------------------- */

.card--light {
  background: var(--white);
  border-color: var(--line-light);
  box-shadow: var(--shadow-sm);
}

.card--hover {
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.card--hover:hover {
  transform: translateY(-4px);
  border-color: var(--line-green);
  box-shadow: var(--shadow-md);
}

.pillar {
  gap: var(--sp-4);
}

.pillar__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

.pillar--flag {
  border-color: var(--line-green);
  background:
    linear-gradient(to bottom, rgba(111, 190, 68, 0.05), rgba(255, 255, 255, 0) 55%),
    var(--white);
}

.pillar__badge {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4375rem 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  color: var(--text-mid);
  white-space: nowrap;
}

.pill--accent {
  border-color: var(--line-green);
  color: var(--accent);
  background: rgba(111, 190, 68, 0.07);
}

.pill__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--accent);
  flex: none;
}

/* ---------------------------------------------------------
   FOTOS COM ZOOM NO HOVER
   --------------------------------------------------------- */

.photo--zoom img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.photo--zoom:hover img {
  transform: scale(1.035);
}

/* ---------------------------------------------------------
   PAGAMENTO COM MALHA DE FUNDO
   --------------------------------------------------------- */

.payment--plane {
  position: relative;
  overflow: hidden;
}

.payment--plane > * {
  position: relative;
  z-index: 1;
}

.payment--plane > .grid-plane {
  z-index: 0;
}

/* ---------------------------------------------------------
   ELETROMOBILIDADE (brilho de canto da v1)
   --------------------------------------------------------- */

.ev-glow {
  position: relative;
  overflow: hidden;
}

.ev-glow::before {
  content: "";
  position: absolute;
  bottom: -30%;
  right: -10%;
  width: min(52rem, 90%);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(111, 190, 68, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.ev-glow > .container {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   ETAPAS COM PONTO VERDE (diagrama da v1)
   --------------------------------------------------------- */

.steps--dot .step {
  position: relative;
  border-top: 0;
  padding-top: var(--sp-6);
}

.steps--dot .step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.steps--dot .step::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--accent);
  animation: dot-ping 4.2s var(--ease-out) infinite;
}

/* o pulso corre em sequência pelas etapas: 01 → 02 → 03 → 04 */
.steps--dot .step:nth-child(2)::after { animation-delay: 0.7s; }
.steps--dot .step:nth-child(3)::after { animation-delay: 1.4s; }
.steps--dot .step:nth-child(4)::after { animation-delay: 2.1s; }

@keyframes dot-ping {
  0%        { box-shadow: 0 0 0 0 rgba(111, 190, 68, 0.45); }
  55%, 100% { box-shadow: 0 0 0 12px rgba(111, 190, 68, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .steps--dot .step::after {
    animation: none;
  }
}