/* Power Vending — produtos.css: estilos exclusivos da página Máquinas (regra D-15).
   Carregar logo depois de assets/css/site.css; usa os tokens e componentes dele (.secao, .secao__cabeca, .lead, .sobretitulo, .botao, .pendente, .revelar, .fundo-animado). */
/* Hero curto + fila de máquinas na mesma escala (âncoras) */
.hero-maquinas { padding-bottom: clamp(32px, 4vw, 56px); }
.hero-maquinas__brilho {
  position: absolute; left: 50%; top: 20%; width: 120%; height: 100%; max-width: 1400px; transform: translateX(-50%);
  border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(42,65,154,0.5) 0%, rgba(22,172,227,0.25) 45%, transparent 72%);
}
.hero-maquinas .secao__cabeca { margin-bottom: clamp(28px, 4vw, 48px); }
.hero-maquinas__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.lineup { margin: 0; }
.lineup__lista {
  display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding: 8px 4px 16px; margin: 0;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  border-bottom: 1px solid var(--linha-forte);
}
.lineup__lista li { flex: 0 0 auto; scroll-snap-align: center; }
.lineup__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 12px; border-radius: var(--raio); color: var(--texto-2); transition: background .3s, color .3s, transform .4s var(--ease); }
.lineup__item:hover, .lineup__item:focus-visible { background: rgba(255,255,255,0.05); color: var(--texto); }
/* fotos das máquinas sem movimento vertical (Roberta, 01/10, D-21): entram só com fade */
.lineup.revelar, .maquina-sec__midia.revelar, .destaque-abastecimento.revelar { transform: none; }
/* --h = altura do palco; as imagens têm todas 1200 px de altura no mesmo canvas, por isso height:100% = mesma escala real */
.lineup__palco { --h: 150px; height: var(--h); display: flex; align-items: flex-end; justify-content: center; }
.lineup__palco img { height: 100%; width: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); transition: filter .4s; }
.lineup__item:hover img { filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(22,172,227,.45)); }
.lineup__nome { font-family: var(--fonte-titulo); font-weight: 600; font-size: .95rem; color: var(--texto); }
.lineup__nota { margin: 12px 0 0; font-family: var(--fonte-dados); font-size: .78rem; letter-spacing: .04em; color: var(--pv-ciano); }
/* larguras somadas dos 6 canvases = 4448 px para 1200 px de altura → --h = 170 ocupa ≈ 630 px + espaçamentos; --h = 250 ocupa ≈ 930 px */
/* A altura da fila acompanha a largura disponível para as 6 máquinas caberem sem barra de rolagem no desktop
   (antes: 250 px fixos = 1.140 px de conteúdo num container de no máximo 1.104 px). A escala entre as máquinas
   não muda (D-18): todas usam a mesma --h. As imagens somam ~3,75 × --h de largura; o resto é espaçamento.
   Abaixo de ~760 px a fila continua deslizando com o dedo, de propósito. */
@media (min-width: 620px) { .lineup__palco { --h: clamp(130px, calc((100vw - 200px) / 3.75), 170px); } .lineup__lista { gap: 8px; justify-content: space-between; } }
@media (min-width: 1000px) { .lineup__palco { --h: clamp(170px, calc((100vw - 322px) / 3.75), 238px); } .lineup__item { padding: 10px 12px 14px; } .lineup__lista { gap: 12px; } }

/* Barra de âncoras (pílulas) — fixa abaixo do header no desktop */
.ancoras { position: relative; z-index: 5; background: rgba(8,10,28,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.ancoras__lista { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin: 0; scrollbar-width: none; }
.ancoras__lista::-webkit-scrollbar { display: none; }
.ancoras__lista li { flex: 0 0 auto; }
.ancoras__link { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linha-forte); font-family: var(--fonte-titulo); font-weight: 600; font-size: .88rem; color: var(--texto-2); transition: border-color .3s, color .3s, background .3s; }
.ancoras__link:hover { border-color: var(--pv-ciano); color: var(--texto); }
.ancoras__link.ativo { background: var(--pv-ciano); border-color: var(--pv-ciano); color: var(--pv-marinho); }
@media (min-width: 900px) { .ancoras { position: sticky; top: var(--altura-header); } }


/* Seção de cada máquina */
.maquina-sec { border-top: 1px solid var(--linha); scroll-margin-top: calc(var(--altura-header) + 56px); }
.maquina-sec:nth-of-type(odd) { background: linear-gradient(180deg, rgba(13,16,48,.55), transparent 40%); }
.maquina-sec__cabeca { max-width: 820px; margin-bottom: clamp(28px, 4vw, 48px); }
.maquina-sec__cabeca h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 14px; }
.maquina-sec__grade { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.maquina-sec__midia { display: grid; gap: 16px; }
.maquina-sec__texto { display: grid; gap: clamp(24px, 3vw, 36px); }
.maquina-sec__intro { font-size: 1.08rem; color: var(--texto-2); margin: 0; }
.maquina-sec__texto h3 { font-size: 1.25rem; margin-bottom: 14px; }
.maquina-sec__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  /* texto enxuto (parágrafo + ficha + diferenciais + botão): galeria e texto lado a lado, alinhados pelo topo, sem coluna fixa */
  .maquina-sec__grade { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: start; }
}

