.elementor .e-3a671734-433d665{width:2920px;background-color:#000000;flex-direction:column;align-items:center;/* 
====================================================
PROJETO: OKEI DIGITAL
SEÇÃO: GALERIA HOVER EXPANSIVO + LIGHTBOX
TIPO: CSS COMPLETO
USO: ELEMENTOR / CSS PERSONALIZADO

COMPORTAMENTO:
- Card fechado: imagem preenche o quadro
- Hover: card cresce para os lados
- Hover: linha cresce na altura
- Hover: empurra cards vizinhos e linhas abaixo
- Clique: lightbox mostra a imagem inteira
====================================================
*/


/* 
====================================================
SEÇÃO BASE
====================================================
*/

.okei-hover-gallery-section {
width: 100%;
background: #000;
padding: 80px 34px;
overflow: visible;
border: none !important;
outline: none !important;
box-shadow: none !important;
}


/* 
====================================================
AJUSTE GLOBAL DA GALERIA
====================================================
*/

.okei-hover-gallery-section,
.okei-hover-gallery-section * {
box-sizing: border-box;
}


/* 
====================================================
GALERIA
====================================================
*/

.okei-hover-gallery {
width: 100%;
max-width: 1480px;
margin: 0 auto;

display: flex;
flex-direction: column;
gap: 26px;

border: none !important;
outline: none !important;
box-shadow: none !important;
overflow: visible;
}


/* 
====================================================
LINHAS DA GALERIA
====================================================
*/

.okei-gallery-row {
width: 100%;
display: flex;
gap: 26px;
align-items: stretch;

border: none !important;
outline: none !important;
box-shadow: none !important;
overflow: visible;

transition:
  height 0.82s cubic-bezier(.16, 1, .3, 1),
  gap 0.45s ease;
}


/* 
====================================================
ALTURAS NORMAIS DAS LINHAS
====================================================
*/

.okei-gallery-row.row-height-small {
height: 220px;
}

.okei-gallery-row.row-height-medium {
height: 300px;
}

.okei-gallery-row.row-height-large {
height: 430px;
}


/* 
====================================================
ALTURAS EXPANDIDAS NO HOVER
A LINHA CRESCE E EMPURRA AS DEMAIS PARA BAIXO
====================================================
*/

.okei-gallery-row.row-height-small:hover {
height: 460px;
}

.okei-gallery-row.row-height-medium:hover {
height: 670px;
}

.okei-gallery-row.row-height-large:hover {
height: 720px;
}


/* 
====================================================
CARD BASE
====================================================
*/

.okei-hover-card {
position: relative;
height: 100%;
flex: var(--card-grow, 1) 1 0;
min-width: 0;

overflow: hidden;
border-radius: 34px;
cursor: pointer;
isolation: isolate;

background: #111;
border: none !important;
outline: none !important;
box-shadow: none;

transition:
  flex 0.82s cubic-bezier(.16, 1, .3, 1),
  transform 0.55s cubic-bezier(.16, 1, .3, 1),
  border-radius 0.55s cubic-bezier(.16, 1, .3, 1),
  box-shadow 0.55s cubic-bezier(.16, 1, .3, 1),
  filter 0.55s cubic-bezier(.16, 1, .3, 1);
}


/* 
====================================================
IMAGEM DO CARD

GALERIA:
- preenche largura e altura
- sem faixa preta
- pode cortar um pouco, como thumbnail/capa

LIGHTBOX:
- mostra a peça inteira
====================================================
*/

.okei-hover-card img {
width: 100%;
height: 100%;
display: block;

object-fit: cover;
object-position: center;

background: transparent;
transform: scale(1.04);

transition:
  transform 0.82s cubic-bezier(.16, 1, .3, 1),
  filter 0.55s ease,
  object-position 0.55s ease;
}


/* 
====================================================
OVERLAY PRETO 15%
====================================================
*/

.okei-hover-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;

background: rgba(0, 0, 0, 0.15);
opacity: 0;

transition: opacity 0.4s ease;
}


/* 
====================================================
LUZ SUTIL
====================================================
*/

.okei-hover-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;

background:
  radial-gradient(
    circle at 28% 18%,
    rgba(255,255,255,0.15),
    transparent 36%
  );

opacity: 0;
pointer-events: none;

transition: opacity 0.45s ease;
}


/* 
====================================================
HOVER DA LINHA
OS VIZINHOS DIMINUEM
====================================================
*/

.okei-gallery-row:hover .okei-hover-card {
flex-grow: 0.58;
filter: brightness(0.72) saturate(0.92);
}


/* 
====================================================
HOVER DO CARD ATIVO
O CARD CRESCE NA LARGURA
A LINHA CRESCE NA ALTURA
====================================================
*/

.okei-gallery-row .okei-hover-card:hover {
flex-grow: var(--card-grow-hover, 6);
transform: translateY(-6px);
z-index: 10;

border-radius: 38px;
box-shadow: 0 34px 95px rgba(0,0,0,0.62);
filter: brightness(1) saturate(1.08);
}

.okei-gallery-row .okei-hover-card:hover img {
object-fit: cover;
object-position: center;
transform: scale(1);
}

.okei-gallery-row .okei-hover-card:hover::before {
opacity: 1;
}

.okei-gallery-row .okei-hover-card:hover::after {
opacity: 1;
}


/* 
====================================================
INFORMAÇÕES NO HOVER
====================================================
*/

