/* ══════════════════════════════════════════════════════════════════
   CARROSSEL COMPARTILHADO — visual único para toda solução/serviço em
   carrossel no site inteiro (home, os 21 microsites, e as páginas
   autônomas como energia-solar e recursos-multas).

   Por que um arquivo à parte: antes esta mesma regra estava copiada em
   três lugares (css/style.css, assets/microsite/style.css e inline em
   páginas customizadas) — cada ajuste de design tinha que ser feito três
   vezes, e a página que não recebia a cópia (recursos-multas) ficava com
   os botões de seta e os pontos sem estilo nenhum, aparecendo crus na
   tela. Agora é um lugar só: qualquer página que usa .carrossel só
   precisa deste <link>, e o resto — home, microsite ou página solta —
   fica igual.

   Como conectar a cor de marca: esta folha usa só as variáveis abaixo,
   nunca --primary/--azul direto (cada tema do site chama a cor de marca
   por um nome diferente). Redeclare as três no :root de cada página, uma
   vez só, apontando pra variável que aquela página já usa:
     --carrossel-cor:        var(--primary)     (ou --azul, --primary-blue…)
     --carrossel-cor-escura: var(--dark)        (ou --escuro, --dark-bg…)
     --carrossel-sucesso:    var(--success)     (ou --azul, --success-green…)
   Sem essa redeclaração, cai no azul do Grupo É — nunca fica sem cor.
   ══════════════════════════════════════════════════════════════════ */