/* Galeria de vistas: card claro no modelo dos cards da Home (faixa ciano + arco neon) */
.galeria {
  margin: 0; background: var(--pv-branco); color: var(--pv-marinho); border-radius: var(--raio-p); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(22,172,227,.25), 0 18px 50px rgba(0,0,0,.45);
}
.galeria__cabeca { background: var(--pv-ciano); color: var(--pv-marinho); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; flex-wrap: wrap; }
.galeria__dims { font-family: var(--fonte-dados); font-size: .9rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.galeria__dims small { font-size: .72rem; opacity: .8; }
.galeria__vista { font-family: var(--fonte-titulo); font-weight: 600; font-size: .9rem; }
/* o palco tem a proporção do canvas mais largo (Carrossel Max, 1024×1200); todas as imagens ocupam 100 % da altura → mesma escala */
.galeria__palco { position: relative; aspect-ratio: 1024 / 1200; max-height: min(72vh, 560px); margin: 0 auto; overflow: hidden; perspective: 1200px; touch-action: pan-y; }
.galeria__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  opacity: 0; transform: rotateY(-6deg); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  backface-visibility: hidden; transform-origin: 50% 88%; filter: drop-shadow(0 6px 10px rgba(39,42,102,.25)); pointer-events: none;
}
.galeria__img.ativa { opacity: 1; transform: none; }
.galeria__sombra {
  position: absolute; left: 20%; width: 60%; top: 86%; height: 10%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(39,42,102,.55) 0%, rgba(39,42,102,.25) 45%, transparent 72%);
  filter: blur(6px); animation: sombra-pulso 4.5s ease-in-out infinite;
}
.galeria__arco {
  position: absolute; left: 6%; width: 88%; top: 86%; height: 12%; border-radius: 50%;
  border: 2px solid rgba(22,172,227,.95);
  box-shadow: 0 0 8px rgba(22,172,227,.9), 0 0 22px rgba(22,172,227,.45), 0 0 48px rgba(22,172,227,.2), inset 0 0 18px rgba(22,172,227,.3);
  background: radial-gradient(ellipse at center, rgba(22,172,227,.16) 0%, rgba(22,172,227,.06) 55%, transparent 72%);
  animation: arco-pulso 4.5s ease-in-out infinite;
}
.galeria__seta {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(39,42,102,.25); background: rgba(255,255,255,.85); color: var(--pv-marinho); font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center; opacity: 0; transition: opacity .3s, background .3s;
}
.galeria__seta--ant { left: 10px; } .galeria__seta--prox { right: 10px; }
.galeria__palco:hover .galeria__seta, .galeria__seta:focus-visible { opacity: 1; }
.galeria__seta:hover { background: var(--pv-ciano); }
@media (hover: none) { .galeria__seta { opacity: .9; width: 36px; height: 36px; } }
.galeria__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px 4px; }
.galeria__tab {
  display: grid; justify-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: var(--raio-p); border: 1px solid rgba(39,42,102,.15); background: var(--pv-fundo-claro);
  color: var(--pv-marinho); font-family: var(--fonte-dados); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; transition: border-color .3s, box-shadow .3s;
}
.galeria__tab img { height: 56px; width: auto; }
.galeria__tab:hover { border-color: var(--pv-ciano); }
.galeria__tab[aria-selected="true"] { border-color: var(--pv-ciano); box-shadow: inset 0 0 0 1px var(--pv-ciano), 0 0 14px rgba(22,172,227,.35); background: var(--pv-branco); }
.galeria__legenda { padding: 8px 14px 14px; font-size: .78rem; color: #5C6386; }

/* Ficha técnica — lista compacta; no celular vira acordeão (details) */
.ficha { border: 1px solid var(--linha); border-radius: var(--raio); background: rgba(255,255,255,0.025); overflow: hidden; }
.ficha__resumo { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; }
.ficha__resumo::-webkit-details-marker { display: none; }
.ficha__resumo h3 { margin: 0; font-size: 1.1rem; }
.ficha__seta { width: 10px; height: 10px; border-right: 2px solid var(--pv-ciano); border-bottom: 2px solid var(--pv-ciano); transform: rotate(45deg); transition: transform .3s; margin-right: 4px; }
.ficha[open] .ficha__seta { transform: rotate(-135deg); }
.ficha__lista { margin: 0; padding: 0 20px 8px; }
.ficha__item { display: grid; grid-template-columns: minmax(0, 42%) 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linha); font-size: .92rem; }
.ficha__item dt { color: var(--texto-3); }
.ficha__item dd { margin: 0; color: var(--texto); }
@media (min-width: 900px) {
  .ficha__resumo { cursor: default; pointer-events: none; }
  .ficha__seta { display: none; }
}

