/* Regras que no site original eram injetadas pelo bundle JS da plataforma
   (Marketing 360). Recriadas aqui para o clone estático funcionar sozinho. */

/* ---- Grades de itens ----
   No original o bundle JS define largura = 100% / nº de colunas (sem
   gutter — o respiro vem das próprias imagens serem menores que a coluna). */
.itemsCollectionContent .item { box-sizing: border-box; }

@media only screen and (min-width: 768px) {
  /* Largura dos itens = (100% - gutter x (n-1)) / n. O gutter vem das
     margens que o base.css já aplica (5% em até 4 colunas, 1% em 5).
     Medido no site original: itens de 360px com vãos de 60px (grid 1200). */
  .gridView[data-columns="2"] > .item { width: 47.5%; }
  .gridView[data-columns="3"] > .item { width: 30%; }
  .gridView[data-columns="4"] > .item { width: 23.5%; }
  .gridView[data-columns="5"] > .item { width: 19.2%; }
}

@media only screen and (max-width: 767px) {
  .gridView .item { width: 100%; float: none; margin: 0 0 30px; }
}

/* Itens da lista de serviços (listView) — separação entre linhas */
.listView .item { margin-bottom: 45px; }
.listView .item:after { content: ""; display: table; clear: both; }

/* ---- Gatilho do menu mobile ---- */
@media only screen and (min-width: 768px) {
  #navTrigger { display: none !important; }
}

/* ---- Menu em linha única ----
   Em larguras intermediárias (notebooks / Windows com escala 125%) o
   espaçamento original de 2.7em empurra o botão CALL NOW para a 2ª linha.
   Apertamos os espaçamentos até 1599px para o menu inteiro caber em linha. */
@media only screen and (min-width: 768px) and (max-width: 1599px) {
  .navContent ul li { margin-right: 1.3em; }
  .navContent ul li:last-child { margin-right: 0; }
  .navContent li .button.navButton {
    padding-left: 1.2em;
    padding-right: 1.2em;
    white-space: nowrap;
  }
}

/* Notebooks menores (1366x768 etc.): aperto extra para manter uma linha */
@media only screen and (min-width: 768px) and (max-width: 1439px) {
  .navContent ul li { margin-right: .8em; }
  .navContent ul li a, .navContent ul li .navLabel { font-size: 13px; }
  .navContent li .button.navButton {
    font-size: 12px;
    padding-left: 1em;
    padding-right: 1em;
  }
}

/* Painel lateral mobile: subnavs visíveis, empilhadas e indentadas */
.navContainer.mobileSideNav { overflow-y: auto; }
.navContainer.mobileSideNav li { display: block; margin: 0; }
.navContainer.mobileSideNav li a,
.navContainer.mobileSideNav li .navLabel { display: block; padding: .5em .5em; }
.navContainer.mobileSideNav ul.subNav { display: block; position: static; border: 0; }
.navContainer.mobileSideNav ul.subNav li a { margin-left: 1em; font-size: .9em; }
.navContainer.mobileSideNav .dropArrow { display: none; }
.navContainer.mobileSideNav li .button.navButton {
  margin: .75em .5em; text-align: center;
}

/* ---- Animações de entrada dos blocos ---- */
.blockAnim { transition: opacity .9s ease, transform .9s ease; }
.blockAnim--slideUp.blockAnim--hidden { opacity: 0; transform: translateY(60px); }
.blockAnim--slideSides.blockAnim--hidden .blockImg { transform: translateX(-60px); opacity: 0; }
.blockAnim--slideSides.blockAnim--hidden .blockText { transform: translateX(60px); opacity: 0; }
.blockAnim--slideSidesAlt.blockAnim--hidden .blockImg { transform: translateX(60px); opacity: 0; }
.blockAnim--slideSidesAlt.blockAnim--hidden .blockText { transform: translateX(-60px); opacity: 0; }
.blockAnim .blockImg, .blockAnim .blockText {
  transition: opacity .9s ease, transform .9s ease;
}

/* ---- Créditos do rodapé ---- */
.scCredit { text-align: center; padding: 1em 0 2em; font-size: 12px; }
.scCredit a { color: inherit; text-decoration: none; opacity: .7; }
.scCredit a span { text-decoration: underline; }

/* ---- Formulário JotForm centralizado ---- */
.blockWrap_ef3fe767860944da98e659c63c6371c5 .blockInnerContent { text-align: center; }

/* ====================================================================
   COLOR X — página única com âncoras
   ==================================================================== */

/* Rolagem suave e compensação da altura do cabeçalho nas âncoras */
html { scroll-behavior: smooth; }
.anchorTarget { scroll-margin-top: 40px; }


