/**
 * Nexo Section Layout System.
 *
 * Integração visual entre Nexo Base e SiteOrigin Page Builder.
 * Controla rows/seções configuradas pelos campos Nexo em Row Styles.
 *
 * Responsabilidade deste arquivo:
 * - controlar background full width, largura visual, camada e sobreposição;
 * - permitir deslocamento livre do conteúdo no eixo X/Y;
 * - não substituir o padding nativo do SiteOrigin, que deve ser usado
 *   para ajuste fino de top/right/bottom/left.
 *
 * @package NexoBase
 */

/**
 * Wrapper externo da linha.
 *
 * Deve ser usado apenas para ajustes seguros, sem controlar o layout interno.
 * O background visual principal fica na própria .nexo-row, usando a técnica:
 * background + box-shadow 100vmax.
 */
.nexo-so-row-wrapper {
  position: relative;
  z-index: auto;
}

/**
 * Controle de camada da row inteira.
 *
 * Atua no wrapper externo do SiteOrigin (.panel-grid), permitindo que uma
 * row anterior fique acima de uma row posterior, ou vice-versa.
 */
.panel-grid.nexo-row-layer-wrapper,
.nexo-row-layer-wrapper.panel-grid {
  position: relative;
  z-index: var(--nexo-row-z-index, 1);
}

/**
 * Remove espaços residuais entre rows Nexo.
 */
.panel-grid.nexo-so-row-wrapper,
.nexo-so-row-wrapper.panel-grid {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/**
 * Corrige microfendas visuais de 1px entre rows Nexo consecutivas.
 */
.panel-grid.nexo-so-row-wrapper + .panel-grid.nexo-so-row-wrapper {
  margin-top: -1px !important;
}

/**
 * Remove margens indesejadas quando solicitado nas opções da row.
 */
.panel-grid.nexo-row--no-bottom-margin,
.nexo-row--no-bottom-margin.panel-grid,
.siteorigin-panels-stretch.nexo-row--no-bottom-margin {
  margin-bottom: 0 !important;
}

/**
 * Seção genérica Nexo.
 *
 * Importante:
 * Por padrão, este sistema não aplica padding vertical.
 * Use o padding nativo da linha no SiteOrigin para top/right/bottom/left.
 * As classes nexo-row-spacing--* permanecem apenas como presets opcionais.
 */
.nexo-row {
  --nexo-row-background: #ffffff;
  --nexo-row-text-color: #1f2523;
  --nexo-row-heading-color: #07111f;
  --nexo-row-max-width: 1180px;
  --nexo-row-padding-top: 0;
  --nexo-row-padding-bottom: 0;

  position: relative;
  z-index: var(--nexo-row-z-index, 1);
  width: 100%;
  max-width: var(--nexo-row-max-width);
  margin-right: auto !important;
  margin-left: auto !important;
  padding-top: var(--nexo-row-padding-top);
  padding-bottom: var(--nexo-row-padding-bottom);
  background: var(--nexo-row-background);
  box-shadow: 0 0 0 100vmax var(--nexo-row-background);
  clip-path: inset(0 -100vmax);
  color: var(--nexo-row-text-color);
}

/**
 * Controle de camada do wrapper interno da row.
 */
.nexo-row.nexo-row-layer {
  z-index: var(--nexo-row-z-index, 1);
}

/**
 * Garante que células e widgets continuem livres dentro da seção.
 */
.nexo-row .panel-grid-cell {
  position: relative;
  z-index: 1;
}

.nexo-row .so-panel:last-child,
.nexo-row .widget:last-child,
.nexo-row .textwidget > *:last-child {
  margin-bottom: 0;
}

/**
 * Cores/presets de compatibilidade.
 *
 * Estes presets continuam existindo para não quebrar páginas atuais,
 * mas a cor personalizada definida no SiteOrigin sobrescreve estas
 * variáveis via style inline.
 */
.nexo-row--orange {
  --nexo-row-background: #fb5a00;
  --nexo-row-text-color: #07111f;
  --nexo-row-heading-color: #07111f;
}

.nexo-row--light {
  --nexo-row-background: #f4f4f4;
  --nexo-row-text-color: #1f2523;
  --nexo-row-heading-color: #07111f;
}

.nexo-row--dark,
.nexo-row--dark-bg {
  --nexo-row-background: #171d1b;
  --nexo-row-text-color: #ffffff;
  --nexo-row-heading-color: #ffffff;
}

/**
 * Fundo transparente.
 *
 * Mantém a row como Nexo row, preservando largura, camada e deslocamento,
 * mas impede que o fundo e o box-shadow full width cubram a próxima row.
 */
.nexo-row.nexo-row-bg--transparent {
  --nexo-row-background: transparent;

  background: transparent !important;
  box-shadow: none !important;
}

/**
 * Overlay escuro opcional para seção com imagem de fundo.
 */
.nexo-row--dark-bg {
  overflow: hidden;
}

.nexo-row--dark-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.58);
  pointer-events: none;
}

