/* Elementor Accordion Widget*/
#meu-acc [data-section="1"]{
	color: white;
    background-color: cadetblue;
}

#meu-acc [data-section="2"]{
	color: white;
    background-color: seagreen;
    
}

#meu-acc [data-section="3"]{
	color: white;
    background: url("https://projeto-formulador.xyz/wp-content/uploads/2018/02/Ravina.jpg") no-repeat fixed center;
    background-size: cover;
}
#meu-acc [data-section="4"]{
	color: white;
    background-color: cadetblue;
}
#meu-acc [data-section="5"]{
	color: white;
    background-color: cadetblue;
}
#meu-acc [data-section="6"]{
	color: white;
    background-color: cadetblue;
}
#meu-acc [data-section="7"]{
	color: white;
    background-color: cadetblue;
}
#meu-acc [data-section="8"]{
	color: white;
    background-color: cadetblue;
}
@media (min-width: 768px) {
	#meu-acc [data-section="3"] {
    	webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
	}
}
/* Mantém os 10 quadradinhos lado a lado em cada slide */
.pf-carousel-rodape .lsow-carousel .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr) !important;
  gap: 8px; /* ajuste conforme seu espaçamento */
}

.pf-carousel-rodape img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1;
  object-fit: cover;
}
/* controla o espaçamento (gap) e força 10 por linha dentro de cada slide do Livemesh */
.pf-carousel-rodape .lsow-carousel .elementor-container,
.pf-carousel-rodape .lsow-carousel .elementor-row,
.pf-carousel-rodape .lsow-carousel .elementor-section {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 6px; /* <<< ajuste aqui o espaçamento entre quadradinhos */
  margin: 0 !important;
  padding: 0 !important;
}

.pf-carousel-rodape .elementor-column,
.pf-carousel-rodape .elementor-widget,
.pf-carousel-rodape .elementor-widget-image {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.pf-carousel-rodape img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
/* --- layout desktop --- */
@media (min-width: 1025px) {
  /* larguras proporcionais das 3 colunas */
  .pf-carousel-rodape .col-le   { flex: 0 0 12% !important; max-width: 12% !important; }
  .pf-carousel-rodape .col-centro{ flex: 0 0 76% !important; max-width: 76% !important; }
  .pf-carousel-rodape .col-ld   { flex: 0 0 12% !important; max-width: 12% !important; }

  /* reduz e padroniza as imagens LE/LD */
  .pf-carousel-rodape .col-le img,
  .pf-carousel-rodape .col-ld img{
    width: 100% !important;
    height: auto !important;
    max-height: 84px;              /* ajuste fino aqui */
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }

  /* dá "respiro" horizontal dentro da coluna central p/ as setas caberem */
  .pf-carousel-rodape .col-centro > .elementor-widget-wrap {
    padding: 0 10px !important;    /* ajuste 10–14px se quiser mais espaço */
  }
}

/* evita que o contêiner corte as setas */
.pf-carousel-rodape .lsow-carousel .slick-list { overflow: visible !important; }

/* garante que as setas fiquem por cima das imagens laterais */
.pf-carousel-rodape { position: relative; }
.pf-carousel-rodape .lsow-carousel .slick-prev,
.pf-carousel-rodape .lsow-carousel .slick-next{
  z-index: 5 !important;
}

/* grade dos 10 quadradinhos + espaçamento menor */
.pf-carousel-rodape .lsow-carousel .elementor-container,
.pf-carousel-rodape .lsow-carousel .elementor-row,
.pf-carousel-rodape .lsow-carousel .elementor-section{
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 6px;                         /* diminua/aumente conforme desejar */
  margin: 0 !important;
  padding: 0 !important;
}
.pf-carousel-rodape img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}

