/* ==========================================================================
   Power Vending — solucao.css (estilos exclusivos da página Solução)
   Regra D-13: site.css só é alterado pela Home ou pela integração; cada página
   tem o seu CSS, carregado logo depois do site.css. Usa os tokens do site.css
   (--fundo, --texto, --linha, --pv-ciano, --raio, --ease…) e reutiliza os
   componentes .secao, .secao__cabeca, .lead, .cartao, .numeros, .notebook,
   .erpv__painel e .revelar. Sem "Saiba mais" e sem seção de assinatura desde 06/10.
   ========================================================================== */

/* ---------- 1. HERO (texto à esquerda, notebook da Home à direita) ---------- */
.hero-pagina { overflow-x: clip; }
.hero-pagina__grade { display: grid; gap: clamp(32px, 6vw, 72px); align-items: center; }
@media (min-width: 900px) { .hero-pagina__grade { grid-template-columns: 1fr 1.05fr; } }
.hero-pagina h1 { margin: 6px 0 18px; max-width: 16ch; font-size: clamp(1.9rem, 2.6vw + 0.9rem, 3rem); }
.hero-pagina .lead { margin-bottom: 16px; max-width: 46ch; }
.hero-pagina__texto > p:not(.lead) { color: var(--texto-2); max-width: 56ch; }
.hero-pagina__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 599px) { .hero-pagina__acoes .botao { flex: 1 1 auto; } }
.hero-pagina .notebook { max-width: 760px; position: relative; }
.hero-pagina .notebook::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 45%; width: 100%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(22,172,227,0.26) 0%, rgba(42,65,154,0.18) 35%, transparent 65%);
}
@media (min-width: 900px) { .hero-pagina .notebook::before { width: 120%; } }
.hero-pagina .notebook__quadros { aspect-ratio: 1400 / 830; }

/* ---------- 2. JANELA DE SISTEMA (moldura escura com três pontos) ---------- */
.janela {
  position: relative; background: #0B0E24; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  padding: 30px 6px 6px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); overflow: hidden;
}
.janela::before {
  content: ''; position: absolute; left: 14px; top: 11px; width: 9px; height: 9px; border-radius: 50%;
  background: #FF5F57; box-shadow: 15px 0 0 #FEBC2E, 30px 0 0 #28C840;
}
.janela img { width: 100%; height: auto; border-radius: var(--raio-p); }
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--raio-p); overflow: hidden; }
.mosaico figure { margin: 0; position: relative; }
.mosaico img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.mosaico figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px;
  font-family: var(--fonte-dados); font-size: .62rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pv-ciano); background: linear-gradient(180deg, transparent, rgba(8,10,28,.85));
}

/* ---------- 3. CARDS "PARA QUEM COMPRA" (usa .cartao do site.css) ---------- */
.cartao--compacto h3 { font-size: 1.15rem; margin: 16px 0 8px; }
.cartao--compacto p { font-size: .95rem; }

/* ---------- 4. EXPLORADOR "O QUE O ERPV FAZ" ----------
   Desktop: lista numerada à esquerda (abas) + um painel à direita, todos os painéis na mesma célula
   da grade (só o .ativo aparece). Celular: acordeão — o painel abre logo abaixo do item. */
.explorador__lista { list-style: none; margin: 0; padding: 0; counter-reset: recurso; }
.explorador__item { margin: 0; }
.explorador__tab {
  display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 14px 14px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--linha);
  color: var(--texto-2); font-family: var(--fonte-titulo); font-weight: 500; font-size: 1rem; line-height: 1.3;
  position: relative; cursor: pointer; transition: color .25s, background .25s;
}
.explorador__tab:hover { color: var(--texto); background: rgba(255,255,255,0.03); }
.explorador__tab[aria-selected="true"] { color: var(--pv-ciano); background: rgba(22,172,227,0.06); }
.explorador__num { font-family: var(--fonte-dados); font-size: .78rem; letter-spacing: .1em; color: var(--texto-3); }
.explorador__tab[aria-selected="true"] .explorador__num { color: var(--pv-ciano); }
.explorador__seta { width: 18px; height: 18px; color: var(--texto-3); transition: transform .3s var(--ease); }
.explorador__tab[aria-selected="true"] .explorador__seta { color: var(--pv-ciano); }
/* barra de progresso do item ativo (duração = --intervalo, definida pelo JS) */
.explorador__tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pv-ciano);
  transform: scaleX(0); transform-origin: left; opacity: 0;
}
.explorador__tab[aria-selected="true"]::after { opacity: 1; }
.explorador.andando .explorador__tab[aria-selected="true"]::after { transform: scaleX(1); transition: transform var(--intervalo, 7s) linear; }

.explorador__painel { display: none; padding: 20px 0 24px; }
.explorador__painel.ativo { display: block; }
.explorador__painel h3 { font-size: clamp(1.25rem, 1.2vw + .8rem, 1.6rem); margin: 18px 0 10px; max-width: 24ch; }
.explorador__frase { color: var(--texto-2); margin: 0 0 12px; max-width: 60ch; }
.beneficio-linha {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 0;
  padding: 10px 14px; border-left: 2px solid var(--pv-ciano); border-radius: 0 var(--raio-p) var(--raio-p) 0;
  background: linear-gradient(90deg, rgba(22,172,227,0.10), rgba(22,172,227,0.02)); color: var(--texto);
}
.beneficio-linha strong { font-family: var(--fonte-dados); font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pv-ciano); }