.nexo-row--dark-bg > *,
.nexo-row--dark-bg .panel-grid-cell,
.nexo-row--dark-bg .so-panel,
.nexo-row--dark-bg .widget,
.nexo-row--dark-bg .textwidget {
  position: relative;
  z-index: 1;
}

/**
 * Larguras.
 */
.nexo-row-width--narrow {
  --nexo-row-max-width: 960px;
}

.nexo-row-width--normal {
  --nexo-row-max-width: 1180px;
}

.nexo-row-width--wide {
  --nexo-row-max-width: 1360px;
}

.nexo-row-width--full {
  --nexo-row-max-width: 100%;
  width: 100%;
}

/**
 * Espaçamentos verticais opcionais.
 *
 * Recomendação operacional:
 * - para ajuste fino, use o padding nativo do SiteOrigin;
 * - use estes presets apenas quando quiser aplicar um espaçamento rápido
 *   pelo próprio sistema Nexo.
 */
.nexo-row-spacing--none {
  --nexo-row-padding-top: 0;
  --nexo-row-padding-bottom: 0;
}

.nexo-row-spacing--compact {
  --nexo-row-padding-top: 44px;
  --nexo-row-padding-bottom: 44px;
}

.nexo-row-spacing--normal {
  --nexo-row-padding-top: 80px;
  --nexo-row-padding-bottom: 80px;
}

.nexo-row-spacing--large {
  --nexo-row-padding-top: 112px;
  --nexo-row-padding-bottom: 112px;
}

.nexo-row-spacing--hero {
  --nexo-row-padding-top: 150px;
  --nexo-row-padding-bottom: 150px;
}

/**
 * Sobreposição genérica.
 *
 * Esta regra cobre o caso em que a row atual sobe sobre a anterior.
 * Para deslocar conteúdo para qualquer direção, use os campos de deslocamento
 * X/Y do conteúdo e camada da linha/conteúdo.
 */