/* Logo: um pouco menor que a largura total do contêiner */
@media only screen and (min-width: 768px) {
  .headerContent h1.logo img, .headerContent div.logo img { width: 80%; }
}

/* Lista de checks do hero */
.heroChecks { font-size: 18px; line-height: 2; }

/* ====================================================================
   Hero e cabeçalho no celular
   O tema aplica 230px de padding e título de 48px, pensados para
   desktop. No celular isso deixa o hero altíssimo e o texto encostando
   nas bordas, então reduzimos tudo proporcionalmente.
   ==================================================================== */
@media only screen and (max-width: 767px) {
  /* Logo centralizada e sem encostar nas bordas */
  .headerContent { padding-left: 15px; padding-right: 55px; }
  .headerContent h1.logo,
  .headerContent div.logo { text-align: center; }
  .headerContent h1.logo img,
  .headerContent div.logo img {
    width: auto;
    max-width: 200px;
    margin: 0 auto;
  }

  /* Botão do topo: quebra o texto em vez de estourar a largura */
  .blockWrap_b94124491ec248da8fce6eecc6bec882 .button {
    font-size: 12px;
    letter-spacing: .08em;
    white-space: normal;
    line-height: 1.45;
  }

  /* Hero: altura e tipografia proporcionais à tela */
  div.blockWrap_c5cc144539a64497829a922b9ad61c5e {
    padding-top: 70px;
    padding-bottom: 70px;
    background-position: 62% 100%;
  }
  .blockWrap_c5cc144539a64497829a922b9ad61c5e .contentTitle {
    font-size: 26px;
    letter-spacing: .06em;
    padding-left: .06em;
    line-height: 1.3;
  }
  .blockWrap_c5cc144539a64497829a922b9ad61c5e .blockInnerContent {
    font-size: 15px;
  }
  .heroChecks {
    font-size: 14px;
    line-height: 1.85;
    text-align: left;
    display: inline-block;
  }
  .blockWrap_c5cc144539a64497829a922b9ad61c5e .button {
    font-size: 13px;
    letter-spacing: .08em;
    white-space: normal;
    line-height: 1.45;
  }

  /* ---- Cards de serviço (listView) ----
     O tema deixa a imagem flutuando em 34% da largura, o que no celular
     vira um selo minúsculo com o texto espremido. Aqui empilhamos:
     imagem em cima (largura total) e o texto embaixo.

     Atenção: em telas <=480px o tema aplica display:flex no item
     (base.css: "@media (max-width:480px),(min-width:769px)"), o que
     ignora o float e divide o card em duas colunas. Por isso voltamos
     para display:block antes de empilhar. */
  .listView.vAlgn1 .itemPreview.hasImg,
  .listView.vAlgn2 .itemPreview.hasImg {
    display: block;
  }
  .listView .itemPreview.hasImg .itemImg,
  .listView .itemPreview.hasImg .itemContent {
    float: none;
    width: 100%;
  }
  .listView .itemPreview.hasImg .itemImg {
    margin-bottom: 18px;
  }
  .listView .itemPreview.hasImg .itemImg img {
    width: 100%;
    max-width: none;
    border-radius: 14px;
  }
  .items_fab7985714274d4387df85ea0eabe81a .item {
    padding: 20px 20px 24px;
    border-radius: 20px;
    text-align: center;
  }
  .items_fab7985714274d4387df85ea0eabe81a .item .contentTitle {
    font-size: 22px;
  }

  /* Títulos de seção: 48px do tema é grande demais no celular */
  .blockWrap_f9969c3fd863455dab51e6b88f39c363 .contentTitle,
  .blockWrap_a992076dd80f43eb98d41ba7c52be49f .contentTitle,
  .blockWrap_a998c06048fb4c958d2484d683da67a6 .contentTitle,
  .blockWrap_adc98f5463af47838328d3e2d16f54dc .contentTitle,
  .blockWrap_d232dde4d9e5429999dc7c9beac82263 .contentTitle,
  .blockWrap_e4142a89d5374aeba1ce3f9bc6eb1971 .contentTitle,
  .blockWrap_fe9f0e1155f24d1d8956102aa2da8a5d .contentTitle,
  .pageTitleContainer .pageTitle {
    font-size: 24px;
    letter-spacing: .06em;
    line-height: 1.3;
  }

  /* Botões: nunca estourar a largura da tela */
  .button,
  a.button {
    white-space: normal;
    line-height: 1.45;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Vídeo circular e círculos: não encostar nas bordas */
  .videoCircle { width: min(280px, 86vw); }

  /* Formulário: fundo fixo pesa e desalinha no celular */
  div.blockWrap_ef3fe767860944da98e659c63c6371c5 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .finalCtaTitle { font-size: 22px; }
  .finalCtaSub { font-size: 15px; }
}

/* Hero com a mini-van: véu azul-escuro sutil para legibilidade do texto
   (usa ::after porque o page.css do tema anula o ::before deste bloco) */
div.blockWrap_c5cc144539a64497829a922b9ad61c5e { position: relative; }
div.blockWrap_c5cc144539a64497829a922b9ad61c5e:after {
  content: "";
  display: block; /* o clearfix do tema põe display:table, que não estica */
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6, 38, 74, .5), rgba(6, 38, 74, .28));
  pointer-events: none;
}
div.blockWrap_c5cc144539a64497829a922b9ad61c5e .blockContent { position: relative; z-index: 1; }
.blockWrap_c5cc144539a64497829a922b9ad61c5e .contentTitle,
.blockWrap_c5cc144539a64497829a922b9ad61c5e .blockInnerContent {
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* Vídeo circular com anel (mesma linguagem dos círculos do tema) */
.videoCircle {
  width: min(480px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 12px solid #6cd008;
  box-sizing: border-box;
  background: #000;
}
.videoCircle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Números dos passos (seção Processo) */
.stepNum {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1b8eff;
  color: #fff;
  font-family: futurabold, Arial, Verdana, sans-serif;
  font-size: 26px;
  line-height: 56px;
  text-align: center;
  margin: 0 auto 18px;
}

/* Lista de cidades (Areas We Serve) */
.areasList {
  columns: 2;
  column-gap: 24px;
  max-width: 380px;
  margin: 0 0 1em;
  padding-left: 1.2em;
}
.areasList li { margin-bottom: .35em; break-inside: avoid; }
.areasBoston { max-width: 420px; }

@media only screen and (max-width: 480px) {
  .areasList { columns: 1; }
}

/* FAQ — estados do acordeão (custom.css traz o visual; aqui o abre/fecha) */
.faqContainer { padding: 0 0 60px; }
.faqContainer .mwd-accordion { max-width: 860px; margin: 0 auto; }
.mwd-accordion-title { cursor: pointer; }
.mwd-accordion-item .mwd-accordion-content {
  max-height: 0;
  padding: 0 20px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.mwd-accordion-item.active .mwd-accordion-content {
  max-height: 300px;
  padding: 20px 20px 10px;
}

/* CTA final + formulário — fundo com a foto de descanso/organização */
div.blockWrap_ef3fe767860944da98e659c63c6371c5 {
  background-image:
    linear-gradient(rgba(247, 250, 253, .60), rgba(247, 250, 253, .48)),
    url("../img/form.jpg");
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
}
.finalCta { text-align: center; }
.finalCtaTitle {
  font-family: futurabold, Arial, Verdana, sans-serif;
  font-size: 32px;
  letter-spacing: .08em;
  margin: 0 0 10px;
}
.finalCtaSub { font-size: 18px; margin-bottom: 30px; }
.estimateForm {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
  padding: 34px 38px 38px;
  text-align: left;
  color: #171717;
}
.estimateForm h3 {
  font-family: futurabold, Arial, Verdana, sans-serif;
  text-align: center;
  font-size: 22px;
  letter-spacing: .08em;
  margin: 0 0 10px;
  color: #1b8eff;
}
.estimateForm label {
  display: block;
  font-weight: bold;
  margin: 16px 0 6px;
  font-size: 14px;
}
.estimateForm input,
.estimateForm select,
.estimateForm textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #c8d2dc;
  border-radius: 6px;
  font: inherit;
  color: #171717;
  background: #fff;
}
.estimateForm input:focus,
.estimateForm select:focus,
.estimateForm textarea:focus {
  outline: none;
  border-color: #1b8eff;
  box-shadow: 0 0 0 3px rgba(27, 142, 255, .15);
}
.estimateForm button.button {
  display: block;
  width: 100%;
  margin-top: 24px;
  border: 0;
  cursor: pointer;
  font-size: 16px;
}
.formSuccess {
  margin-top: 16px;
  text-align: center;
  color: #2e7d32;
  font-weight: bold;
}
.formError {
  margin-top: 16px;
  text-align: center;
  color: #c62828;
  font-weight: bold;
}
.estimateForm button.button:disabled {
  opacity: .65;
  cursor: default;
}

@media only screen and (max-width: 767px) {
  .estimateForm { padding: 24px 20px 28px; }
}