.okei-hover-info {
position: absolute;
left: 26px;
right: 26px;
bottom: 26px;
z-index: 5;

color: #fff;

opacity: 0;
transform: translateY(18px);

transition:
  opacity 0.36s ease,
  transform 0.48s cubic-bezier(.16, 1, .3, 1);
}

.okei-hover-card:hover .okei-hover-info {
opacity: 1;
transform: translateY(0);
}

.okei-hover-info span {
display: inline-block;
margin-bottom: 8px;

color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.82;
}

.okei-hover-info h3 {
margin: 0;

color: #fff;
font-family: sora;
font-size: clamp(28px, 3.8vw, 35px);
font-weight: 900;
line-height: 0.92;
letter-spacing: -0.06em;
}


/* 
====================================================
LIGHTBOX
====================================================
*/

.okei-lightbox {
position: fixed;
inset: 0;
z-index: 99999;

display: flex;
align-items: center;
justify-content: center;

padding: 34px;

background: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);

opacity: 0;
visibility: hidden;
pointer-events: none;

transition:
  opacity 0.35s ease,
  visibility 0.35s ease;
}

.okei-lightbox.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}


/* 
====================================================
CONTEÚDO DO LIGHTBOX
====================================================
*/

.okei-lightbox-content {
position: relative;
width: min(92vw, 1320px);
height: min(86vh, 860px);

display: grid;
grid-template-rows: 1fr auto;
gap: 22px;

transform: scale(0.96);
transition: transform 0.45s cubic-bezier(.16, 1, .3, 1);
}

.okei-lightbox.is-open .okei-lightbox-content {
transform: scale(1);
}


/* 
====================================================
IMAGEM DO LIGHTBOX
MOSTRA A PEÇA INTEIRA
====================================================
*/

.okei-lightbox-image {
width: 100%;
height: 100%;
max-height: calc(86vh - 120px);

display: block;

object-fit: contain;
object-position: center;

border-radius: 28px;
background: #090909;
box-shadow: 0 36px 120px rgba(0,0,0,0.72);
}


/* 
====================================================
TEXTO DO LIGHTBOX
====================================================
*/

.okei-lightbox-text {
color: #fff;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}

.okei-lightbox-category {
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;

opacity: 0.68;
}

.okei-lightbox-title {
margin: 0;
color: #fff;
font-size: clamp(14px, 3vw, 18px);
font-weight: 900;
line-height: 1;
letter-spacing: -0.05em;
}

.okei-lightbox-link {
margin-left: auto;

display: inline-flex;
align-items: center;
justify-content: center;

padding: 12px 18px;
border-radius: 999px;

background: rgba(255,255,255,0.14);
color: #fff;

text-decoration: none;
font-size: 14px;
font-weight: 800;

transition:
  background 0.3s ease,
  transform 0.3s ease;
}

.okei-lightbox-link:hover {
background: rgba(255,255,255,0.26);
transform: translateY(-2px);
}


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

.okei-lightbox-close {
position: fixed;
top: 26px;
right: 28px;
z-index: 100000;

width: 50px;
height: 50px;
border: none;
border-radius: 999px;

background: rgba(255,255,255,0.12);
color: #fff;

font-size: 14px;
line-height: 1;
cursor: pointer;

transition:
  background 0.3s ease,
  transform 0.3s ease;
}

.okei-lightbox-close:hover {
background: rgba(255,255,255,0.24);
transform: rotate(90deg);
}


/* 
====================================================
TABLET
====================================================
*/

@media (max-width: 1024px) {

.okei-hover-gallery-section {
  padding: 64px 22px;
}

.okei-hover-gallery {
  gap: 20px;
}

.okei-gallery-row {
  gap: 20px;
}

.okei-gallery-row.row-height-small {
  height: 200px;
}

.okei-gallery-row.row-height-medium {
  height: 260px;
}

.okei-gallery-row.row-height-large {
  height: 340px;
}

.okei-gallery-row.row-height-small:hover {
  height: 300px;
}

.okei-gallery-row.row-height-medium:hover {
  height: 380px;
}

.okei-gallery-row.row-height-large:hover {
  height: 480px;
}

}


/* 
====================================================
CELULAR
====================================================
*/

@media (max-width: 640px) {

.okei-hover-gallery-section {
  padding: 46px 16px;
}

.okei-hover-gallery {
  gap: 16px;
}

.okei-gallery-row {
  flex-direction: column;
  height: auto !important;
  gap: 16px;
}

.okei-hover-card {
  width: 100%;
  height: 280px;
  flex: none;
  border-radius: 24px;
}

.okei-gallery-row:hover .okei-hover-card,
.okei-gallery-row .okei-hover-card:hover {
  flex-grow: initial;
}

.okei-hover-card:hover {
  transform: translateY(-3px);
}

.okei-gallery-row .okei-hover-card:hover img {
  object-fit: cover;
  object-position: center;
}

.okei-hover-info {
  left: 20px;
  right: 20px;
  bottom: 20px;
}

.okei-hover-info h3 {
  font-size: 14px;
}

.okei-lightbox {
  padding: 18px;
}

.okei-lightbox-content {
  width: 100%;
  height: 82vh;
}

.okei-lightbox-image {
  max-height: calc(82vh - 140px);
  border-radius: 20px;
}

.okei-lightbox-text {
  display: block;
}

.okei-lightbox-title {
  margin-top: 8px;
  margin-bottom: 14px;
  font-size: 14px;
}

.okei-lightbox-link {
  margin-left: 0;
}

.okei-lightbox-close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
}

}\n}.elementor .e-ef43500{flex-direction:column;}