.nexo-row.nexo-row-overlap--small,
.nexo-row.nexo-row-overlap--medium,
.nexo-row.nexo-row-overlap--large,
.nexo-row.nexo-row-overlap--custom {
  z-index: var(--nexo-row-z-index, 3);
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.nexo-row.nexo-row-overlap--small {
  margin-top: -48px !important;
}

.nexo-row.nexo-row-overlap--medium {
  margin-top: -82px !important;
}

.nexo-row.nexo-row-overlap--large {
  margin-top: -120px !important;
}

.nexo-row.nexo-row-overlap--custom {
  margin-top: calc(0px - var(--nexo-row-overlap-amount, 82px)) !important;
}

/**
 * Cor visual abaixo da row sobreposta.
 */
.nexo-row.nexo-row-overlap--small,
.nexo-row.nexo-row-overlap--medium,
.nexo-row.nexo-row-overlap--large,
.nexo-row.nexo-row-overlap--custom {
  --nexo-row-next-background: #f4f4f4;
}

.nexo-row.nexo-row-overlap--small::after,
.nexo-row.nexo-row-overlap--medium::after,
.nexo-row.nexo-row-overlap--large::after,
.nexo-row.nexo-row-overlap--custom::after {
  content: "";
  position: absolute;
  right: calc(50% - 50vw);
  bottom: 0;
  left: calc(50% - 50vw);
  z-index: -1;
  background: var(--nexo-row-next-background);
  pointer-events: none;
}

.nexo-row.nexo-row-overlap--small::after {
  top: 48px;
}

.nexo-row.nexo-row-overlap--medium::after {
  top: 82px;
}

.nexo-row.nexo-row-overlap--large::after {
  top: 120px;
}

.nexo-row.nexo-row-overlap--custom::after {
  top: var(--nexo-row-overlap-amount, 82px);
}

/**
 * Utilitários internos.
 */
.nexo-row__inner,
.nexo-section-inner {
  width: min(100%, var(--nexo-row-max-width, 1180px));
  margin-right: auto;
  margin-left: auto;
}

/**
 * Deslocamento livre do conteúdo interno da row.
 *
 * A própria row também participa da camada visual para conseguir sobrepor
 * rows seguintes quando o conteúdo é movido para fora de seus limites.
 */
.nexo-row.nexo-row-content-offset {
  position: relative;
  z-index: var(--nexo-row-z-index, var(--nexo-row-content-z-index, 5));
}

.nexo-row.nexo-row-content-offset > .panel-grid-cell {
  position: relative;
  z-index: var(--nexo-row-content-z-index, 5);
  transform: translate(
    var(--nexo-row-content-offset-x, 0),
    var(--nexo-row-content-offset-y, 0)
  );
}

/**
 * Permite que conteúdo deslocado ultrapasse verticalmente os limites da row.
 *
 * Mantém a técnica de full width nas laterais, mas amplia a área vertical
 * do clip-path para evitar corte do conteúdo movido.
 */
.nexo-row.nexo-row-overflow-visible {
  overflow: visible !important;
  clip-path: inset(
    calc(0px - var(--nexo-row-visible-extra-y, 240px)) -100vmax
      calc(0px - var(--nexo-row-visible-extra-y, 240px)) -100vmax
  ) !important;
}

.site-main .entry-content img.nexo-certifications-banner-image,
.site-main .entry-content .nexo-certifications-banner-image {
  display: block;
  width: min(100vw, 1920px);
  max-width: none;
  height: auto;
  margin-right: 0;
  margin-left: 50%;
  transform: translateX(-50%);
}

/**
 * Mobile e tablets.
 */
@media (max-width: 1024px) {
  .nexo-row {
    max-width: calc(100% - 48px);
  }

  .nexo-row-width--full {
    max-width: 100%;
  }

  .nexo-row-spacing--compact {
    --nexo-row-padding-top: 36px;
    --nexo-row-padding-bottom: 36px;
  }

  .nexo-row-spacing--normal {
    --nexo-row-padding-top: 64px;
    --nexo-row-padding-bottom: 64px;
  }

  .nexo-row-spacing--large {
    --nexo-row-padding-top: 88px;
    --nexo-row-padding-bottom: 88px;
  }

  .nexo-row-spacing--hero {
    --nexo-row-padding-top: 112px;
    --nexo-row-padding-bottom: 112px;
  }

  .nexo-row.nexo-row-overlap--small {
    margin-top: -36px !important;
  }

  .nexo-row.nexo-row-overlap--medium {
    margin-top: -64px !important;
  }

  .nexo-row.nexo-row-overlap--large {
    margin-top: -92px !important;
  }

  .nexo-row.nexo-row-overlap--small::after {
    top: 36px;
  }

  .nexo-row.nexo-row-overlap--medium::after {
    top: 64px;
  }

  .nexo-row.nexo-row-overlap--large::after {
    top: 92px;
  }

  .nexo-row.nexo-row-overlap--custom::after {
    top: var(--nexo-row-overlap-amount, 82px);
  }
}

@media (max-width: 767px) {
  .nexo-row {
    max-width: calc(100% - 24px);
  }

  .nexo-row-width--full {
    max-width: 100%;
  }

  .nexo-row-spacing--compact {
    --nexo-row-padding-top: 30px;
    --nexo-row-padding-bottom: 30px;
  }

  .nexo-row-spacing--normal {
    --nexo-row-padding-top: 48px;
    --nexo-row-padding-bottom: 48px;
  }

  .nexo-row-spacing--large {
    --nexo-row-padding-top: 68px;
    --nexo-row-padding-bottom: 68px;
  }

  .nexo-row-spacing--hero {
    --nexo-row-padding-top: 84px;
    --nexo-row-padding-bottom: 84px;
  }

  .nexo-row.nexo-row-overlap--small {
    margin-top: -28px !important;
  }

  .nexo-row.nexo-row-overlap--medium {
    margin-top: -48px !important;
  }

  .nexo-row.nexo-row-overlap--large {
    margin-top: -68px !important;
  }

  .nexo-row.nexo-row-overlap--small::after {
    top: 28px;
  }

  .nexo-row.nexo-row-overlap--medium::after {
    top: 48px;
  }

  .nexo-row.nexo-row-overlap--large::after {
    top: 68px;
  }

  .nexo-row.nexo-row-overlap--custom::after {
    top: var(--nexo-row-overlap-amount, 82px);
  }
}

/* ==========================================================================
   Home hardcoded: containers internos padronizados
   ========================================================================== */

/*
 * Padrão da Home legada:
 * - o fundo da row pode abrir em largura total quando necessário;
 * - o conteúdo visual de cada seção deve ter largura máxima própria.
 */
body.home {
  --nexo-home-container-normal: 1180px;
  --nexo-home-container-wide: 1360px;
  --nexo-home-container-padding: 24px;
}

body.home #pg-64-6 .nexo-information-card-feature-grid,
body.home #pg-64-8 .nexo-payment-shipping-section,
body.home #pg-64-9 .nexo-faq-carousel-section,
body.home #pg-64-10 .nexo-final-action-section {
  box-sizing: border-box;
  width: min(
    calc(100% - (var(--nexo-home-container-padding) * 2)),
    var(--nexo-home-container-normal)
  );
  max-width: var(--nexo-home-container-normal);
  margin-right: auto !important;
  margin-left: auto !important;
}