@media (min-width: 900px) {
  .explorador__lista {
    display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; grid-template-rows: repeat(9, auto);
    column-gap: clamp(28px, 4vw, 56px); align-items: start;
  }
  .explorador__item { display: contents; }
  .explorador__tab { grid-column: 1; }
  .explorador__seta { display: none; }
  .explorador__painel {
    grid-column: 2; grid-row: 1 / -1; display: block; padding: 0;
    opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s;
  }
  .explorador__painel.ativo { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
}
/* No celular, a lista é um acordeão e a seta gira no item aberto */
@media (max-width: 899px) {
  .explorador__tab[aria-selected="true"] .explorador__seta { transform: rotate(180deg); }
  .explorador__painel { border-bottom: 1px solid var(--linha); }
}

/* Diagrama de integração (SVG inline, item 09) */
.diagrama { width: 100%; height: auto; display: block; font-family: var(--fonte-titulo); }
.diagrama text { fill: var(--texto); font-size: 15px; font-weight: 600; }
.diagrama .diagrama__mono { font-family: var(--fonte-dados); font-weight: 400; font-size: 11px; fill: var(--texto-3); letter-spacing: .08em; }
.diagrama .diagrama__linha { stroke: rgba(22,172,227,0.45); stroke-width: 1.5; fill: none; stroke-dasharray: 4 6; }
.diagrama .diagrama__no { fill: rgba(255,255,255,0.04); stroke: var(--linha-forte); }
.diagrama .diagrama__centro { fill: rgba(22,172,227,0.14); stroke: var(--pv-ciano); }
.diagrama .diagrama__centro-texto { fill: var(--pv-ciano); font-size: 22px; letter-spacing: .04em; }

/* ---------- 5. LOGÍSTICA REVERSA — cena: anel de 4 passos + Locker + registro do ERPV ---------- */
.painel-reversa { position: relative; }
.painel-reversa h2 { font-size: clamp(1.6rem, 2vw + 0.8rem, 2.4rem); margin-bottom: 16px; max-width: 18ch; }
.painel-reversa > div > p { color: var(--texto-2); }
@media (min-width: 1000px) { .painel-reversa { grid-template-columns: 1fr 1.1fr; } }
.tambem-em { margin: 18px 0 0; font-family: var(--fonte-dados); font-size: .8rem; letter-spacing: .04em; color: var(--texto-3); }
.tambem-em a { color: var(--texto); border-bottom: 1px solid var(--linha-forte); }
.tambem-em a:hover { color: var(--pv-ciano); border-color: var(--pv-ciano); }

.ciclo { position: relative; width: min(100%, 520px); margin: 0 auto; }
.ciclo__palco { position: relative; aspect-ratio: 1; }
.ciclo__anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ciclo__trilho { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 2; }
.ciclo__traco {
  fill: none; stroke: var(--pv-ciano); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 110 1460; filter: drop-shadow(0 0 6px rgba(22,172,227,.8));
  animation: ciclo-girar 9s linear infinite;
}
@keyframes ciclo-girar { to { stroke-dashoffset: -1570; } }
.ciclo__seta { fill: var(--pv-ciano); opacity: .9; }
.ciclo__no { fill: #0D1030; stroke: var(--linha-forte); stroke-width: 1.5; }
.ciclo__no--erpv { fill: rgba(22,172,227,.16); stroke: var(--pv-ciano); }
.ciclo__rotulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; fill: var(--texto); text-anchor: middle; }
.ciclo__passo { font-family: var(--fonte-dados); font-size: 10px; letter-spacing: .12em; fill: var(--texto-3); text-anchor: middle; }
.ciclo__maquina {
  position: absolute; left: 50%; top: 50%; width: 66%; transform: translate(-50%, -48%);
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.65));
}
/* card no estilo do ERPV simulando o registro da devolução */
.registro {
  position: absolute; left: -4%; top: 62%; z-index: 2; width: min(48%, 250px);
  background: #FFFFFF; color: #14161F; border-radius: 10px; padding: 12px 14px 12px 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(22,172,227,.35);
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start;
  font-family: var(--fonte-corpo); font-size: .82rem; line-height: 1.35;
}
.registro__icone { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #E6F7EE; color: #1E8E5A; }
.registro__icone svg { width: 18px; height: 18px; }
.registro__titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: .92rem; color: #272A66; display: block; }
.registro__meta { font-family: var(--fonte-dados); font-size: .72rem; color: #6B6F80; display: block; margin-top: 2px; }
.registro__chip {
  display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px;
  background: #E6F7EE; color: #1E8E5A; font-size: .72rem; font-weight: 600;
}
.registro__nota { display: block; font-family: var(--fonte-dados); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: #9AA0B4; margin-bottom: 2px; }
@media (max-width: 599px) {
  .ciclo { padding: 0 22px; }
  .ciclo__maquina { width: 60%; }
  .registro { position: static; width: 100%; margin-top: 14px; }
}

/* ---------- 6. GOVERNANÇA / CHAMADA ---------- */
.secao__cabeca--centro { margin-left: auto; margin-right: auto; text-align: center; }
.secao__cabeca--centro .lead { margin-left: auto; margin-right: auto; }
.secao--apertada { padding-top: 0; }
.chamada { text-align: center; }
.chamada h2 { max-width: 20ch; margin: 0 auto 18px; }
.chamada .lead { margin: 0 auto 32px; }

/* ---------- 7. MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  .ciclo__traco { animation: none; stroke-dasharray: none; }
  .explorador__tab::after { transition: none !important; }
  .explorador__painel, .explorador__seta { transition: none; }
}

/* fotos de pessoas (identificação) sem movimento vertical (Roberta, 01/10, D-21): entram só com fade
   (o painel da logística reversa, .erpv__painel, já está coberto em site.css) */
.explorador__lista.revelar { transform: none; }