/*
 * Dra. Lidiane Sena — 1.2.26
 * Ajustes isolados da Home:
 * 1) carrossel "Como posso ajudar" navegável por toque e setas no desktop;
 * 2) no mobile, painel com imagem da abordagem aparece antes do CTA "Quer saber...".
 * Não altera Hero, Blog, identidade visual, cores cadastradas ou conteúdo.
 */

/* Carrossel de Atuação: passa a ser navegação real, sem animação automática. */
.marquee-section{position:relative}
.csp-service-carousel-shell{position:relative;width:100%}
.csp-service-carousel-shell .service-marquee{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  touch-action:pan-x;
  cursor:grab;
}
.csp-service-carousel-shell .service-marquee::-webkit-scrollbar{display:none}
.csp-service-carousel-shell .service-marquee:active{cursor:grabbing}
.csp-service-carousel-shell .service-marquee__track{
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
  width:max-content!important;
}
.csp-service-carousel-shell .service-marquee__group[aria-hidden="true"]{display:none!important}
.csp-service-carousel-shell .service-card{scroll-snap-align:start}
.csp-service-carousel-shell .service-marquee{scroll-snap-type:x proximity}

/* Setas discretas, translúcidas, com acabamento compatível com o tema. */
.csp-service-arrow{
  position:absolute;
  z-index:8;
  top:50%;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--text) 34%,transparent);
  background:color-mix(in srgb,var(--bg) 42%,transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--text);
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  transition:transform .22s ease,background .22s ease,border-color .22s ease,opacity .22s ease;
}
.csp-service-arrow::before{
  content:"";
  width:11px;
  height:11px;
  border-top:1.7px solid currentColor;
  border-right:1.7px solid currentColor;
}
.csp-service-arrow--prev{left:18px}
.csp-service-arrow--next{right:18px}
.csp-service-arrow--prev::before{transform:rotate(-135deg);margin-left:4px}
.csp-service-arrow--next::before{transform:rotate(45deg);margin-right:4px}
.csp-service-arrow:hover{background:color-mix(in srgb,var(--surface) 72%,transparent);border-color:color-mix(in srgb,var(--text) 54%,transparent);transform:translateY(-50%) scale(1.05)}
.csp-service-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.csp-service-arrow[disabled]{opacity:.26;cursor:default;pointer-events:none}

@media(max-width:760px){
  /* No celular o dedo controla o carrossel; setas ficam fora para não poluir. */
  .csp-service-arrow{display:none!important}
  .csp-service-carousel-shell .service-marquee{
    scroll-padding-inline:14px;
    padding-inline:14px;
    margin-inline:-14px;
  }
  .csp-service-carousel-shell .service-marquee__group{gap:14px;padding-right:14px}
  .csp-service-carousel-shell .service-card{scroll-snap-align:center}

  /* Minha abordagem: tabs, imagem/painel, depois CTA. */
  .section-approach .approach-contact-card.csp-approach-contact-mobile{
    width:100%;
    margin:16px 0 0!important;
    order:3;
  }
  .section-approach .approach-panels{order:2}
  .section-approach .approach-tabs{order:1}
}


/* 1.2.18 — remove o fade lateral legado do marquee apenas no mobile.
 * O pseudo-elemento original ficava por cima do card durante o swipe,
 * criando uma faixa vertical que parecia quebrar o card 02.
 */
@media(max-width:760px){
  .csp-service-carousel-shell .service-marquee::before,
  .csp-service-carousel-shell .service-marquee::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }
  .csp-service-carousel-shell .service-marquee{
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .csp-service-carousel-shell .service-card{
    position:relative!important;
    z-index:1!important;
  }
}


/* 1.2.26 — remove o fade lateral legado do marquee em TODAS as larguras.
 * No desktop, o ::after ficava sobre o último card visível (card 05),
 * cobrindo parte da foto e do texto como uma faixa vertical.
 */
.csp-service-carousel-shell .service-marquee::before,
.csp-service-carousel-shell .service-marquee::after{
  content:none!important;
  display:none!important;
  background:none!important;
  opacity:0!important;
  pointer-events:none!important;
}
.csp-service-carousel-shell .service-marquee{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.csp-service-carousel-shell .service-card{
  position:relative!important;
  z-index:1!important;
}
.csp-service-carousel-shell .service-card__art--photo{
  position:relative!important;
  overflow:hidden!important;
}
.csp-service-carousel-shell .service-card__art--photo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}