/*
 * Seção do fabricante:
 * mantém duas colunas SiteOrigin, mas limita a row e aproxima o conteúdo
 * sem depender de classes manuais adicionais.
 */
body.home #pg-64-7 {
  margin-bottom: 0 !important;
}

body.home #pg-64-7 > .panel-row-style-for-64-7 {
  box-sizing: border-box;
  width: min(
    calc(100% - (var(--nexo-home-container-padding) * 2)),
    var(--nexo-home-container-wide)
  ) !important;
  max-width: var(--nexo-home-container-wide) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body.home #pgc-64-7-0 .nexo-product-manufacturer-copy {
  max-width: 470px !important;
  margin-right: clamp(32px, 4vw, 76px) !important;
  margin-left: auto !important;
  padding-top: 65px !important;
}

body.home #pgc-64-7-1 .textwidget > p:first-child {
  display: none !important;
}

body.home #pgc-64-7-1 .textwidget > p {
  margin: 0 !important;
  text-align: left !important;
}

body.home #pgc-64-7-1 img.wp-image-1769 {
  display: block !important;
  width: 100% !important;
  max-width: 548px !important;
  height: auto !important;
  margin: 0 !important;
}

/* ==========================================================================
   Home hardcoded: banner de certificações sobre fundo cinza claro
   ========================================================================== */

body.home #pg-64-5,
body.home #pg-64-5 > .panel-row-style,
body.home #pg-64-5 > .nexo-row,
body.home #pg-64-5 .nexo-row--dark {
  --nexo-row-background: #f4f4f4 !important;
  --nexo-row-next-background: #f4f4f4 !important;
  background: #f4f4f4 !important;
  box-shadow: none !important;
}

body.home #pg-64-5 > .panel-row-style::before,
body.home #pg-64-5 > .panel-row-style::after,
body.home #pg-64-5 .nexo-row::before,
body.home #pg-64-5 .nexo-row::after {
  background: #f4f4f4 !important;
  box-shadow: none !important;
}

body.home .nexo-certifications-banner-overlay {
  background: #f4f4f4 !important;
}

body.home .nexo-certifications-banner-overlay img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

/* ==========================================================================
   Home hardcoded: ajuste mobile do card de orçamento escuro
   ========================================================================== */

body.home #pg-64-3 .nexo-budget-card h2 {
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

@media (max-width: 780px) {
  body.home #pg-64-3 .nexo-budget-card {
    padding: 58px 28px 62px !important;
  }

  body.home #pg-64-3 .nexo-budget-card h2 {
    font-size: clamp(27px, 7vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  body.home #pg-64-3 .nexo-budget-card h2:first-of-type {
    margin-bottom: 6px !important;
  }

  body.home #pg-64-3 .nexo-budget-card h2:nth-of-type(2) {
    margin-bottom: 24px !important;
  }
}

@media (max-width: 425px) {
  body.home #pg-64-3 .nexo-budget-card {
    padding: 52px 24px 58px !important;
  }

  body.home #pg-64-3 .nexo-budget-card h2 {
    font-size: clamp(25px, 7.2vw, 31px);
    line-height: 1.1;
  }
}

/* ==========================================================================
   Home hardcoded: reduz espaço entre cards de benefícios e fabricante
   ========================================================================== */