/* opcional: no tablet/mobile esconda LE/LD para ganhar área útil */
@media (max-width: 1024px) {
  .pf-carousel-rodape .col-le,
  .pf-carousel-rodape .col-ld { display: none !important; }
  .pf-carousel-rodape .col-centro { flex: 0 0 100% !important; max-width: 100% !important; }
}
/* Imagens laterais menores */
.pf-carousel-rodape .col-le img,
.pf-carousel-rodape .col-ld img {
  width: 100% !important;
  height: auto !important;
  max-height: 64px;  /* experimente 64px, se ainda tapar a seta, baixe para 56px */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
/* Esconde o carrossel até o Slick/Livemesh inicializar */
.pf-carousel-rodape .lsow-carousel:not(.slick-initialized) {
  visibility: hidden;
  opacity: 0;
}
.pf-carousel-rodape .lsow-carousel.slick-initialized {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease;
}
/* 1) Antes do JS iniciar, mostre só o 1º slide (Livemesh/Slick) */
.pf-carousel-rodape .lae-carousel:not(.slick-initialized) .lae-carousel-item { 
  display: none !important; 
}
.pf-carousel-rodape .lae-carousel:not(.slick-initialized) .lae-carousel-item:first-child { 
  display: block !important; 
}

/* (opcional, suaviza o aparecimento ao inicializar) */
.pf-carousel-rodape .lae-carousel:not(.slick-initialized) {
  visibility: hidden;
  opacity: 0;
}
.pf-carousel-rodape .lae-carousel.slick-initialized {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease;
}

/* 2) Evita cortar setas e garante clique por cima de laterais */
.pf-carousel-rodape .lae-carousel .slick-list { overflow: visible !important; }
.pf-carousel-rodape .lae-carousel .slick-prev,
.pf-carousel-rodape .lae-carousel .slick-next { z-index: 9 !important; }

/* 3) Altura mínima do trilho durante o boot (ajuste 200–240px conforme a sua linha de 10) */
.pf-carousel-rodape .lae-carousel .slick-list,
.pf-carousel-rodape .lae-carousel .slick-track { 
  min-height: 220px;
}

/* 4) Grade dos 10 quadradinhos dentro de cada slide (use seu gap preferido) */
.pf-carousel-rodape .lae-carousel .lae-carousel-item .elementor-container,
.pf-carousel-rodape .lae-carousel .lae-carousel-item .elementor-row,
.pf-carousel-rodape .lae-carousel .lae-carousel-item .elementor-section {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 6px;  /* ajuste 4–8px */
  margin: 0 !important;
  padding: 0 !important;
}
.pf-carousel-rodape .lae-carousel .lae-carousel-item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}

/* 5) Largura das 3 colunas em desktop (deixa mais espaço para o centro/setas) */
@media (min-width: 1025px) {
  .pf-carousel-rodape .col-le    { flex: 0 0 11% !important; max-width: 11% !important; }
  .pf-carousel-rodape .col-centro{ flex: 0 0 78% !important; max-width: 78% !important; }
  .pf-carousel-rodape .col-ld    { flex: 0 0 11% !important; max-width: 11% !important; }

  /* dá um respiro interno na coluna central para as setas */
  .pf-carousel-rodape .col-centro > .elementor-widget-wrap { padding: 0 14px !important; }
}

/* 6) Imagens laterais LE/LD menores + não bloqueiam clique nas setas */
.pf-carousel-rodape .col-le .elementor-widget-image img,
.pf-carousel-rodape .col-ld .elementor-widget-image img,
.pf-carousel-rodape .col-le img,
.pf-carousel-rodape .col-ld img {
  width: 100% !important;
  height: auto !important;
  max-height: 64px !important;   /* ajuste 56–72px conforme gosto */
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  pointer-events: none;           /* permite clicar "através" da imagem na seta */
}

/* 7) Tablet/Mobile: esconda laterais para ganhar área útil */
@media (max-width: 1024px) {
  .pf-carousel-rodape .col-le,
  .pf-carousel-rodape .col-ld { display: none !important; }
  .pf-carousel-rodape .col-centro { flex: 0 0 100% !important; max-width: 100% !important; }
}
/* Esconde QUALQUER slider slick até inicializar */
.pf-carousel-rodape .slick-slider:not(.slick-initialized) .slick-slide{display:none!important}
.pf-carousel-rodape .slick-slider:not(.slick-initialized) .slick-slide:first-child{display:block!important}
.pf-carousel-rodape .slick-slider .slick-list{overflow:visible!important}

/* Caso o wrapper seja lae-carousel (Livemesh) */
.pf-carousel-rodape .lae-carousel{visibility:hidden;opacity:0}
.pf-carousel-rodape .lae-carousel.slick-initialized{visibility:visible;opacity:1;transition:opacity .2s ease}

/* Altura de segurança durante o boot (ajuste 200–260px) */
.pf-carousel-rodape .slick-list,
.pf-carousel-rodape .slick-track{min-height:230px}

/* Setas sempre na frente */
.pf-carousel-rodape .slick-prev,
.pf-carousel-rodape .slick-next{z-index:9!important}
/* Coluna esquerda do bloco Diagnóstico */
.diag-orelha {
  background-color: #f5f5f5;   /* só exemplo, cor de fundo */
  text-align: center;          /* centraliza horizontal */
  display: flex;
  align-items: center;         /* centraliza vertical */
  justify-content: center;
  padding: 10px;
}

