/* ==========================================================================
   Art Cercas | Conteúdo das páginas
   - tipografia base do conteúdo (.art-content)
   - blocos das páginas convertidas (.art-frozen: pg-sec, pg-row, pg-col...);
     o layout de cada página vem num <style> próprio com classes c1, c2...
   - componentes: carrossel, galeria, acordeão, lightbox
   - vídeos com overlay e play central
   - botões de orçamento e WhatsApp: degradê, texto branco, brilho
   ========================================================================== */

/* Tipografia base ----------------------------------------------------------
   Mesma força de seletor do site antigo, para os blocos das landing pages
   ficarem idênticos. */
:where(.art-content) { font-size: 16px; line-height: 1.4; letter-spacing: .015em; color: #141617; }
.art-content p { margin: 0 0 20px; }
:where(.art-content) strong { font-weight: bolder; }
:where(.art-content) a { color: #141617; text-decoration: none; transition: color .2s linear, background-color .2s linear, border-color .2s linear; }
:where(.art-content) a:hover { color: #02b1ff; }
:where(.art-content) img { max-width: 100%; height: auto; vertical-align: top; border-style: none; }
:where(.art-content) table { max-width: 100%; border-collapse: collapse; border-spacing: 0; background-color: transparent; }
.art-content blockquote { background-color: #f9f9fb; }
.art-content :is(h1, h2, h3, h4, h5, h6) { font-family: Montserrat, Arial, Helvetica, sans-serif; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; text-transform: none; font-style: normal; }
.art-content h1 { font-family: Montserrat; font-weight: 700; font-size: 40px; }
.art-content h2 { font-size: 34px; }
.art-content h3 { font-size: 26px; }
.art-content h4 { font-size: 18px; }
.art-content h5 { font-size: 20px; }
.art-content h6 { font-size: 16px; }
/* cor dos títulos com força baixa: o CSS de cada landing page (títulos brancos em fundo escuro) manda */
:where(.art-content) :where(h1, h2, h3, h4, h5, h6) { color: #141617; }
:where(.art-content) :is(h1, h2, h3, h4, h5, h6) { margin-top: 10px; margin-bottom: 10px; }

/* Páginas convertidas ------------------------------------------------------ */
.art-frozen { display: block; overflow-x: clip; }
.art-frozen *, .art-frozen *::before, .art-frozen *::after { box-sizing: border-box; }
.pg-sec { display: flex; position: relative; }
.pg-row { display: flex; flex-wrap: wrap; width: 100%; }
.pg-col { display: flex; position: relative; }
.pg-col__in { display: flex; flex-direction: column; width: 100%; }
.pg-title__h { margin: 0; }
.pg-text > :last-child { margin-bottom: 0; }
.pg-fig { line-height: 0; }
.pg-frame { display: inline-block; max-width: 100%; overflow: hidden; }
.pg-frame img { display: block; }
.pg-list { margin: 0; padding: 0; list-style: none; }
.pg-list__i { display: flex; align-items: flex-start; }
.pg-list__ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pg-list__txt > :last-child { margin-bottom: 0; }
.pg-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.pg-ico svg { width: 1em; height: 1em; }
.pg-sep { width: 100%; }
.pg-video, .art-frozen video { display: block; width: 100%; height: auto; }

/* Acordeão */
.pg-acc__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.pg-acc__item > summary::-webkit-details-marker { display: none; }
.pg-acc__ico { position: relative; flex: none; width: 22px; height: 22px; border-radius: 4px; background: #02b1ff; }
.pg-acc__ico::before, .pg-acc__ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: #fff; transition: transform .2s; }
.pg-acc__ico::after { transform: rotate(90deg); }
.pg-acc__item[open] .pg-acc__ico::after { transform: rotate(0); }
.pg-acc__a { padding-top: 12px; }

/* Carrossel */
.pg-car { position: relative; overflow: hidden; }
.pg-car__track { display: flex; transition-property: transform; transition-timing-function: ease; will-change: transform; }
.pg-car__slide { flex: none; width: 100%; }
.pg-car:not(.is-ready) .pg-car__slide { width: calc(100% / var(--cols, 1)); }
.pg-car__slide img { display: block; width: 100%; height: auto; }
.pg-car__cap { margin: 10px 0 0; text-align: center; font-weight: 600; }
.pg-car--fade .pg-car__track { display: grid; }
.pg-car--fade .pg-car__slide { grid-area: 1 / 1; opacity: 0; transition: opacity .6s; }
.pg-car--fade .pg-car__slide.is-active { opacity: 1; }
.pg-car__nav { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; }
.pg-car__nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; }
.pg-car__prev { left: 10px; }
.pg-car__prev::before { transform: translate(-30%, -50%) rotate(135deg); }
.pg-car__next { right: 10px; }
.pg-car__next::before { transform: translate(-70%, -50%) rotate(-45deg); }

/* Galeria */
.pg-gal { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px; }
.pg-gal__item { display: block; overflow: hidden; border-radius: 6px; }
.pg-gal__item img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .35s; }
.pg-gal__item:hover img { transform: scale(1.04); }
@media (max-width: 1024px) { .pg-gal { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 640px) { .pg-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lightbox */
.art-lb { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .9); }
.art-lb.is-open { display: flex; }
.art-lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.art-lb button { position: absolute; border: 0; background: none; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; padding: 10px 16px; }
.art-lb__x { top: 10px; right: 10px; }
.art-lb__p { left: 6px; top: 50%; transform: translateY(-50%); }
.art-lb__n { right: 6px; top: 50%; transform: translateY(-50%); }

/* Formulário antigo -> WhatsApp */
.art-waform { padding: 28px; border-radius: 12px; background: #f6f8fa; border: 1px solid #e6ebf0; }
.art-waform__t { margin: 0 0 8px !important; font-size: 20px; font-weight: 700; }
.art-waform .art-btn { margin-top: 6px; }

/* Vídeos: overlay escuro + play central ----------------------------------- */
.art-vp { position: relative; display: block; overflow: hidden; line-height: 0; background: #000; }
.art-vp > video { display: block; width: 100%; height: auto; }
.art-vp::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .45) 100%); pointer-events: none; transition: opacity .3s; }
.art-vp__btn { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.art-vp__ico { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #0a2033; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s, background .2s; }
.art-vp__ico svg { width: 30px; height: 30px; margin-left: 4px; }
.art-vp__ico::after { content: ""; position: absolute; width: 72px; height: 72px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: art-pulse 2s ease-out infinite; }
.art-vp__btn:hover .art-vp__ico, .art-vp__btn:focus-visible .art-vp__ico { transform: scale(1.08); background: #fff; }
.art-vp__btn:focus-visible { outline: 3px solid #02b1ff; outline-offset: -3px; }
.art-vp.is-on::before, .art-vp.is-on .art-vp__btn { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes art-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@media (max-width: 640px) { .art-vp__ico, .art-vp__ico::after { width: 60px; height: 60px; } .art-vp__ico svg { width: 24px; height: 24px; } }

/* Botões: degradê, texto branco e brilho ---------------------------------- */
html body :is(.art-btn, .pg-btn, .ac-btn, .art-wa, .art-cta-btn) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff !important;
  background: linear-gradient(135deg, #0a6eff 0%, #02b1ff 100%);
  border-color: transparent;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
html body :is(.art-btn--wa, .art-wa, a.art-btn[href*="wa.me"], a.art-btn[href*="whatsapp"], a.pg-btn[href*="wa.me"], a.pg-btn[href*="whatsapp"], a.ac-btn[href*="wa.me"], a.ac-btn[href*="whatsapp"], .ac-btn--wa) {
  background: linear-gradient(135deg, #0f7a3f 0%, #1aa952 50%, #25d366 100%);
  box-shadow: 0 10px 24px -12px rgba(15, 122, 63, .85);
}
html body :is(.art-btn, .pg-btn, .ac-btn, .art-wa, .art-cta-btn):hover {
  color: #fff !important;
  filter: brightness(1.06);
}
html body :is(.art-btn, .pg-btn, .ac-btn, .art-wa, .art-cta-btn) :is(svg, .art-ico, .pg-ico) { color: #fff; fill: currentColor; }
html body :is(.art-btn, .pg-btn, .ac-btn, .art-wa, .art-cta-btn)::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  z-index: 1;
  width: 38%;
  height: 200%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-160%) skewX(-22deg);
  animation: art-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
html body :is(.art-btn, .pg-btn, .ac-btn, .art-wa, .art-cta-btn):hover::after { animation-duration: 1.2s; }
@keyframes art-shine {
  0% { transform: translateX(-160%) skewX(-22deg); }
  45%, 100% { transform: translateX(360%) skewX(-22deg); }
}
/* botão branco (sobre fundo escuro): mantém fundo claro, texto escuro legível */
html body :is(.art-btn--light, .ac-btn--branco):not([href*="wa.me"]):not([href*="whatsapp"]) { background: #fff; color: #0a2033 !important; text-shadow: none; }
html body :is(.art-btn--light, .ac-btn--branco):not([href*="wa.me"]):not([href*="whatsapp"]):hover { color: #0a2033 !important; }
html body :is(.art-btn--light, .ac-btn--branco):not([href*="wa.me"]):not([href*="whatsapp"]) :is(svg, .art-ico) { color: #1aa952; }
html body :is(.art-btn--light, .ac-btn--branco):not([href*="wa.me"]):not([href*="whatsapp"])::after { background: linear-gradient(90deg, rgba(2, 177, 255, 0) 0%, rgba(2, 177, 255, .18) 50%, rgba(2, 177, 255, 0) 100%); }
@media (prefers-reduced-motion: reduce) {
  html body :is(.art-btn, .pg-btn, .ac-btn, .art-wa, .art-cta-btn)::after { animation: none; display: none; }
  .art-vp__ico::after { animation: none; }
}

/* Fundo em slides (seções de banner) */
.pg-bgs { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pg-bgs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.pg-bgs__img.is-active { opacity: 1; }

/* Depoimentos em vídeo no lugar da miniatura */
.art-thumbv__box { position: relative; overflow: hidden; }
.art-thumbv__box > .art-vp { position: absolute; inset: 0; border-radius: inherit; }
.art-thumbv__box > .art-vp > video { width: 100%; height: 100%; object-fit: cover; }
.art-thumbv .art-vp.is-on > video { object-fit: contain; background: #000; }
.art-thumbv { cursor: default; }
.artcercas-video-modal, .apModal { z-index: 2147483000 !important; }
/* miniaturas de depoimento em pé (os vídeos são verticais) */
.art-content .apThumb::before { padding-top: 125%; }

/* LPs de serviço: no celular a foto do topo vem antes do título */
@media (max-width: 640px) {
  .art-content .ac-hero__img-wrap { order: -1; }
  .art-content .ac-hero { padding-top: 28px; }
}

/* botões de WhatsApp: sempre fundo verde e texto branco */
html body :is(a.art-btn, a.pg-btn, a.ac-btn, a.art-wa)[href*="wa.me"],
html body :is(a.art-btn, a.pg-btn, a.ac-btn, a.art-wa)[href*="whatsapp"] { color: #fff !important; background: linear-gradient(135deg, #0f7a3f 0%, #1aa952 50%, #25d366 100%); text-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
html body :is(a.art-btn, a.pg-btn, a.ac-btn, a.art-wa)[href*="wa.me"] :is(svg, .art-ico),
html body :is(a.art-btn, a.pg-btn, a.ac-btn, a.art-wa)[href*="whatsapp"] :is(svg, .art-ico) { color: #fff !important; fill: #fff; }
.art-waico { display: inline-block; flex: none; width: 19px !important; height: 19px !important; vertical-align: -3px; fill: currentColor; }
.whatsapp-svg { display: inline-flex; }

/* LPs: cards de benefícios em 1 coluna no celular */
@media (max-width: 640px) {
  .art-content .ac-beneficios { grid-template-columns: 1fr !important; }
}