.elementor-5283 .elementor-element.elementor-element-0156362{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-5283 .elementor-element.elementor-element-0156362{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-37984a7 *//* ===========================
   WRAP + BOTÃO LUA CHEIA
=========================== */
#solace-wrap {
  position: relative;
  width: 100%;
  height: 950px;
}

.toggle-lua {
  position: absolute;
  z-index: 99999;
  top: 20px;
  left: 20px;
  padding: 10px 16px;
  background: #1a1a2a;
  color: #fff;
  border: 1px solid #6bbcff55;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 1px;
}

/* ===========================
   CENA PRINCIPAL
=========================== */
#solace-cinematico {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  background: #020314;
  transition: filter .6s, background .6s;
}

#solace-cinematico.lua-cheia {
  background: radial-gradient(circle at center, #2d3b66, #0a0f1f 80%);
  filter: brightness(1.4) contrast(1.15);
}

/* ===========================
   ABERTURA HBO
=========================== */
.hbo-opening {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: fadeIn 1.2s ease-out;
}

.hbo-opening.hide {
  animation: fadeOut 1.8s forwards;
}

.hbo-text {
  font-size: 64px;
  color: #9fc7ff;
  letter-spacing: 8px;
  opacity: 0;
  animation: textUp 2.5s ease forwards;
}

.hbo-glow {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, #8ab7ff55, transparent 70%);
  opacity: 0;
  animation: glowRise 2s ease forwards;
}

@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }
@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes textUp  { 0%{opacity:0;transform:scale(.7)}
                     80%{opacity:.9;transform:scale(1.04)}
                     100%{opacity:1;transform:scale(1)} }
@keyframes glowRise { from{opacity:0} to{opacity:1} }

/* ===========================
   MAPA
=========================== */
.map-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mapa-solace {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease-out;
}

/* ===========================
   NÉVOA
=========================== */
.fog {
  position: absolute;
  width: 220%;
  height: 220%;
  top: -40%;
  left: -40%;
  background: url('https://i.imgur.com/8z2ZyDj.png');
  opacity: 0.22;
  pointer-events: none;
  filter: blur(10px);
}

.layer2 { opacity: 0.17; }
.layer3 { opacity: 0.13; }

/* ===========================
   PONTOS
=========================== */
.ponto-solace {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff8;
  box-shadow:
    0 0 10px #fff,
    0 0 20px currentColor,
    0 0 40px currentColor;
  transition: transform .25s, box-shadow .25s;
  cursor: pointer;
}

#solace-cinematico.lua-cheia .ponto-solace {
  filter: brightness(1.4) saturate(1.3);
}

.ponto-solace:hover {
  transform: scale(1.5);
}

/* ===========================
   PAINEL
=========================== */
.painel-solace {
  position: absolute;
  right: 25px;
  top: 25px;
  width: 330px;
  padding: 22px;
  background: rgba(10, 10, 20, 0.85);
  border: 1px solid #6bbcff55;
  border-radius: 14px;
  backdrop-filter: blur(14px);
  color: #eef;
  transform: translateY(-40px);
  opacity: 0;
  transition: all .4s ease;
}

.painel-solace.ativo {
  opacity: 1;
  transform: translateY(0);
}

.tag-solace {
  display: inline-block;
  background: #ffffff22;
  padding: 3px 8px;
  font-size: 12px;
  margin: 4px 3px;
  border-radius: 6px;
}

/* Modo Lua Cheia — Painel mais brilhante */
#solace-cinematico.lua-cheia .painel-solace {
  border-color: #8fc7ff;
  background: rgba(20,25,45,0.9);
}
/* ===========================
   WRAP + BOTÃO
=========================== */
#solace-wrap {
  position: relative;
  width: 100%;
  height: 950px;
}

.toggle-lua {
  position: absolute;
  z-index: 999999;
  top: 20px;
  left: 20px;
  padding: 10px 16px;
  background: #1a1a2a;
  color: #fff;
  border: 1px solid #6bbcff55;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 1px;
}

/* ===========================
   LUA REAL
=========================== */
#lua-solace {
  position: absolute;
  z-index: 100;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #d4e6ff, #9fb4ff44);
  box-shadow: 0 0 30px #9fc8ff, 0 0 100px #6aa3ff;
  pointer-events: none;
}

/* Intensifica no modo lua cheia */
#solace-cinematico.lua-cheia #lua-solace {
  box-shadow: 0 0 50px #c2ddff, 0 0 130px #97b9ff, 0 0 200px #7bb5ff;
}