/* Texto vertical */
.diag-orelha{
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;        /* evita quebra no meio */
  display: inline-block;      /* ajuda a renderizar certinho */
  line-height: 1.2;           /* ajuste fino */
  padding: 8px 6px;
}
.wp-block-column.diag-orelha p,
.wp-block-column.diag-orelha h1,
.wp-block-column.diag-orelha h2,
.wp-block-column.diag-orelha h3 {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.2;
  padding: 8px 6px;
}
/* TESTE VISUAL: tem que pintar de amarelo e borda vermelha */
.diag-orelha{
  background: rgba(255,255,0,.35) !important;
  outline: 2px dashed red !important;
}
/* Visual de teste: ajuda a ver se pegou */
.diag-orelha{ background: rgba(255,255,0,.12); }

/* Vertical "boa": pega no bloco marcado e nos textos dentro dele */
.diag-orelha,
.diag-orelha :is(p,h1,h2,h3,h4,h5,h6,li,span,a,strong,em){
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  padding: 8px 6px 8px 0;
}

/* Fallback se o navegador ignorar writing-mode */
@supports not (writing-mode: vertical-rl){
  .diag-orelha,
  .diag-orelha :is(p,h1,h2,h3,h4,h5,h6,li,span,a){
    transform: rotate(-90deg) !important;
    transform-origin: top left !important;
    display: inline-block !important;
  }
}
/* DEBUG: ver onde a classe está pegando */
.diag-orelha{ outline: 2px dashed #e67e22; background: rgba(230,126,34,.08); }

/* A) classe no PARÁGRAFO (recomendado) */
.diag-orelha{
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  padding: 8px 6px 8px 0;
}

/* B) se a classe estiver na COLUNA, ainda assim pega os textos dentro */
.wp-block-column.diag-orelha :is(p,h1,h2,h3,h4,h5,h6,li,span,a,strong,em){
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  padding: 8px 6px 8px 0;
}

/* Evita que o contêiner corte o texto vertical em layouts flex */
.wp-block-column.diag-orelha{ overflow: visible !important; }

/* Fallback caso o navegador ignore writing-mode */
@supports not (writing-mode: vertical-rl){
  .diag-orelha,
  .wp-block-column.diag-orelha :is(p,h1,h2,h3,h4,h5,h6,li,span,a,strong,em){
    transform: rotate(-90deg) !important;
    transform-origin: top left !important;
    display: inline-block !important;
  }
}
.diag-orelha{ min-height: 100%; }
.diag-orelha { 
  writing-mode: vertical-rl; 
  text-orientation: upright; 
  display: inline-block; 
  white-space: nowrap;
}
.diag-orelha {
  transform: rotate(-90deg);
  transform-origin: top left;
  display: inline-block;
  white-space: nowrap;
}
.diag-orelha {
  transform: rotate(-90deg) !important;
  transform-origin: top left !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

.wp-block-column.diag-orelha {
  overflow: visible !important;
}
.diag-orelha {
  transform: rotate(-180deg);        /* anti-horário: topo das letras ? esquerda */
  transform-origin: top left;       /* gira em torno do canto superior esquerdo */
  display: inline-block;            /* permite girar como “tijolo” */
  white-space: nowrap;              /* evita quebrar no meio */
}

.fragmento-vertical {
  /* Rotaciona 90° no sentido anti-horário */
  transform: rotate(-90deg);
  /* Define o ponto de origem da rotação (canto inferior esquerdo) */
  transform-origin: left bottom;
  /* Estilo */
  font-family: "Georgia", serif;
  font-size: 18px;
  line-height: 1.4;
  padding: 15px 10px;
  background: #f9f9f9;
  border-right: 3px solid #333; /* Borda à direita (agora virou a "base" da orelha) */
  /* Largura da "orelha" */
  width: 250px; /* Ajuste conforme o comprimento do texto */
  /* Posicionamento */
  position: relative;
  left: -50px;  /* Move para a esquerda */
  top: 250px;   /* Move para baixo (ajuste conforme necessário) */
  white-space: nowrap; /* Evita quebras de linha */
  text-align: left;     /* Alinha o texto à esquerda */
}

/* Em celulares, deixa horizontal */
@media (max-width: 768px) {
  .fragmento-vertical {
    transform: rotate(0deg);
    left: 0;
    top: 0;
    width: auto;
    border-right: none;
    border-left: 3px solid #333;
  }
}