/* aumentar tamanho do hamburguer */
@media (max-width: 768px) {
  .wp-block-navigation__responsive-container-open {
    padding: 12px !important;
  }
  .wp-block-navigation__responsive-container-open svg {
    width: 44px !important;
    height: 44px !important;
  }
}

/* aumentar tamanho do X do menu hamburguer*/

@media (max-width: 768px) {
  .wp-block-navigation__responsive-container-close {
    padding: 12px !important;
    line-height: 1 !important;
  }

  .wp-block-navigation__responsive-container-close svg {
    width: 44px !important;
    height: 44px !important;
    display: block;
  }
}




/* =========================================================
   ODS – TRIGGER (BOTÃO INVISÍVEL)
   ========================================================= */

.ods-trigger{
  all: unset;
  display: inline-block;
  line-height: 0;
  cursor: pointer;
}

.ods-trigger img{
  display: block;
}

/* foco acessível (somente teclado) */
.ods-trigger:focus{ outline: none; }
.ods-trigger:focus-visible{
  outline: 3px solid #71AF2E;
  outline-offset: 4px;
  border-radius: 6px;
}


/* =========================================================
   MODAL BASE
   ========================================================= */

.ods-modal[hidden]{
  display: none !important;
}

/* Modal ocupa 100% da viewport, sem “faixa” livre */
.ods-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
}


/* Overlay FIXO (não absolute) para não depender de nenhum container */
.ods-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.6);
  z-index: 0;
  pointer-events: auto;
}


/* =========================================================
   MODAL PANEL
   ========================================================= */

.ods-modal__panel{
  position: relative;
  background: #ffffff;
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
  padding: 32px;
  border-radius: 12px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  z-index: 1;
  pointer-events: auto;
}

/* =========================================================
   BOTÃO FECHAR
   ========================================================= */

.ods-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 56px;        /* área clicável */
  height: 56px;
  font-size: 36px;   /* tamanho do X */
  line-height: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #71AF2E;
}

/* ajuste fino para mobil */
@media (max-width: 600px){
  .ods-modal__close{
    width: 64px;
    height: 64px;
    font-size: 40px;
  }
}


/* =========================================================
   HEADER
   ========================================================= */

