html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}


#stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1366px;
  height: 768px;
  background: #000;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
}

#app { position: relative; width: 100%; height: 100%; overflow: hidden; }

#rotateOverlay { position: fixed; inset: 0; background: #000; color: #fff; font-family: 'Courier New', monospace; display: none; align-items: center; justify-content: center; text-align: center; z-index: 99999; pointer-events: all; }
#rotateOverlay .msg { font-size: 18px; line-height: 1.6; }

@media (orientation: portrait) {
  #rotateOverlay { display: flex; }
  #stage { pointer-events: none; }
}

body { margin: 0; padding: 0; display: flex; height: 100%; background-color: #000; }
.container { display: flex; width: 100%; height: 100%; }

.right-panel {
  flex: 3;
  padding: 10px;
  background-image: url('buscamin2.png');
  background-size: 650px 740px;
  background-position: 90px center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

.game-container { margin-top: 305px; display: flex; justify-content: center; margin-left: 130px; }
canvas { border: 8px solid #cac7c1; margin-top: 20px; margin-left: 1px; }

.info-panel { width: 35%; height: 100%; display: flex; flex-direction: column; opacity: 0; transition: opacity 0.5s ease; }
.info-panel.show { opacity: 0.2; }

.info-block {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px;
  border-bottom: 1px solid #000000;
  background-color: #000000;
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
  scrollbar-color: #000 #000;
  scrollbar-width: thin;
}
.info-block:last-child { border-bottom: none; }
.info-block h3 { margin-top: 0; font-size: 16px; color: #fff; }

.data-item { display: flex; flex-direction: column; margin-bottom: 10px; }
.data-item .cell-text { font-weight: bold; font-size: 12px; min-width: 80px; }
.data-item .info-text { font-size: 12px; line-height: 1.4; flex: 1; white-space: normal; word-break: break-word; }

#litio-panel { border-left: 5px solid rgb(0, 0, 0); }
#cobre-panel { border-left: 5px solid rgb(0, 0, 0); }
#nitrato-panel { border-left: 5px solid rgb(0, 0, 0); }

#litio-panel h3 a, #cobre-panel h3 a, #nitrato-panel h3 a { text-decoration: none; color: inherit; cursor: pointer; }
#litio-panel h3 a:hover, #cobre-panel h3 a:hover, #nitrato-panel h3 a:hover { text-decoration: underline; color: #000; }

.obras-panel {
  position: absolute;
  left: 0; top: 0; width: 15%; height: 100%;
  color: white; padding: 20px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start;
  z-index: 100; background: #000000;
}

.obras-texto { font-family: 'Courier New', monospace; font-size: 10px; margin-top: 40px; margin-bottom: 10px; text-align: left; color: #b9b4b4; }
.obras-texto p { margin: 2px 0; line-height: 1.2; }

.obra { cursor: pointer; margin-bottom: 5px; font-family: 'Courier New', monospace; font-size: 11px; }
.obra:hover { color: #ccc; }

.container { margin-left: 15%; display: flex; width: 85%; height: 100%; }

#sidebar {
  position: absolute; top: 0; right: -100%; width: 85%; height: 100%;
  background: #000 !important; color: white; transition: right 0.5s ease;
  z-index: 150; display: flex; flex-direction: column;
}
#sidebar.open { right: 0; }

#closeSidebar { align-self: flex-end; background: none; border: none; color: white; font-size: 20px; padding: 10px; cursor: pointer; }
.sidebar-content { padding: 20px; overflow-y: auto; flex: 1; }

.lang-switch { position: absolute; top: 10px; right: 10px; z-index: 500; }
.lang-switch button { background: rgba(0,0,0,0.7); color: white; border: none; margin-left: 5px; padding: 5px 10px; font-family: 'Courier New', monospace; cursor: pointer; border-radius: 4px; }
.lang-switch button:hover { background: rgba(50,50,50,0.9); }

.logo-container { position: absolute; top: 10px; left: 10px; z-index: 300; }
.logo { width: 150px !important; height: auto !important; display: block; }

#bombap { position: absolute; bottom: 60px; left: 150px; width: 100px; height: 100px; z-index: 999; cursor: pointer; }
.obras-panel { background-color: #000 !important; }

.close-arrow { position: absolute; bottom: 20px; right: 20px; width: 40px; height: auto; cursor: pointer; z-index: 200; }

.hidden-panel { transform: translateX(100%); transition: transform 0.6s ease; }
.info-panel.show { transform: translateX(0); }

.bomb { position: absolute; z-index: 999; cursor: pointer; }
#bombap2.bomba-visual { bottom: 40px; left: 30px; width: 20px; height: 20px; }
#bombap3.bomba-visual { bottom: 70px; left: 70px; width: 30px; height: 30px; }
#bombap4.bomba-visual { bottom: 20px; left: 100px; width: 40px; height: 40px; }

.bomba-visual.atenuado { opacity: 0.8; pointer-events: none; }
.atenuado { opacity: 0.2 !important; transition: opacity 0.3s ease; }

.subrayado { color: rgb(81, 176, 236); text-decoration: underline; font-size: 12px; }

#bombilla-opacidad { position: absolute; bottom: 20px; right: 20px; width: 34px; height: 34px; cursor: pointer; z-index: 120; filter: brightness(1.2); display: none; }

#sidebar .sidebar-content {
  font-family: 'Courier New', monospace;
  font-size: 12px;          /* base del sidebar */
  line-height: 1.6;
  color: #eaeaea;
  text-align: justify;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 40px;
}

.tocopilla-content { position: relative; text-align: justify; max-width: 1000px; margin: 0 auto; padding-bottom: 250px; }
.fondo-inferior { position: absolute; bottom: -80px; right: -30px; width: 800px; opacity: 0.5; z-index: 0; pointer-events: none; }

.obra2-content { position: relative; margin-top: 100px; min-height: 350px; }
.fondo-inferior2 { position: absolute; bottom: 0; right: 60px; width: 400px; z-index: 0; pointer-events: none; }

#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-track { background: black; }
#sidebar::-webkit-scrollbar-thumb { background-color: #000000; border-radius: 10px; }
#sidebar::-webkit-scrollbar-thumb:hover { background-color: #000000; }
#sidebar { scrollbar-width: thin; scrollbar-color: #000000 black; }

.testimonio { font-style: italic; font-size: 12px; width: 110%; margin-left: 105%; margin-right: 10%; margin-top: 30px; margin-bottom: 40px; text-align: justify; line-height: 1.8; color: #ccc; }

.intro-tocopilla { font-size: 14px; text-align: justify; color: #ddd; margin: 0 auto; width: 90%; max-width: 800px; }

.post-img-texto {
  margin-top: 10px; font-style: normal; text-align: left; width: 90%;
  margin-left: auto; margin-right: auto; color: #ccc; line-height: 1.7;
  /* (sin font-size aquí en tu original) */
}

.ver-imagen-btn { background-color: black; color: white; padding: 4px 8px; font-family: 'Courier New'; cursor: pointer; margin-top: 80px; transition: opacity 0.3s; font-size: 10px; }
.ver-imagen-btn:hover { background-color: #333333; }

.imagen-modal { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 9999; }
.imagen-ampliada { max-width: 90%; max-height: 90%; border-radius: 8px; pointer-events: none; width: 60%; }
.imagen-modal-contenido { text-align: center; }
.modal-link { display: inline-block; margin-top: 500px; font-size: 14px; color: #fff; background: rgba(0,0,0,0.6); padding: 6px 12px; border-radius: 6px; text-decoration: none; }
.modal-link:hover { background: rgba(255,255,255,0.1); text-decoration: underline; }

.tex3 { font-style: italic; font-size: 12px; width: 110%; margin-left: -20%; margin-right: 40%; margin-top: 1px; margin-bottom: 40px; text-align:right; line-height: 1.8; color: #ccc; }

.fondo-inferiorco { position: absolute; margin-top: 30px; right: 200px; width: 300px; z-index: 0; pointer-events: none; }
.obra2-contentcos { position: relative; margin-top: 650px; min-height: 350px; }

.post-img-textocos { margin-top: 650px; font-style: normal; text-align: center; width: 90%; margin-left: auto; margin-right: auto; color: #ccc; line-height: 1.7; }

.fondo-inferiorcos { position: absolute; margin-top: 30px; right: 40px; width: 600px; z-index: 0; pointer-events: none; }

.tex4 { font-style: italic; font-size: 12px; width: 110%; margin-left: 70%; margin-right: 400%; margin-top: 160px; margin-bottom: 40px; text-align: left; line-height: 1.8; color: #ccc; }

.fondo-inferiorcos1 { max-width: 40%; display: flex; margin-right: -20%; margin-left: 15%; margin-top: 20px; transform: translateX(-250px); }
.fondo-inferiorcos1 img { max-width: 23%; height: auto; }

.testimonio2 { font-style: italic; font-size: 12px; width: 110%; margin-left: -5%; margin-right: 50%; margin-top: 30px; margin-bottom: 40px; text-align: justify; line-height: 1.8; color: #ccc;  }

.datvalle { font-style: italic; font-size: 12px; width: 110%; margin-left: 10%; margin-right: 500%; margin-top: 40px ; margin-bottom: 40px; text-align: left; line-height: 1.8; color: #c3cde1; }
.datvalle2 { font-style: italic; font-size: 12px; width: 110%; margin-left: 47%; margin-right: 500%; margin-top: -5px ; margin-bottom: 40px; text-align: left; line-height: 1.8; color: #ffffff; }

.gifmedien { font-style: italic; font-size: 12px; width: 80%; margin-left: 5%; margin-right: 500%; margin-top: -5px ; margin-bottom: 40px; text-align: left; line-height: 1.8; color: #ffffff; }

.datvalle3 { font-style: italic; font-size: 11px; width: 110%; margin-left: 5%; margin-top: -5px ; margin-bottom: 5px; text-align: left; line-height: 1.8; color: #ffffff; }

.zinc { font-style: italic; font-size: 12px; width: 40%; margin-left: 10%; margin-right: 500%; margin-top: 20px ; margin-bottom: 40px; text-align: left; line-height: 1.8; color: #ffffff; }

.zinc-container { position: relative; display: inline-block; }
.zinc { width: 100%; max-width: 500px; }

.punto { width: 15px; height: 15px; background: red; border-radius: 50%; position: absolute; cursor: pointer; }
#punto1 { top: 20%; left: 30%; }
#punto2 { top: 50%; left: 60%; }
#punto3 { top: 75%; left: 80%; }

.modal { display: none; position: absolute; z-index: 300; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); justify-content: center; align-items: center; }
.modal-img { max-width: 60%; border: 2px solid rgb(0, 0, 0); }
.modal-text { color: white; font-size: 1.5em; text-align: center; }
.tipografia-especial { font-family: 'Courier New', monospace; font-size: 2em; }
.modal-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 30px; cursor: pointer; }

.boden { width: 100%; max-width: 500px; transition: transform 0.3s ease; display: block; margin: 0 auto; transform-origin: center; }
.boden:hover { transform: scale(7.5); }

.zoom-pan { position: relative; overflow: hidden; width: 100%; max-width: 900px; margin: 16px auto; }
.zoom-pan-img { width: 100%; height: auto; display: block; transform-origin: top left; transition: transform 0.15s ease-out; }

.datvalle4 { font-style: italic; font-size: 11px; width: 110%; margin-left: 55%; margin-top: -5px ; margin-bottom: 5px; text-align: left; line-height: 1.8; color: #50a066; }

#modal3 { background-color: rgb(0, 0, 0); }

/* ===== Snap móvil ===== */
@media (max-width: 900px) {
  #sidebar .sidebar-content { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 0; }
  #sidebar .slides { display: flex; flex-direction: row; gap: 0; width: 100%; }
  #sidebar .slide { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; padding: 20px 24px; min-height: 100%; }
  #sidebar .sidebar-content::-webkit-scrollbar { height: 6px; }
  #sidebar .sidebar-content::-webkit-scrollbar-thumb { background: #111; }
}
@media (min-width: 901px) {
  #sidebar .slides { display: block; }
  #sidebar .slide  { padding: 0; }
}

.grupom { margin-top: 80px; width: 90%; margin-left: auto; margin-right: auto; }
.textmed { font-style: italic; font-size: 14px; width: 110%; margin-left: 5%; margin-top: 20px ; margin-bottom: 5px; text-align: left; line-height: 1.8; color: #50a066; }

.azar2 { margin-top: 40px; width: 90%; margin-left: 1px; }

.textazar{ font-style: italic; font-size: 13px; width: 90%; margin-left: -5%; margin-top: 40px ; margin-bottom: 5px; text-align: left; line-height: 1.8; color: #ffffff; }
.textazar2{ font-style: italic; font-size: 13px; width: 90%; margin-left: -5%; margin-top: 20px ; margin-bottom: 5px; text-align: left; line-height: 1.8; color: #e34c4c; }




#sidebar .sidebar-content img,
#sidebar .sidebar-content video {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}



#sidebar .sidebar-content p,
#sidebar .sidebar-content li {
  font-size: 13px;             
}


#sidebar .sidebar-content .post-img-texto,
#sidebar .sidebar-content .post-img-textocos {
  font-size: 12px !important;  
}


#sidebar .sidebar-content .datvalle  { font-size: 12px !important; }
#sidebar .sidebar-content .datvalle2 { font-size: 12px !important; }
#sidebar .sidebar-content .datvalle3 { font-size: 11px !important; }
#sidebar .sidebar-content .datvalle4 { font-size: 11px !important; }


html, body { overflow: auto !important; }


#sidebar { pointer-events: none; }
#sidebar.open { pointer-events: auto; }


.hidden-panel { pointer-events: none; }
.info-panel.show { pointer-events: auto; }


.right-panel { position: relative; z-index: 1; }
canvas { position: relative; z-index: 1; }


#sidebar .sidebar-content { -webkit-overflow-scrolling: touch; }



#sidebar .sidebar-content {
  box-sizing: border-box;
  max-width: 820px;          
  padding-left: 72px;        
  padding-right: 72px;
}


#sidebar .sidebar-content .tocopilla-content {
  --col-width: 68ch;        
  padding-bottom: 300px;    
}


#sidebar .sidebar-content .tocopilla-content p,
#sidebar .sidebar-content .tocopilla-content ul,
#sidebar .sidebar-content .tocopilla-content ol {
  max-width: var(--col-width);
  margin-left: auto;
  margin-right: auto;        
}


.tocopilla-content .testimonio,
.tocopilla-content .tex3,
.tocopilla-content .intro-tocopilla, .textazar, .textazar2 {
  width: auto !important;
  margin-left: 10px !important;
  margin-right: auto !important;
}


#sidebar .sidebar-content p,
#sidebar .sidebar-content ul,
#sidebar .sidebar-content ol {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}


@media (max-width: 600px) {
  #sidebar .sidebar-content {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 94%;
  }
  #sidebar .sidebar-content .tocopilla-content {
    --col-width: 46ch;       
  }
}