@media (max-width: 780px) {
  body.home {
    --nexo-home-container-padding: 16px;
  }

  body.home #pg-64-6 {
    margin-bottom: 0 !important;
  }

  body.home #pg-64-6 > .panel-row-style {
    padding-bottom: 24px !important;
  }

  body.home #pg-64-7 > .panel-row-style-for-64-7 {
    padding-top: 22px !important;
    padding-bottom: 54px !important;
  }

  body.home #pgc-64-7-0 .nexo-product-manufacturer-copy {
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
  }

  body.home #pgc-64-7-1 .textwidget > p {
    text-align: center !important;
  }

  body.home #pgc-64-7-1 img.wp-image-1769 {
    max-width: 548px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

@media (max-width: 425px) {
  body.home #pg-64-6 > .panel-row-style {
    padding-bottom: 18px !important;
  }

  body.home #pg-64-7 > .panel-row-style-for-64-7 {
    padding-top: 16px !important;
    padding-bottom: 48px !important;
  }
}

/* ==========================================================================
   Home hardcoded: CTAs de WhatsApp em verde acessível
   ========================================================================== */

body.home .nexo-hero-copy__cta .nexo-cta-button,
body.home #pg-64-3 .nexo-budget-card .nexo-cta-button,
body.home #pg-64-6 .nexo-information-card-slot .nexo-cta-button,
body.home #pg-64-8 .nexo-payment-shipping-section__cta .nexo-cta-button,
body.home #pg-64-10 .nexo-final-action-card--quote .nexo-cta-button {
  --nexo-cta-background-color: #058846;
  --nexo-cta-text-color: #ffffff;
  --nexo-cta-hover-background-color: #04773d;
  --nexo-cta-hover-text-color: #ffffff;

  background: #058846 !important;
  background-color: #058846 !important;
  color: #ffffff !important;
  border-color: #058846 !important;
}

body.home .nexo-hero-copy__cta .nexo-cta-button:hover,
body.home .nexo-hero-copy__cta .nexo-cta-button:focus,
body.home #pg-64-3 .nexo-budget-card .nexo-cta-button:hover,
body.home #pg-64-3 .nexo-budget-card .nexo-cta-button:focus,
body.home #pg-64-6 .nexo-information-card-slot .nexo-cta-button:hover,
body.home #pg-64-6 .nexo-information-card-slot .nexo-cta-button:focus,
body.home #pg-64-8 .nexo-payment-shipping-section__cta .nexo-cta-button:hover,
body.home #pg-64-8 .nexo-payment-shipping-section__cta .nexo-cta-button:focus,
body.home #pg-64-10 .nexo-final-action-card--quote .nexo-cta-button:hover,
body.home #pg-64-10 .nexo-final-action-card--quote .nexo-cta-button:focus {
  background: #04773d !important;
  background-color: #04773d !important;
  color: #ffffff !important;
  border-color: #04773d !important;
}

/* ==========================================================================
   Home hardcoded: remove respiro lateral global do layout
   ========================================================================== */

body.home .site-layout,
body.home .site-layout--full {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body.home .site-main,
body.home .site-main--full {
  width: 100% !important;
  max-width: none !important;
}

/* ==========================================================================
   Home hardcoded: alinha texto e imagem da seção fabricante pelo topo
   ========================================================================== */

body.home #pg-64-7 .nexo-product-manufacturer-copy {
  padding-top: 0 !important;
}

body.home #pg-64-7 .panel-grid-cell {
  align-self: flex-start;
}

body.home #pg-64-7 .nexo-product-manufacturer-copy h2,
body.home #pg-64-7 .nexo-product-manufacturer-copy h3,
body.home #pg-64-7 .nexo-product-manufacturer-copy p:first-child {
  margin-top: 0 !important;
}

/* ==========================================================================
   Home hardcoded: centraliza seção fabricante com o restante da Home
   ========================================================================== */

body.home #pg-64-7 {
  margin-right: auto !important;
  margin-left: auto !important;
}

body.home #pg-64-7 > .panel-row-style,
body.home #pg-64-7 > .panel-row-style-for-64-7 {
  box-sizing: border-box;
  width: min(calc(100% - 48px), 1180px) !important;
  max-width: 1180px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body.home #pg-64-7 .panel-grid-cell:first-child {
  padding-left: 0 !important;
}

body.home #pg-64-7 .panel-grid-cell:last-child {
  padding-right: 0 !important;
}