.ods-modal__header{
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

/* ÍCONE ODS – DESKTOP */
.ods-modal__icon{
  width: 115px;
  height: 115px;
  flex: 0 0 115px;
  object-fit: contain;
}

/* imagens genéricas do header (se houver) */
.ods-modal__header img:not(.ods-modal__icon){
  width: 56px;
  height: auto;
}


/* =========================================================
   VÍDEO – 100% LARGURA
   ========================================================= */

.ods-modal__video{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin-bottom: 24px;
  background: #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
}

.ods-modal__video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================================================
   TEXTO
   ========================================================= */

.ods-modal__intro{
  margin-bottom: 24px;
  font-size: 16px;
}

.ods-modal h3{
  margin-top: 24px;
  margin-bottom: 12px;
}

.ods-highlight{
  color: #71AF2E;
}


/* =========================================================
   IMAGEM GRANDE – 100% LARGURA
   ========================================================= */

.ods-modal__image{
  margin-top: 32px;
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 32px;
}



.ods-modal__image img{
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px){

  .ods-modal__panel{
    margin: 16px auto;
    padding: 20px;
    max-height: calc(100vh - 32px);
  }

  /* ÍCONE ODS – MOBILE */
  .ods-modal__icon{
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
  }

}






/* ==========================
   CAROUSEL – BASE
========================== */

.bc-title{
  text-align: center;
  margin: 0 0 24px;
  color: #71AF2E;
  font-weight: 400;
}

.bc-title--left{ text-align:left; margin:0; }
/*
.bc-carousel{
  width: 100%;
}

.bc-carousel__frame{
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 16px;
}

.bc-carousel__viewport{
  overflow: hidden;
  outline: none;
}

.bc-carousel__track{
  display: flex;
  transition: transform 320ms ease;
  will-change: transform;
}

.bc-slide{
  flex: 0 0 100%; 
}
*/

/* botões setas */
/*
/ * Setas sem círculo/borda * /
.bc-carousel__nav{
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/ * controla tamanho do SVG * /
.bc-carousel__nav img{
  width: 28px;   / * ajuste aqui * /
  height: 28px;
  display: block;
}

/ * aumentar no mobile * /
@media (max-width: 600px){
  .bc-carousel__nav img{
    width: 34px;
    height: 34px;
  }
}

/ * foco acessível (opcional) * /
.bc-carousel__nav:focus{ outline: none; }
.bc-carousel__nav:focus-visible{
  outline: 3px solid rgba(113,175,46,.45);
  outline-offset: 6px;
  border-radius: 8px;
}

.bc-carousel__nav:disabled{
  opacity: .4;
  cursor: not-allowed;
}
*/
/* dots */
/*
.bc-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.bc-dot{
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: rgba(113,175,46,.35);
  border: 0;
  cursor: pointer;
}
.bc-dot[aria-current="true"]{
  background: #71AF2E;
}
*/

/* ==========================
   DEPOIMENTOS (CARD)
========================== */
/*
.bc-testimonial__card{
  border: 1px solid #71AF2E;
  border-radius: 8px;
  padding: 24px;
  max-width: 860px;
  margin: 0 auto;
}

.bc-testimonial__quote{
  margin: 0 0 18px;
  text-align: center;
  line-height: 1.6;
}

.bc-testimonial__meta{
  text-align: center;
}
.bc-testimonial__name{
  display: block;
}
.bc-testimonial__role{
  display: block;
  color: #71AF2E;
  margin-top: 4px;
}
*/

/* ==========================
   IMPRENSA (vários por vez)
========================== */

.bc-press__row{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 16px;
}

/* na imprensa: mostrar vários itens por vez */
.bc-carousel__frame--press .bc-slide{
  flex: 0 0 auto;            /* NÃO 100% */
  width: 160px;              /* tamanho do “logo” */
  display: grid;
  place-items: center;
}

.bc-carousel__frame--press .bc-carousel__track{
  gap: 28px;
}

.bc-press__item span{
  font-weight: 700;
  font-size: 22px;
  color: #111;
}

/* ==========================
   RESPONSIVO
========================== */

@media (max-width: 900px){
  .bc-press__row{
    grid-template-columns: 1fr;
  }
  .bc-title--left{
    text-align: center;
    margin-bottom: 14px;
  }
}

@media (max-width: 600px){
  .bc-carousel__frame{
    grid-template-columns: 44px 1fr 44px;
  }
  .bc-carousel__nav{
    width: 40px;
    height: 40px;
    font-size: 28px;
  }

  /* imprensa: itens menores no mobile */
  .bc-carousel__frame--press .bc-slide{
    width: 120px;
  }
}


/* MARQUEE: sem transição (o JS move em loop) */
.bc-carousel--marquee .bc-carousel__track{
  transition: none !important;
}

/* pausa ao passar mouse ou focar dentro (teclado) */
.bc-carousel--marquee .bc-carousel__viewport:hover .bc-carousel__track,
.bc-carousel--marquee .bc-carousel__viewport:focus-within .bc-carousel__track{
  animation-play-state: paused;
}


/* Imprensa: deixa a movimentação contínua mais limpa */
.bc-carousel--press .bc-carousel__track{
  transition: none !important;
  will-change: transform;
}



/* produtos do home */

/* ====== BLOCO PRODUTOS (dinâmico) - padronização total ====== */

.bc-produtos { padding: 32px 0; }

.bc-produtos__top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:20px;
}