/* ===========================
   FOGO DA PRAÇA DAS BRUMAS
=========================== */
.fogobruma {
  position: absolute;
  left: 40%;
  top: 45%;
  width: 30px;
  height: 60px;
  background: radial-gradient(circle, #ffb05d, #ff7a00cc, transparent);
  opacity: .4;
  animation: fogoBruma 1.2s infinite alternate ease-in-out;
  border-radius: 50%;
  pointer-events: none;
  z-index: 120;
}

@keyframes fogoBruma {
  from { transform: scale(0.8) translateY(5px); opacity: .4; }
  to { transform: scale(1.3) translateY(-5px); opacity: .9; }
}

/* ===========================
   ONDAS NA PRAIA
=========================== */
#ondas-pedra-azul {
  position: absolute;
  left: 50%;
  top: 85%;
  width: 300px;
  height: 80px;
  transform: translateX(-50%);
  background: url('https://i.imgur.com/XJl8ZIR.png') repeat-x;
  opacity: 0;
  animation: ondaMove 4s infinite linear;
  pointer-events: none;
  z-index: 80;
}

#ondas-pedra-azul.ativo {
  opacity: .8;
}

@keyframes ondaMove {
  from { background-position-x: 0; }
  to   { background-position-x: 400px; }
}

/* ===========================
   REFLEXO DO FAROL
=========================== */
#reflexo-farol {
  position: absolute;
  left: 80%;
  top: 20%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle,
            rgba(145,200,255,0.4),
            rgba(0,0,0,0));
  border-radius: 50%;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 130;
}

#reflexo-farol.ativo {
  opacity: .9;
}

/* ===========================
   MAPA E NÉVOA (mantidos)
=========================== */

#solace-cinematico {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  background: #020314;
  transition: filter .6s, background .6s;
}

#solace-cinematico.lua-cheia {
  background: radial-gradient(circle at center, #2d3b66, #0a0f1f 80%);
  filter: brightness(1.4) contrast(1.15);
}

.map-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mapa-solace {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease-out;
}

/* Névoa */
.fog {
  position: absolute;
  width: 220%;
  height: 220%;
  top: -40%;
  left: -40%;
  background: url('https://i.imgur.com/8z2ZyDj.png');
  opacity: 0.22;
  pointer-events: none;
  filter: blur(10px);
}

.layer2 { opacity: .17; }
.layer3 { opacity: .13; }

/* Pontos */
.ponto-solace {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff8;
  box-shadow:
    0 0 10px #fff,
    0 0 20px currentColor,
    0 0 40px currentColor;
  transition: transform .25s, box-shadow .25s;
  cursor: pointer;
  z-index:140;
}

.ponto-solace:hover {
  transform: scale(1.5);
}

/* Painel */
.painel-solace {
  position: absolute;
  right: 25px;
  top: 25px;
  width: 330px;
  padding: 22px;
  background: rgba(10, 10, 20, 0.85);
  border: 1px solid #6bbcff55;
  border-radius: 14px;
  backdrop-filter: blur(14px);
  color: #eef;
  transform: translateY(-40px);
  opacity: 0;
  transition: all .4s ease;
  z-index: 9999;
}

.painel-solace.ativo {
  opacity: 1;
  transform: translateY(0);
}

.tag-solace {
  display: inline-block;
  background: #ffffff22;
  padding: 3px 8px;
  font-size: 12px;
  margin: 4px 3px;
  border-radius: 6px;
}

/* Painel no modo lua cheia */
#solace-cinematico.lua-cheia .painel-solace {
  border-color: #8fc7ff;
  background: rgba(20,25,45,0.9);
}

/* ===========================
   Abertura HBO (mantido)
=========================== */

.hbo-opening {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999999;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  animation: fadeIn 1.2s ease-out;
}

.hbo-opening.hide {
  animation: fadeOut 1.8s forwards;
}

.hbo-text {
  font-size: 64px;
  color: #9fc7ff;
  letter-spacing: 8px;
  opacity: 0;
  animation: textUp 2.5s ease forwards;
}

.hbo-glow {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, #8ab7ff55, transparent 70%);
  opacity: 0;
  animation: glowRise 2s ease forwards;
}

@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }
@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes textUp  {
  0%{opacity:0;transform:scale(.7)}
  80%{opacity:.9;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}

@keyframes glowRise { from{opacity:0} to{opacity:1} }/* End custom CSS */