/* Diferenciais */
.diferenciais__lista { display: grid; gap: 14px; margin: 0; }
.diferenciais__lista li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.diferenciais__lista strong { font-family: var(--fonte-titulo); font-weight: 600; display: block; margin-bottom: 2px; }
.diferenciais__lista p { margin: 0; color: var(--texto-2); font-size: .95rem; }
.dif__icone { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(22,172,227,.14); color: var(--pv-ciano); margin-top: 2px; }
.dif__icone svg { width: 16px; height: 16px; }
@media (min-width: 620px) { .diferenciais__lista { grid-template-columns: 1fr 1fr; } }

/* Destaque: abastecimento da Storage (réguas e fusos) */
.destaque-abastecimento { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: var(--raio); border: 1px solid var(--linha); background: linear-gradient(135deg, rgba(42,65,154,.35), rgba(13,16,48,.6)); }
.destaque-abastecimento h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
.destaque-abastecimento p { color: var(--texto-2); }
.destaque-abastecimento__pontos { display: grid; gap: 8px; margin: 0 0 16px; }
.destaque-abastecimento__pontos li { position: relative; padding-left: 22px; font-size: .95rem; }
.destaque-abastecimento__pontos li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--pv-ciano); box-shadow: 0 0 10px var(--pv-ciano); }
.destaque-abastecimento__nota { margin: 0; }
.destaque-abastecimento__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.destaque-abastecimento__fotos figure { margin: 0; }
.destaque-abastecimento__fotos img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: var(--raio-p); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.destaque-abastecimento__fotos figcaption { margin-top: 8px; font-family: var(--fonte-dados); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pv-ciano); }
@media (min-width: 900px) { .destaque-abastecimento { grid-template-columns: 1fr 1fr; } }

/* Tabela comparativa — rolagem horizontal no celular */
.comparativo { border-top: 1px solid var(--linha); }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linha); border-radius: var(--raio); background: rgba(255,255,255,0.02); }
.tabela-rolagem:focus-visible { outline: 3px solid var(--pv-ciano); }
.tabela-comparativa { width: 100%; min-width: 880px; border-collapse: collapse; font-size: .92rem; }
.tabela-comparativa th, .tabela-comparativa td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela-comparativa thead th { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1rem; color: var(--texto); background: rgba(22,172,227,.08); position: sticky; top: 0; }
.tabela-comparativa thead th a { color: var(--pv-ciano); }
.tabela-comparativa thead th a:hover { text-decoration: underline; }
.tabela-comparativa tbody th { font-weight: 500; color: var(--texto-3); white-space: nowrap; background: rgba(255,255,255,0.02); position: sticky; left: 0; }
.tabela-comparativa td { color: var(--texto-2); }
.tabela-comparativa td.sim { color: var(--pv-ciano); font-weight: 600; }
.tabela-comparativa tr:last-child th, .tabela-comparativa tr:last-child td { border-bottom: 0; }
.comparativo__nota { margin: 12px 0 0; font-size: .82rem; color: var(--texto-3); }
.comparativo__cta { margin-top: clamp(40px, 6vw, 72px); padding: clamp(28px, 4vw, 48px); border-radius: var(--raio); text-align: center; background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(42,65,154,.5), rgba(13,16,48,.6) 70%); border: 1px solid var(--linha); }
.comparativo__cta h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 10px; }
.comparativo__cta p { color: var(--texto-2); max-width: 56ch; margin: 0 auto 24px; }

@media (prefers-reduced-motion: reduce) {
  .galeria__img, .lineup__item, .lineup__palco img, .galeria__seta { transition: none; }
}