/* Título e subtítulo iguais ao seu bloco de cima */
.bc-produtos__title{
  margin:0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 500;
}
.bc-produtos__subtitle{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

/* Grid */
.bc-produtos__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

/* Card */
.bc-card{}

/* IMAGEM: sem marco, sem padding, ocupando tudo */
.bc-card__img{
  display:block;
  width: 100%;
  aspect-ratio: 1 / 1;          /* ajuste se quiser mais “quadrado”: 1/1 */
  overflow:hidden;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.bc-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* preenche o espaço todo */
  display:block;
}

.bc-card__img img{ object-fit: contain; background: #fff; }

/* Título do produto */
.bc-card__title{
  margin: 14px 0 8px;
  font-size: 22px;              /* ajuste fino aqui para ficar idêntico */
  line-height: 1.2;
  font-weight: 500;
}
.bc-card__title a{
  color: inherit;
  text-decoration: none;
}

.wp-block-heading a{
  color: inherit;
  text-decoration: none;
}

/* Descrição */
.bc-card__desc{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  max-width: 34ch;              /* dá o “respiro” parecido com o topo */
}

/* BOTÕES: padronizar (igual ao bloco de cima) */
.bc-btn{
  -webkit-appearance:none;
  appearance:none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  padding: 10px 16px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border: 2px solid transparent;
  box-shadow: none;
  outline: none;
}

/* Ver produto (verde sólido) */
.bc-btn--solid{
  background: #6cab2f;
  color:#fff;
}
.bc-btn--solid:hover{
  opacity: .92;
}

/* Ver todos (contorno) */
.bc-btn--outline{
  background: transparent;
  border-color: #6cab2f;
  color: #6cab2f;
}
.bc-btn--outline:hover{
  background: rgba(108,171,47,.08);
}

/* Responsivo */
@media (max-width: 1024px){
  .bc-produtos__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .bc-produtos__top{ flex-direction:column; align-items:flex-start; }
  .bc-produtos__grid{ grid-template-columns: 1fr; }
}


/* diminuir o padding no HEADER no mobile */
@media (max-width: 600px){
  .header-main{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* HERO COM VÍDEO LOCAL */
.hero{
  position: relative;
  overflow: hidden;
}

/* vídeo ocupa toda a seção */
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* overlay escuro para legibilidade */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(2,36,28,0.6); /* verde escuro Bioculty */
  z-index: 1;
  margin-top: 0px !important;
}

/* conteúdo acima do vídeo */
.hero-content{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}




/* =====================================================
   CONTROLE DE HERO POR DISPOSITIVO
   ===================================================== */

/* ---- Desktop / Tablet (padrão) ---- */
.hero{
  display: block;
}

.hero-sem-video{
  display: none;
}

/* ---- Mobile ---- */
@media (max-width: 768px){

  /* Esconde totalmente o hero com vídeo */
  .hero{
    display: none !important;
  }

  /* Mostra o hero alternativo */
  .hero-sem-video{
    display: block !important;
  }
}


/* =====================================================
   links nos cards do blog
   ===================================================== */
.bioculty-blog-card {
  position: relative;
}

.bioculty-card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* =====================================================
   css da grid no home do blog
   ===================================================== */


/* GRID 2x2 */
.bioculty-blog-grid {
  max-width: 1100px;
  margin: 0 auto;
}

.bioculty-blog-grid .wp-block-columns {
  gap: 18px;
}

@media (max-width: 781px) {
  .bioculty-blog-grid .wp-block-columns {
    gap: 14px;
  }
}

/* CARD */
.bioculty-blog-card {
  border-radius: 8px;
  overflow: hidden;
}

.bioculty-blog-card .wp-block-cover__inner-container {
  padding: 24px !important;
}



/* efeito hover */
.bioculty-blog-card:hover {
  transform: translateY(-2px);
  transition: transform .18s ease;
}

/* Garantir altura boa */
.bioculty-blog-card.wp-block-cover {
  min-height: 320px;
}

@media (max-width: 781px) {
  .bioculty-blog-card.wp-block-cover {
    min-height: 220px;
  }
}


/* =====================================================
   CSS do carrosel da categoria reciclagem manual
   ===================================================== */



.carousel-container { display: flex; align-items: center; position: relative; max-width: 900px; margin: auto; }
.carousel-wrapper { overflow: hidden; width: 100%; }
.carousel-track { display: flex; transition: transform 0.5s ease-in-out; }

.card {
  min-width: calc(100% / 3); /* 3 cards por página */
  box-sizing: border-box;
  padding: 20px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
}
.dots-container { text-align: center; margin-top: 10px; }
.dot { height: 12px; width: 12px; background-color: #bbb; border-radius: 50%; display: inline-block; cursor: pointer; margin: 0 5px; }
.dot.active { background-color: #717171; }
button { cursor: pointer; }


/* =====================================================
   nuvem de tags do gutemberg (usada no blog)
   ===================================================== */
   

.bioculty-mv__arrow:hover{
  background: var(--bioculty-verde-claro);
  color: #fff;
}


/* Estilo base para os elementos (tags) */
.nuvem-responsiva a {
    display: inline-block;
    border: 1px solid #71AF2E; /* Verde claro */
    border-radius: 8px;
    text-decoration: none;
    padding: 5px 10px;
}

.nuvem-responsiva a:hover {
  background: var(--bioculty-verde-claro);
  color: #fff;
}

/* Configuração para PC (Desktop) */
@media (min-width: 769px) {
    .nuvem-responsiva {
        width: 75%;
        margin: 0 auto; /* Centraliza o bloco se necessário */
        display: flex;
        flex-wrap: wrap;
        gap: 16px; /* Espaçamento entre elementos */
    }
}

/* Configuração para Mobile */
@media (max-width: 768px) {
    .nuvem-responsiva {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 8px; /* Espaçamento reduzido no mobile */
    }
}


/* =====================================================
   
   ===================================================== */
   
   /* Botão "Continuar para finalização" - Carrinho */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: #8BC34A; /* verde claro Bioculty */
    color: #ffffff !important;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: none;
    transition: all 0.2s ease;
}

/* Hover */
.wc-block-components-button:hover {
    background-color: #7CB342; /* verde um pouco mais escuro no hover */
    color: #ffffff !important;
}

 .wc-block-components-button{
    background-color: var(--wp--preset--color--verde);
    color: #fff !important;
}




/* =====================================================
    icones na landing page da rede
   ===================================================== */


.bc-icon{
  font-size: 36px;
  line-height: 1;
  display: inline-block;
  margin-bottom: 12px;

  color: var(--wp--preset--color--verde);
}

.bc-rede-col{
  text-align: center;
}