/* CONTEÚDO COMPLETO E MODIFICADO para css/galeria_cubica.css */
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

*{ 
    box-sizing: border-box; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
    scroll-behavior: smooth;
}

#cubic-gallery-wrapper {
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap;
    justify-content: center; 
    align-items: center; 
    margin: 0;
    /* --theme-clr: #fff; */
    --theme-clr: #f4f4f4;
    /* --cor-fundo-leve: #f4f4f4; */
    font-family: "Mona Sans", sans-serif;
    background: var(--theme-clr);
}
/* ///////////////////// */

.inf-grid-hero-container {
    /* MODIFICADO: Agora ocupa 100% do seu wrapper, não da tela */
    height: 100%;
    width: 100%;
    perspective: 1000px;
    position: relative;
    /* MODIFICADO: Tamanho dos painéis laterais ajustado */
    --sz: 1000px; 
    --grid-sz: 0;
    --rev-dis: 0;
}
.inf-grid-hero-container > div {
    position: absolute;
    width: 100%; 
    height: 100%;
    transform-style: preserve-3d;
    display: grid; 
    /* place-items: center;
    z-index: 1; */
    grid-template-columns: repeat(var(--grid-sz), 1fr);
    grid-template-rows: repeat(var(--grid-sz), 1fr);
    gap: 6px;
}
.inf-grid-hero-container > div::after {
    content: ''; 
    display: block;
    height: 100%;
    background: var(--theme-clr);
    position: absolute; 
    /* left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; */
    inset: 0; /* Forma moderna de escrever top/bottom/left/right: 0 */
    pointer-events: none;
    z-index: 3;

    /* === MODIFICAÇÕES AQUI === */
    opacity: 0; /* Torna o overlay invisível por padrão */
    transition: opacity 0.4s ease-in-out; /* Adiciona uma transição suave de fade */
}
.inf-grid-hero-container > div {
    display: grid;
    grid-template-columns: repeat(var(--grid-sz), 1fr);
    grid-template-rows: repeat(var(--grid-sz), 1fr);
    gap: 6px;
}
.inf-grid-hero-container > div > div {
    width: 100%; height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background: repeating-linear-gradient(45deg, #94a4c211 0%, #94a4c211 5%, transparent 5%, transparent 10%);
    opacity: 0;
}
/* REMOVIDO: Hover não é mais necessário para a funcionalidade principal */
/* .inf-grid-hero-container > div > div:hover { ... } */

.inf-grid-hero-container > div > div.loaded {
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    transform-style: preserve-3d;
    opacity: 1;
    z-index: 2;
    transform: translate3d( 0, 0, -1px) !important;
}

/* MODIFICADO: A distância de transformação agora é em pixels fixos, não em vh/vw */
.inf-grid-hero-container > div.top {
    top: 0; transform-origin: top center;
    transform: rotateX(-90deg); height: var(--sz);
    perspective: 1000px;
}
.inf-grid-hero-container > div.top::after { background: linear-gradient( 180deg, transparent, var(--theme-clr) calc(1% * (100 - var(--rev-dis)))); }
.inf-grid-hero-container .shift-away { translate: 0% 100%;}
.inf-grid-hero-container > div.top > div { transform: translate3d( 0, 0, -35vh); } /* Ajustado de -100vh */

/* .inf-grid-hero-container > div.left {
    left: 0; transform-origin: center left;
    transform: rotateY(90deg); width: var(--sz);
} */
 .inf-grid-hero-container > div.left {
    left: 0;
    top: 0; /* MODIFICADO: Força o alinhamento no topo */
    transform-origin: left center; /* MODIFICADO: Eixo de rotação corrigido */
    transform: rotateY(90deg);
    width: var(--sz);
}
.inf-grid-hero-container > div.left::after { 
    background: linear-gradient( 90deg, transparent, var(--theme-clr) calc(1% * (100 - var(--rev-dis))));  
}
/* .inf-grid-hero-container .shift-away { translate: 100% 0%;} */
.inf-grid-hero-container > div.left > div { transform: translate3d( 0, 0, -550px); } /* Ajustado de -50vw */

.inf-grid-hero-container > div.bottom {
    bottom: 0; transform-origin: bottom center;
    transform: rotateX(90deg); height: var(--sz);
}
.inf-grid-hero-container > div.bottom::after { 
    background: linear-gradient( 0deg, transparent, var(--theme-clr) calc(1% * (100 - var(--rev-dis)))); 
}
.inf-grid-hero-container .shift-away { translate: 0% -100%;}
.inf-grid-hero-container > div.bottom > div { transform: translate3d( 0, 0, -35vh); } /* Ajustado de -50vh */

/* .inf-grid-hero-container > div.right {
    right: 0; transform-origin: center right;
    transform: rotateY(-90deg); width: var(--sz);
} */
.inf-grid-hero-container > div.right {
    right: 0;
    top: 0; /* MODIFICADO: Força o alinhamento no topo */
    transform-origin: right center; /* MODIFICADO: Eixo de rotação corrigido */
    transform: rotateY(-90deg);
    width: var(--sz);
}
.inf-grid-hero-container > div.right::after { background: linear-gradient( 270deg, transparent, var(--theme-clr) calc(1% * (100 - var(--rev-dis)))); }
/* .inf-grid-hero-container .shift-away { translate: -100% 0%;} */
.inf-grid-hero-container > div.right > div { transform: translate3d( 0, 0, -550px); } /* Ajustado de -50vw */


.content {
    position: absolute;
    /* width: auto; Ajustado;
    max-width: 90%; 
    height: auto;*/
    width: 50%;
    height: 50%;
    padding: 20px 30px;
    left: 0; right: 0; top: 0; bottom: 0;
    border-radius: 8px;
    backdrop-filter: blur(4px) saturate(120%);
    background-color: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    margin: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 5;
    /* transition: opacity 0.5s ease-in-out; */
    transition: opacity 0.8s ease-in-out; /* Aumentei um pouco a transição */
    opacity: 0; /* <<< ADICIONE ESTA LINHA */
}
.content h2 { font-size: 1.5em; font-weight: 600; color:#000; user-select: none; margin:0; margin-bottom: 15px;}
.content p { margin-top: 5px; color: #333; font-weight: 500; text-align: center; }
/* .content span { color: var(--cor-primaria, orangered); } */
/* .content div.button { */
.content .button {
    background: #1e1e1e; 
    padding: 6px 42px 8px 42px;
    border-radius: 12px; 
    color: #fff;
    text-decoration: none; 
    cursor: pointer;
    transition: box-shadow 0.2s ease-in-out;

    /* NOVAS */
    border: none; /* Adicionado para remover a borda padrão do botão */
    font-family: inherit; /* Adicionado para herdar a fonte correta */
    font-size: 1rem; /* Adicionado para garantir um tamanho de fonte consistente */
}
/* .content div.button:hover {  */
.content .button:hover { 
    box-shadow: inset 0 0 8px 1px #fff, 
    inset 0 0 0 1px #fff; 
}

/* REMOVIDO: Toda a lógica de seleção de painel e botão de voltar foi removida pois não se aplica mais. */
/* Adicionar no final de css/style.css */

/* --- ESTILOS PARA A GALERIA CÚBICA INTEGRADA --- */

#cubic-gallery-wrapper {
    position: relative; /* Essencial para conter os elementos internos */
    width: 100%;
    height: 70vh; /* Altura da galeria. Ajuste conforme necessário (ex: 600px) */
    max-height: 650px; /* Limita a altura em telas muito grandes */
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden; /* Garante que nada vaze para fora do contêiner */
}

.section-subtitle {
    text-align: center;
    max-width: 600px;
    /* margin: -20px auto 30px; */
    margin: 2px auto 3px;
    font-size: 1.1rem;
    color: var(--cor-secundaria);
}

#cubic-gallery-wrapper.foco-ativo .inf-grid-hero-container > div::after {
    opacity: 1; /* Torna o overlay visível quando o modo foco está ativo */
}

/* Adicionar no final de css/galeria_cubica.css */

/* Esconde a caixa de texto (.content) quando o carrossel está ativo */
#cubic-gallery-wrapper.carousel-ativo .content {
    opacity: 0 !important;
    pointer-events: none !important; /* Impede qualquer clique no texto ou botão escondido */
}