/* ═══ solucoes-v2.css — "Nossas soluções" como acordeão por clique (MODELO 27/09/2026) ═══
   Substitui o slider antigo (troca por hover + avanço automático). Mesma linguagem do FAQ: mesmo ícone +/−, mesma
   curva e o mesmo tempo de abertura do texto. Uma solução aberta por vez.
   Desktop (≥ 901 px): lista à esquerda | palco de imagem à direita, nas colunas do cabeçalho (.9fr / 1.1fr).
   Celular: palco em cima, lista embaixo.
   Troca de imagem: a nova foto é revelada de baixo para cima (ou de cima para baixo, se voltou na lista), como uma
   etiqueta saindo, e assenta do zoom; depois o vídeo da solução entra por cima com um fade e uma barra dourada
   o acompanha. Movimento todo em solucoes-v2.js; aqui só estados. */
html body .acsx{--sx-ease:cubic-bezier(.22,.61,.36,1);--sx-io:cubic-bezier(.77,0,.18,1);--sx-verde:#0a4323;--sx-ouro:#cfa048;--sx-ouro-esc:#a48334;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(36px,4.5vw,72px);align-items:center;margin-top:0}

/* ── lista ── */
html body .acsx-list{border-top:1px solid rgba(207,160,72,.32)}
html body .acsx-item{position:relative;border-bottom:1px solid rgba(207,160,72,.32)}
html body .acsx-h{margin:0;font:inherit}
html body .acsx .acsx-btn,html body .acsx .acsx-btn:hover,html body .acsx .acsx-btn:focus,html body .acsx .acsx-btn:active{
  all:unset;box-sizing:border-box;display:grid;grid-template-columns:34px 1fr 28px;align-items:center;column-gap:14px;width:100%;
  padding:21px 0;cursor:pointer;background:transparent !important;color:inherit !important;-webkit-tap-highlight-color:transparent}
html body .acsx .acsx-btn:focus-visible{outline:2px solid var(--sx-ouro);outline-offset:4px;border-radius:6px}
html body .acsx-num{font:italic 500 14px/1 'Crimson Pro',Georgia,serif;letter-spacing:.08em;color:rgba(164,131,52,.55);font-variant-numeric:tabular-nums;
  transition:color .45s var(--sx-ease)}
html body .acsx-title{font:600 clamp(19px,1.45vw,23px)/1.2 'Crimson Pro',Georgia,serif;color:rgba(10,67,35,.5);-webkit-text-fill-color:currentColor;
  transition:color .45s var(--sx-ease),transform .45s var(--sx-ease);transform-origin:left center}
html body .acsx-item:not(.is-open) .acsx-btn:hover .acsx-title{color:rgba(10,67,35,.82);transform:translateX(5px)}
html body .acsx-item:not(.is-open) .acsx-btn:hover .acsx-num{color:var(--sx-ouro-esc)}
html body .acsx-item.is-open .acsx-title{color:var(--sx-verde)}
html body .acsx-item.is-open .acsx-num{color:var(--sx-ouro-esc)}
/* ícone igual ao do FAQ */
html body .acsx-ico{position:relative;justify-self:end;width:28px;height:28px;border-radius:50%;border:1px solid rgba(207,160,72,.5);
  transition:transform .45s var(--sx-ease),background-color .3s ease,border-color .3s ease}
html body .acsx-ico::before,html body .acsx-ico::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--sx-ouro-esc);
  transform:translate(-50%,-50%);transition:background-color .3s ease}
html body .acsx-ico::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--sx-ease),background-color .3s ease}
html body .acsx-item:not(.is-open) .acsx-btn:hover .acsx-ico{border-color:var(--sx-ouro)}
html body .acsx-item.is-open .acsx-ico{background:var(--sx-verde);border-color:var(--sx-verde);transform:rotate(180deg)}
html body .acsx-item.is-open .acsx-ico::before,html body .acsx-item.is-open .acsx-ico::after{background:#F0DFB9}
html body .acsx-item.is-open .acsx-ico::after{transform:translate(-50%,-50%) rotate(0)}
/* texto: altura animada no JS (igual ao FAQ); aqui o estado de repouso */
html body .acsx-panel{overflow:hidden}
html body .acsx-item:not(.is-open) .acsx-panel{height:0}
html body .acsx-panel-in{padding:0 42px 24px 48px}
html body .acsx-desc{margin:0;font:400 15.5px/1.65 'Outfit',Arial,sans-serif;color:rgba(10,67,35,.8);-webkit-text-fill-color:currentColor;max-width:46ch}
/* filete dourado que corre embaixo do item aberto */
html body .acsx-linha{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#e7c785,var(--sx-ouro) 60%,rgba(207,160,72,0));
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--sx-ease)}
html body .acsx-item.is-open .acsx-linha{transform:scaleX(1);transition:transform 1s var(--sx-io) .08s}

/* ── palco de imagem ── */
html body .acsx-stage{position:relative;aspect-ratio:16/10.4;border-radius:16px;overflow:hidden;background:#0a4323;isolation:isolate;
  box-shadow:0 1px 2px rgba(3,10,6,.06),0 24px 48px -26px rgba(10,67,35,.45)}
html body .acsx-slide{position:absolute;inset:0;margin:0;z-index:0;visibility:hidden}
html body .acsx-slide.is-on{z-index:1;visibility:visible}
html body .acsx-slide.is-entra{z-index:2;visibility:visible}
html body .acsx-slide img,html body .acsx-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
html body .acsx-slide video{opacity:0;transition:opacity .7s ease}
html body .acsx-slide:not(.is-on):not(.is-entra) video{transition:none}
html body .acsx-slide.is-video video{opacity:1}
/* legenda: contador 01 / 04 em vidro, embaixo à direita */
html body .acsx-cap{position:absolute;right:16px;bottom:16px;z-index:4;display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:999px;
  background:rgba(10,30,20,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(240,223,185,.18);
  font:italic 500 14px/1 'Crimson Pro',Georgia,serif;letter-spacing:.06em;color:#F0DFB9;font-variant-numeric:tabular-nums}
html body .acsx-cap i{display:block;width:18px;height:1px;background:rgba(231,199,133,.7)}
html body .acsx-cap-num{display:block;height:1em;overflow:hidden}
html body .acsx-cap-num span{display:block}
html body .acsx-cap-tot{opacity:.62}
/* (barra dourada do tempo do vídeo retirada em 27/09: parada no meio, parecia um filete solto embaixo da foto) */

/* ── celular ── */
@media (max-width:900px){
  html body .acsx{grid-template-columns:1fr;row-gap:22px}
  html body .acsx-stage{order:-1;aspect-ratio:16/10.5}
  html body .acsx .acsx-btn{grid-template-columns:30px 1fr 28px;padding:19px 0}
  html body .acsx-title{font-size:20px}
  html body .acsx-panel-in{padding:0 8px 22px 44px}
  html body .acsx-desc{font-size:15px;color:rgba(10,67,35,.82)}
  html body .acsx-cap{right:12px;bottom:12px;padding:7px 11px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html body .acsx *,html body .acsx *::before,html body .acsx *::after{transition-duration:.01s !important;transition-delay:0s !important}
}