/* ==========================================================================
   B4 - Estilos Unificados e Responsivos para Páginas Internas de Projetos
   PC (Desktop) & Mobile
   ========================================================================== */

:root {
  --content-width: 980px;
  --container-max-width: 980px;
  --e-con-grid-template-columns: repeat(3, 1fr);
}

/* 1. Base da Página & Fundo Branco Puro */
html, body {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #1e293b !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  width: 100% !important;
  -webkit-text-size-adjust: 100%;
}

main {
  width: 100% !important;
  max-width: 100% !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor,
.elementor-section,
.e-con,
.e-con-inner,
.elementor-widget-wrap,
.elementor-column,
.elementor-top-section {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #1e293b !important;
}

/* 2. Forçar Visibilidade de Elementos Elementor */
.elementor-invisible,
.elementor-element {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 3. Regras de Visibilidade Responsiva */
@media (min-width: 768px) {
  .elementor-hidden-desktop,
  .elementor-hidden-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .elementor-hidden-mobile,
  .elementor-hidden-phone {
    display: none !important;
  }
}

/* 4. Tipografia em Fundo Claro */
.elementor h1, .elementor h2, .elementor h3,
.elementor h4, .elementor h5, .elementor h6,
.elementor-heading-title,
.elementor-widget-heading h1, .elementor-widget-heading h2,
.elementor-widget-heading h3, .elementor-widget-heading h4 {
  color: #111827 !important;
}

.elementor p,
.elementor-widget-text-editor p,
.elementor span {
  color: #334155 !important;
}

.funfact-title {
  color: #475569 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* 5. Números Indicadores de Impacto */
.number-percentage-wraper {
  color: #00A86B !important;
  font-size: 2.8rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
}

.number-percentage-wraper span,
.number-percentage-wraper .number-percentage,
.number-percentage-wraper .super {
  color: #00A86B !important;
  font-weight: 800 !important;
}

/* 6. Imagens Gerais - Proporção e Limpeza */
.elementor img,
img {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  height: auto !important;
}

/* ==========================================================================
   7. DESKTOP (PC): Enquadramento, Espaçamento Confortável e Tamanhos Harmoniosos
   ========================================================================== */
@media (min-width: 768px) {
  /* Limita os containers do Desktop em 980px para evitar imagens excessivamente grandes */
  .elementor .e-con-boxed > .e-con-inner,
  .elementor .e-con-full,
  .elementor > .e-con,
  .elementor > .elementor-section {
    max-width: 980px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* Espaçamento amplo e elegante entre seções no Desktop */
  .elementor > .e-con,
  .elementor > .elementor-section,
  .elementor .elementor-element-0492f78,
  .elementor .elementor-element-4016617,
  .elementor .elementor-element-5e70c28,
  .elementor .elementor-element-7eed2cd,
  .elementor .elementor-element-7f5c74c,
  .elementor .elementor-element-249c4a7,
  .elementor .elementor-element-a4a0aa1,
  .elementor .elementor-element-380ef55 {
    margin-top: 56px !important;
    margin-bottom: 56px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* PRIMEIRA SEÇÃO NO PC: 1 linha com 2 colunas */
  .elementor .elementor-element-71e1d18,
  .elementor .elementor-element-bc4cef9 {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 32px !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 1060px !important;
    margin: 40px auto 60px auto !important;
  }

  .elementor .elementor-element-bc4cef9 > .elementor-widget-html {
    display: none !important;
  }

  /* Imagem 1: Logo/Apresentação do Originador - AUMENTAR TAMANHO */
  .elementor .elementor-element-71e1d18 > .elementor-widget-image:first-child,
  .elementor .elementor-element-bc4cef9 > .elementor-widget-image:first-child {
    width: 100% !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .elementor .elementor-element-71e1d18 > .elementor-widget-image:first-child img,
  .elementor .elementor-element-bc4cef9 > .elementor-widget-image:first-child img {
    width: 100% !important;
    max-width: 540px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Imagem 2: Banner "Conheça o Projeto" - REDUZIR UM POUCO */
  .elementor .elementor-element-71e1d18 > .elementor-widget-image:last-child,
  .elementor .elementor-element-bc4cef9 > .elementor-widget-image:last-child {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .elementor .elementor-element-71e1d18 > .elementor-widget-image:last-child img,
  .elementor .elementor-element-bc4cef9 > .elementor-widget-image:last-child img {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* Imagens 1 específicas solicitadas pelo usuário (Aumentar Tamanho) */
  .elementor img[src*="Group-177-1"],
  .elementor img[src*="Group-157-1"],
  .elementor img[src*="Group-105-1"],
  .elementor img[src*="Group-213"],
  .elementor img[src*="Group-217-1"],
  .elementor img[src*="Group-222-2"] {
    max-width: 540px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Imagens 2 específicas solicitadas pelo usuário (Reduzir um Pouco) */
  .elementor img[src*="Post-instagram-culto-de-batismo-moderno-fotografico-azul-e-cinza-1"],
  .elementor img[src*="Post-instagram-culto-de-batismo-moderno-fotografico-azul-e-cinza-1-2"],
  .elementor img[src*="Group-106"],
  .elementor img[src*="B4-1-1-1"],
  .elementor .elementor-element-71e1d18 > .elementor-widget-image:last-child img[src*="IMG"] {
    max-width: 420px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* Centralização padrão de imagens no Desktop */
  .elementor .elementor-widget-image {
    text-align: center !important;
    width: 100% !important;
  }

  .elementor .elementor-widget-image .elementor-widget-container {
    text-align: center !important;
    width: 100% !important;
  }

  /* Limite geral de largura das imagens no PC */
  .elementor .elementor-widget-image img {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 820px !important;
    height: auto !important;
  }

  .elementor .elementor-widget-image a {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Banners Horizontais (ex: Group-178, Group-186-1, Group-108, Group-220-1, Group-215-2) */
  .elementor img[src*="Group-178"],
  .elementor img[src*="Group-186-1"],
  .elementor img[src*="Group-108"],
  .elementor img[src*="Group-220-1"],
  .elementor img[src*="Group-215-2"],
  .elementor img[src*="Group-223-2"],
  .elementor img[src*="PCPCPC"] {
    max-width: 860px !important;
  }

  /* Infográficos Gerais dos Projetos */
  .elementor img[src*="Group-179"],
  .elementor img[src*="apoena-1-1"],
  .elementor img[src*="Group-120"],
  .elementor img[src*="Group-139"],
  .elementor img[src*="Group-223-1"],
  .elementor img[src*="Group-217-2"],
  .elementor img[src*="Group-226-2"],
  .elementor img[src*="warrant-i-pc"],
  .elementor img[src*="colecao-w"] {
    max-width: 780px !important;
  }

  /* 3 Indicadores (1 Linha, 3 Colunas, Diagramados como Cards no Desktop) */
  .elementor .elementor-element-d6c59fb,
  .elementor .elementor-element-6c1bcc7 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 28px !important;
    max-width: 980px !important;
    margin: 48px auto !important;
    width: 100% !important;
  }

  .elementor .elementor-element-d6c59fb > .elementor-widget-elementskit-funfact,
  .elementor .elementor-element-6c1bcc7 > .elementor-widget-elementskit-funfact {
    flex: 1 1 0 !important;
    max-width: 310px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .elementskit-funfact {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 32px 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    box-sizing: border-box !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  }

  .elementskit-funfact:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(0, 168, 107, 0.12) !important;
    border-color: #86efac !important;
  }

  /* Cards NFT e Certificados - Destaque Visual Ampliado */
  .elementor .elementor-element-7f5c74c {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
    text-align: center !important;
  }

  .elementor img[src*="Arace-iba"],
  .elementor img[src*="aaa.png"],
  .elementor img[src*="Group-122"],
  .elementor img[src*="Group-127"],
  .elementor img[src*="Group-128"],
  .elementor img[src*="Group-225"],
  .elementor img[src*="Group-219-1"],
  .elementor img[src*="Group-232-1"],
  .elementor img[src*="Group-235-1"] {
    max-width: 820px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Símbolo do Animal (Apoena, Aracê Ibá, Owie Bitioni, Dowedi Mitir) - Tamanho Maior */
  .elementor img[src*="Group-165-1"],
  .elementor img[src*="Group-181"],
  .elementor img[src*="Group-221-2"],
  .elementor img[src*="Group-227-3"] {
    max-width: 860px !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 36px !important;
  }

  /* Painéis Econômico / Originador */
  .elementor img[src*="Group-165"],
  .elementor img[src*="Group-161"],
  .elementor img[src*="Group-133"],
  .elementor img[src*="Grupo-10"],
  .elementor img[src*="painelowie"],
  .elementor img[src*="Painel-Yaku"] {
    max-width: 860px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Imagem CTA que leva para Exchange (Group-135 / Group-236-1) - Espaçamento superior aumentado */
  .elementor img[src*="Group-135"],
  .elementor img[src*="Group-236-1"] {
    max-width: 260px !important;
    width: auto !important;
    margin-top: 64px !important;
    margin-bottom: 40px !important;
    display: inline-block !important;
  }

  /* Título "Documentos" Centralizado */
  .elementor-element-8042b23,
  .elementor-element-a8da45e {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: block !important;
  }

  .elementor-element-8042b23 p,
  .elementor-element-a8da45e p {
    text-align: center !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 56px !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.01em !important;
  }

  /* Botões de Documentos: Centralizados e em Tamanhos Ideais */
  .elementor .elementor-element-67bc55b,
  .elementor .elementor-element-5eeb4dd {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    max-width: 860px !important;
    margin: 16px auto !important;
    width: 100% !important;
  }

  .elementor .elementor-element-67bc55b > .elementor-widget-image,
  .elementor .elementor-element-5eeb4dd > .elementor-widget-image {
    flex: 0 1 240px !important;
    width: 240px !important;
    max-width: 240px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .elementor .elementor-element-67bc55b img,
  .elementor .elementor-element-5eeb4dd img {
    width: 100% !important;
    max-width: 240px !important;
    height: 52px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
  }

  .elementor .elementor-element-67bc55b img:hover,
  .elementor .elementor-element-5eeb4dd img:hover {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.06) !important;
  }

  /* Botões específicos do projeto Warrant I no Desktop */
  .elementor .elementor-element-63bf2cb,
  .elementor .elementor-element-2495062 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    max-width: 780px !important;
    margin: 0 auto !important;
  }

  .elementor .elementor-element-63bf2cb img,
  .elementor .elementor-element-2495062 img {
    max-width: 220px !important;
    height: auto !important;
  }

  /* Grid especial de 4 NFTs em Yaku Yvira no Desktop */
  .elementor .elementor-element-0e65ea2 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .elementor .elementor-element-0e65ea2 img {
    max-width: 220px !important;
  }
}

/* ==========================================================================
   8. MOBILE (Smartphones): 1 Abaixo do Outro, Proporções Confortáveis
   ========================================================================== */
@media (max-width: 767px) {
  /* Espaçamento lateral adequado para não colar na borda do celular */
  .elementor .e-con,
  .elementor .e-con-boxed,
  .elementor .e-con-inner,
  .elementor .e-con-full,
  .elementor > .elementor-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Primeira seção e demais seções no Mobile: empilhadas 1 abaixo da outra */
  .elementor .elementor-element-b54e94e,
  .elementor .elementor-element-16efe03 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Imagens no mobile: 100% da largura útil sem overflow e centradas */
  .elementor img,
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Indicadores numéricos no mobile */
  .number-percentage-wraper {
    font-size: 2.2rem !important;
  }

  .funfact-title {
    font-size: 0.85rem !important;
  }

  /* Botões no Mobile: empilhados com largura confortável e toque adequado */
  .elementor .elementor-element-10f1c07,
  .elementor .elementor-element-1a78b59,
  .elementor .e-grid.elementor-hidden-desktop,
  .elementor .e-grid.elementor-hidden-tablet {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .elementor .elementor-element-10f1c07 .elementor-widget-image,
  .elementor .elementor-element-1a78b59 .elementor-widget-image,
  .elementor .e-grid.elementor-hidden-desktop .elementor-widget-image,
  .elementor .e-grid.elementor-hidden-tablet .elementor-widget-image {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .elementor .elementor-element-10f1c07 .elementor-widget-image img,
  .elementor .elementor-element-1a78b59 .elementor-widget-image img,
  .elementor .e-grid.elementor-hidden-desktop .elementor-widget-image img,
  .elementor .e-grid.elementor-hidden-tablet .elementor-widget-image img {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Grid especial de NFTs em Yaku Yvira no mobile: 2 colunas */
  .elementor .elementor-element-0e65ea2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }
}

/* 9. Remoção do Relógio Climático (Desktop e Mobile) */
.elementor .elementor-element-2722b0f,
.elementor .elementor-element-d469c07,
.elementor .elementor-element-05183f8,
.climate-clock-container,
climate-clock-b4-pt {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 10. Interações e Hover nos Botões de Imagem */
.elementor-widget-image a img {
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

.elementor-widget-image a:hover img {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
}

/* Limpeza de fundos artificiais nos botões de documentos */
.elementor-widget-image a img[src*="site-do-originador"],
.elementor-widget-image a img[src*="pagina-do-projeto"],
.elementor-widget-image a img[src*="instagram"],
.elementor-widget-image a img[src*="whitepaper"],
.elementor-widget-image a img[src*="certificado-de-conformidade"],
.elementor-widget-image a img[src*="Grupo-55"],
.elementor-widget-image a img[src*="Group-53"],
.elementor-widget-image a img[src*="Group-54"],
.elementor-widget-image a img[src*="Group-55"],
.elementor-widget-image a img[src*="Group-56"],
.elementor-widget-image a img[src*="Group-57"],
.elementor-widget-image a img[src*="Group-58"],
.elementor-widget-image a img[src*="Grupo-29"],
.elementor-widget-image a img[src*="Grupo-30"],
.elementor-widget-image a img[src*="Grupo-31"],
.elementor-widget-image a img[src*="Grupo-32"],
.elementor-widget-image a img[src*="Grupo-33"],
.elementor-widget-image a img[src*="saswdvaasas"],
.elementor-widget-image a img[src*="asdfgnh"] {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}