.carrossel {
  --_cor: var(--carrossel-cor, #1652D8);
  --_cor-escura: var(--carrossel-cor-escura, #0a1a4a);
  --_sucesso: var(--carrossel-sucesso, var(--_cor));
  /* Quantos cards cabem INTEIROS por tela. Antes a largura era fixa (30%,
     até 340px) e a rolagem andava uma tela inteira: sobrava um pedaço do
     4º card cortado na borda, e cada "página" começava no meio de um card.
     Agora a largura sai desta conta e o passo da rolagem é exatamente um
     grupo de cards (carrossel.js). Uma página pode pedir outro número com
     style="--por-tela:3" no .carrossel. */
  --por-tela: 4;
  --vao: 22px;
  --foto-h: 214px;
  position: relative;
}
@media (max-width: 1180px) { .carrossel { --por-tela: 3; } }
@media (max-width: 860px)  { .carrossel { --por-tela: 2; --vao: 18px; } }

.services-grid.carrossel-trilho{ display: flex; }

.carrossel-trilho {
  display: flex; gap: var(--vao); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 12px 4px 26px; scroll-padding-inline: 4px;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.carrossel-trilho:focus-visible { outline: 2px solid var(--_cor); outline-offset: 4px; border-radius: 20px; }
.carrossel-trilho.arrastando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.carrossel-trilho.arrastando * { pointer-events: none; }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho > * {
  flex: 0 0 calc((100% - (var(--por-tela) - 1) * var(--vao)) / var(--por-tela));
  scroll-snap-align: start; min-width: 0;
  align-self: stretch; height: auto;
}

/* ───── Barra de controle, embaixo e fora do trilho ─────
   Pontos à esquerda, contador no meio, setas à direita — a fileira de cards
   fica limpa de ponta a ponta. Ver o comentário em carrossel.js sobre por que
   as setas saíram de cima dos cards. */
.carrossel-rodape {
  display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 0 2px;
}
.carrossel-pontos { display: flex; align-items: center; gap: 7px; }
.carrossel-ponto {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 99px;
  background: rgba(0,0,0,.14); cursor: pointer; transition: .25s cubic-bezier(.34,1.4,.6,1);
}
.carrossel-ponto:hover { background: rgba(0,0,0,.3); }
.carrossel-ponto.ativo { width: 24px; background: var(--_cor); }
.carrossel-contador {
  font-size: 12.5px; font-weight: 700; color: var(--text-soft, var(--texto-suave, #667));
  font-variant-numeric: tabular-nums;
}
/* Empurra as setas pra ponta direita, seja qual for a largura do resto */
.carrossel-setas { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.carrossel-seta {
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  border: 1.5px solid var(--linha, var(--border-color, rgba(10,20,40,.12)));
  background: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, border-color .2s, transform .2s cubic-bezier(.34,1.4,.6,1), opacity .2s;
}
.carrossel-seta svg { width: 21px; height: 21px; fill: var(--_cor-escura); transition: fill .2s; }
.carrossel-seta:hover:not(:disabled) { background: var(--_cor); border-color: var(--_cor); transform: scale(1.07); }
.carrossel-seta:hover:not(:disabled) svg { fill: #fff; }
.carrossel-seta:active:not(:disabled) { transform: scale(.95); }
/* Fora do trilho a seta desabilitada some com opacity:0 deixaria um buraco na
   barra e o par de botões dançaria de lugar a cada página. Fica apagada. */
.carrossel-seta:disabled { opacity: .32; cursor: default; }
.carrossel-sem-rolagem .carrossel-rodape { display: none; }

/* ───── Card moderno: foto cheia, degradê de leitura, texto por cima ─────
   Antes o ícone ficava pendurado na borda da foto e o texto vinha solto
   embaixo — bonito, mas datado. Agora o título entra DENTRO da foto, num
   degradê escuro só o suficiente pra garantir contraste, e o corpo do
   card é só a descrição + a ação. Menos peças, leitura mais rápida, e o
   card fica com cara de app de verdade, não de folheto. */
/* ⚠️ padding:0 e text-align:left não são detalhe — são o alicerce deste
   bloco. Fora do carrossel, .service-card vem com padding:40px e texto
   centralizado (assets/microsite/style.css). Com esse padding a foto
   encolhia 40px de cada lado e descia 40px, enquanto a faixa escura do
   título (::before, ancorada no card) continuava colada no topo e de ponta
   a ponta: o degradê sobrava pra fora da imagem, o título flutuava meio
   sobre a foto e meio sobre o branco, e os três cards pareciam tortos.
   Todo o espaçamento interno daqui pra baixo é dado item a item (h3, p,
   .service-saiba), justamente pra foto poder sangrar até a borda. */
.carrossel-trilho .service-card,
.carrossel-trilho .card-unidade {
  position: relative; overflow: hidden; border-radius: 26px; border: 1px solid rgba(10,20,40,.07);
  display: flex; flex-direction: column; background: var(--white, #fff);
  padding: 0; text-align: left;
  /* Sombra em duas camadas: uma linha de contato curta e rente, e um halo
     largo e bem aberto. Uma sombra só, média, é o que dá aquele aspecto de
     caixa chapada de template. */
  box-shadow: 0 1px 2px rgba(10,20,40,.05), 0 8px 24px -12px rgba(10,20,40,.14);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .4s;
}
.carrossel-trilho .service-card:hover,
.carrossel-trilho .card-unidade:hover {
  transform: translateY(-8px); border-color: transparent;
  /* O halo do hover puxa a cor da marca daquela página em vez de cinza puro:
     é sutil, mas é o que faz o card parecer "aceso" e não só levantado. */
  box-shadow: 0 2px 6px rgba(10,20,40,.06), 0 30px 60px -22px color-mix(in srgb, var(--_cor) 45%, rgba(10,20,40,.5));
}

.carrossel-trilho .service-foto,
.carrossel-trilho .card-foto {
  width: 100%; height: var(--foto-h); object-fit: cover; display: block; background: var(--light-bg, #f2f3f8);
  transition: transform .8s cubic-bezier(.16,1,.3,1), filter .4s;
}
.carrossel-trilho .service-card:hover .service-foto,
.carrossel-trilho .card-unidade:hover .card-foto { transform: scale(1.07); }

/* Faixa escura debaixo da foto pra qualquer título ficar legível em cima
   de qualquer imagem, clara ou escura — sem precisar escolher fotos por
   contraste. Só entra quando existe mesmo uma foto real: os cards sem
   imagem (bullets de benefício, sem "tipo de serviço" pra fotografar, e o
   painel "+170 outras coberturas") mantêm o título simples embaixo, sem
   faixa escura nem texto branco flutuando sobre nada. */
.carrossel-trilho .service-card:has(.service-foto)::before,
.carrossel-trilho .card-unidade:has(.card-foto)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--foto-h); z-index: 1;
  /* Três paradas, não duas: a queda linear de transparente pra escuro deixa
     uma faixa cinzenta visível atravessando a foto no meio. Com a curva
     adiantada (28% → 62% → base) o escuro se concentra onde o texto está e a
     parte de cima da imagem fica limpa. */
  background: linear-gradient(to bottom,
    rgba(4,8,20,0) 28%, rgba(4,8,20,.28) 62%, rgba(4,8,20,.82) 100%);
  pointer-events: none;
}

/* ⚠️ O título sai do fluxo (absolute), não sobe com margem negativa. A
   margem de -46px que estava aqui foi calibrada num título de duas linhas:
   com uma linha só ("Energia Solar Rural") ela puxava 22px a mais do que
   devia e o parágrafo seguinte começava ATRÁS da foto — a primeira linha do
   texto sumia. Ancorado no rodapé da imagem (top do bloco + translateY
   -100%), o título encosta na base da foto tenha 1, 2 ou 3 linhas, e o
   corpo do card sempre começa logo abaixo dela.
   A altura vem de --foto-h (no .carrossel), a mesma da foto e do ::before —
   mude aqui e no ::before. */
.carrossel-trilho .service-card:has(.service-foto) h3,
.carrossel-trilho .card-unidade:has(.card-foto) h3 {
  position: absolute; z-index: 2; left: 0; right: 0; top: var(--foto-h);
  transform: translateY(-100%);
  margin: 0; padding: 0 22px 18px; box-sizing: border-box;
  color: #fff; font-size: 20px; font-weight: 800; line-height: 1.22; letter-spacing: -.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
/* Sem foto (bullet de benefício ou painel de fecho): título comum, respiro
   normal no topo do card. */
.carrossel-trilho .service-card:not(:has(.service-foto)) h3 {
  margin: 22px 22px 0; font-size: 17px; color: var(--text-main, #1a2332);
}
.carrossel-trilho .service-card p,
.carrossel-trilho .card-unidade p {
  flex: 1; margin: 18px 22px 6px; font-size: 14.5px; line-height: 1.55;
  color: var(--text-soft, var(--texto-suave, #667));
}

/* "Ver detalhes": fora do carrossel ele herdava o respiro do padding:40px do
   card, que aqui não existe mais — sem esta margem encostaria na borda. */
.carrossel-trilho .service-saiba { margin: auto 22px 22px; }

/* Ícone: apagado do topo da foto a pedido — a foto já fala por si. Continua
   no HTML só como reserva (display:none) pra não depender de tocar em
   dezenas de páginas se a decisão mudar. */
.carrossel-trilho .service-icon,
.carrossel-trilho .card-unidade .ico { display: none; }

/* Etiqueta de categoria ("Crédito", "Saúde", "Energia"): canto de CIMA e à
   ESQUERDA da foto, que é onde o olho entra no card — e do lado oposto ao
   título, que mora embaixo. Vidro fosco escuro em vez de pílula branca: some
   no meio de foto clara com pílula branca, e aqui a foto pode ser qualquer
   uma. */
.carrossel-trilho .card-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(8,12,28,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px;
}

/* Ações empilhadas: botão de falar ocupando a largura, "ver detalhes" como
   link embaixo.
   ⚠️ Não voltar pra lado-a-lado com flex-wrap. Já foi assim, e como o texto
   do botão muda de card pra card ("Quero um orçamento" x "Quero trocar
   minha dívida"), 12 dos 19 cards quebravam a linha e 7 não: os botões
   verdes ficavam em alturas diferentes entre cards vizinhos, que é boa
   parte do "cards tortos". Empilhado, o bloco tem sempre a mesma altura
   independente do texto. */
.carrossel-trilho .card-acoes, .carrossel-trilho .card-actions {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  margin: 6px 18px 18px;
}
.carrossel-trilho .card-wa, .carrossel-trilho .btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #25D366; color: #fff; font-weight: 700; font-size: 14px;
  padding: 13px 14px; border-radius: 14px; text-decoration: none; white-space: nowrap;
  border: none; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(37,211,102,.75);
  transition: background .2s, transform .2s cubic-bezier(.34,1.4,.6,1), box-shadow .2s;
}
.carrossel-trilho .card-wa svg { width: 17px; height: 17px; fill: #fff; flex: none; }
.carrossel-trilho .card-wa:hover, .carrossel-trilho .btn-whatsapp:hover {
  background: #1EBE59; transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(37,211,102,.85);
}
/* Segunda saída, deliberadamente leve: um só peso de botão por card. Se este
   também virasse botão, os dois disputariam o clique e nenhum venceria. */
.carrossel-trilho .card-ver {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 13.5px; font-weight: 700;
  color: var(--_cor-escura); text-decoration: none; padding: 3px 4px; white-space: nowrap;
  opacity: .78; transition: opacity .2s;
}
.carrossel-trilho .card-ver:hover { opacity: 1; }
.carrossel-trilho .card-ver svg { width: 15px; height: 15px; fill: currentColor; transition: transform .2s; }
.carrossel-trilho .card-ver:hover svg { transform: translateX(3px); }

/* Botão de plano/contratar (SegPet, Petlove, Telemedicina): mantém o
   destaque de compra dentro do novo corpo do card. */
.carrossel-trilho .plano-btn { margin: 4px 18px 18px; }

/* Card de fecho ("+170 outras coberturas"): degradê no lugar da foto, sem
   prometer uma imagem de banco pra algo que não é um serviço único — o
   painel já diz "+170" sozinho, então o h3 fica embaixo dele como texto
   comum (regra ":not(:has(.service-foto)) h3" acima cuida disso). */
.carrossel-trilho .service-foto-fecho {
  width: 100%; height: var(--foto-h); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, var(--_cor), var(--_cor-escura)); color: #fff;
}
.carrossel-trilho .service-foto-fecho i { font-size: 28px; opacity: .85; }
.carrossel-trilho .service-foto-fecho span { font-family: 'Manrope','Inter',sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.02em; }

/* Celular: um card por vez com uma pontinha do próximo aparecendo — é o
   sinal de "tem mais pro lado". Aqui o corte é proposital. */
@media (max-width: 600px) {
  .carrossel-trilho > * { flex: 0 0 86%; }
  .carrossel-trilho { scroll-snap-type: x mandatory; }
  .carrossel-seta { display: none; }
  .carrossel-rodape { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .carrossel-trilho .service-card, .carrossel-trilho .card-unidade,
  .carrossel-trilho .service-foto, .carrossel-trilho .card-foto { transition: none; }
  .carrossel-trilho .service-card:hover, .carrossel-trilho .card-unidade:hover,
  .carrossel-trilho .service-card:hover .service-foto, .carrossel-trilho .card-unidade:hover .card-foto { transform: none; }
}

/* ───── Card de benefício (sem foto) ─────
   Antes era só título e texto num cartão branco — o ícone ficava escondido
   junto com os dos cards de foto. Agora ele volta como protagonista: ladrilho
   com degradê da cor da página, fundo levemente tingido e um halo no canto.
   Vale para "Por que vale a pena", "Os benefícios que seu pet merece",
   "A diferença que muda tudo" e todos os outros blocos do mesmo tipo. */
.carrossel-trilho .service-card:not(:has(.service-foto)) {
  padding: 28px 26px 26px; gap: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--_cor) 10%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--_cor) 4%, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--_cor) 16%, #e6e9f2);
}
.carrossel-trilho .service-card:not(:has(.service-foto)) .service-icon {
  display: grid; place-items: center; width: 60px; height: 60px; margin: 0 0 20px;
  border-radius: 18px; font-size: 25px; color: #fff;
  background: linear-gradient(135deg, var(--_cor), color-mix(in srgb, var(--_cor) 55%, #000));
  box-shadow: 0 14px 26px -14px var(--_cor), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .35s cubic-bezier(.34,1.4,.6,1);
}
.carrossel-trilho .service-card:not(:has(.service-foto)):hover .service-icon { transform: rotate(-6deg) scale(1.06); }
.carrossel-trilho .service-card:not(:has(.service-foto)) .service-icon i { color: #fff; }
.carrossel-trilho .service-card:not(:has(.service-foto)) h3 {
  margin: 0 0 10px; font-size: 19px; line-height: 1.25; color: var(--_cor-escura);
}
.carrossel-trilho .service-card:not(:has(.service-foto)) p { margin: 0; flex: 1; font-size: 14.5px; }
.carrossel-trilho .service-card:not(:has(.service-foto))::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--_cor), color-mix(in srgb, var(--_cor) 30%, transparent));
  opacity: 0; transition: opacity .3s;
}
.carrossel-trilho .service-card:not(:has(.service-foto)):hover::after { opacity: 1; }