body { font-family:'Trebuchet MS', sans-serif; margin:0; color:#fff; }
body.modal-open{overflow:hidden;touch-action:none;}
.snap-section { height:100vh; width:100vw; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; }
.inicio { background:url('img/ark-bg.jpg') center/cover no-repeat; }
.reglas { background:#1c1c1c; }
.mods { background:#262626; }
.conexion { background:#333; }
.discord { background:#222; }
h1, h2 { margin-bottom:1rem; color:#FFCC00; text-shadow:2px 2px 5px #000; }
p, li { font-size:1.2rem; line-height:1.6; }
ul { list-style:none; padding:0; }
a.btn { display:inline-block; background:#FFCC00; color:#000; padding:10px 20px; border-radius:6px; text-decoration:none; font-weight:bold; transition:0.3s; margin-top:1rem; }
a.btn:hover { background:#FFD633; }

/* Flechas scroll */
.scroll-indicator, .scroll-indicator-down, .scroll-indicator-up { position:absolute; left:50%; transform:translateX(-50%); font-size:3rem; color:rgba(255,255,255,0.5); pointer-events:none; z-index:2; }
.scroll-indicator { bottom:1rem; animation:bounce 2s infinite; }
.scroll-indicator::after { content:"↡"; opacity:0.8; }
.scroll-indicator-down { bottom:1rem; animation:bounce-down 2s infinite; }
.scroll-indicator-down::after { content:"↡"; opacity:0.8; }
.scroll-indicator-up { top:1rem; animation:bounce-up 2s infinite; }
.scroll-indicator-up::after { content:"↟"; opacity:0.8; }
@keyframes bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }
@keyframes bounce-up { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,-8px)} }
@keyframes bounce-down { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* Botón ir arriba */
.back-to-top { position:fixed; bottom:1rem; right:1rem; width:3rem; height:3rem; background:rgba(0,0,0,0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 8l6 6H6z'/%3E%3C/svg%3E") no-repeat center; border:none; border-radius:50%; cursor:pointer; opacity:0.7; transition:opacity .2s ease; z-index:200; }
.back-to-top:hover { opacity:1; }

/* Header */
#main-menu { position:fixed; top:0; left:0; width:100%; background:rgba(0,0,0,0.6); z-index:300; }
.menu-container { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem; }
.menu-logo { height:40px; width:auto; }
.menu-list { list-style:none; display:flex; margin:0; padding:0; }
.menu-item { margin-left:1.5rem; }
.menu-link { color:#fff; text-decoration:none; font-weight:500; transition:color .2s; }
.menu-link:hover { color:#FFCC00; }
.mobile-toggle { display:none; background:transparent; border:none; color:#fff; font-size:1.5rem; cursor:pointer; }
.mobile-menu { display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.9); z-index:299; }
.menu-list-mobile { list-style:none; padding:2rem; text-align:center; }
.menu-list-mobile li { margin:1rem 0; }
.menu-list-mobile a { color:#fff; font-size:1.25rem; text-decoration:none; }
@media(max-width:768px){ .menu-list{display:none;} .mobile-toggle{display:block;} }

.lang-switch { position:absolute; top:60px; right:18px; display:flex; gap:8px; z-index:999; }
.lang-switch a.active { border:2px solid #FFCC00; box-shadow:0 0 12px rgba(255,204,0,0.7), 0 0 25px rgba(255,204,0,0.3) inset; background:rgba(255,204,0,0.1); transform:scale(1.05); }
.lang-switch a { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.55); border:1px solid rgba(255,204,0,0.4); box-shadow:0 0 8px rgba(255,204,0,0.2); transition:all .2s ease; }
.lang-switch a:hover { background:rgba(255,204,0,0.15); transform:scale(1.08); box-shadow:0 0 10px rgba(255,204,0,0.35); }
.lang-switch img { width:22px; height:22px; border-radius:50%; pointer-events:none; }
@media(max-width:600px){ .lang-switch { top:60px; right:12px; gap:6px; } .lang-switch a { width:28px; height:28px; } .lang-switch img { width:20px; height:20px; } }


/* Animaciones */
.section-animated { opacity:0; transform:translateY(20px); transition:opacity 1.2s ease-out, transform 1.2s ease-out; }
.section-animated.is-visible { opacity:1; transform:translateY(0); }
.image-scale { background-size:100% 100%; background-position:center; background-repeat:no-repeat; transition:background-size 0.6s ease-out; }


/*Bloque 1*/
/* Fondo de la primera sección con la cueva */
.inicio { background:url('../recursos/fondo.jpg') center/cover no-repeat; position: relative; }
/* Overlay negro en la entrada */
.cueva-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:450px;   /* Ajusta al tamaño de la entrada de la cueva */ height:350px;  /* Ajusta al tamaño de la entrada de la cueva */ border-radius:12px; display:flex; align-items:center; justify-content:center;}
.cueva-overlay img {max-width:90%;height:auto;    }

.ark-logo {position: absolute;bottom: 75px;right: 75px;;width: 180px;opacity: 0.85;filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));transition: transform 0.3s ease, opacity 0.3s ease;}
.ark-logo:hover {transform: scale(1.05);opacity: 1;}
@media (max-width: 768px) {
  .ark-logo {width: 120px;bottom: 15px;right: 15px;}
}

/*Bloque 2*/
.video {padding: 0px; position:relative; width:100%; height:100vh; overflow:hidden; background:#000; display:flex; align-items:center; justify-content:center; }
.video-container { position:relative; width:100%; height:100%; overflow:hidden; }
.video-container iframe { position:absolute; top:50%; left:50%; width:120vw; height:120vh; transform:translate(-50%,-50%); object-fit:cover; border:none; z-index:0; pointer-events:none; }

/* --- Animación más precisa para los overlays --- */
.video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: 600;
  color: #ffc107;
  text-shadow: 0 0 10px #000, 0 0 15px rgba(255,193,7,0.6);
  opacity: 0;
  animation: showInfo 48s infinite;
  animation-fill-mode: both;
  will-change: opacity, transform;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.25);
  padding: 10px 20px;
  border-radius: 6px;
}

/* Cada overlay tiene un retraso de 6s */
.info-1 { animation-delay: 0s; }
.info-2 { animation-delay: 6s; }
.info-3 { animation-delay: 12s; }
.info-4 { animation-delay: 18s; }
.info-5 { animation-delay: 24s; }
.info-6 { animation-delay: 30s; }
.info-7 { animation-delay: 36s; }
.info-8 { animation-delay: 42s; }

@keyframes showInfo {
  0%, 8% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
  10%, 22% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  24%, 100% { opacity: 0; transform: translate(-50%, -40%) scale(0.95); }
}


/* Responsividad */
@media(max-width:992px){ .video-overlay{font-size:2rem;} .video-container iframe{width:130vw;height:130vh;} }
@media(max-width:600px){ .video-overlay{font-size:1.5rem;white-space:normal;width:90%;line-height:1.4;} .video-container iframe{width:150vw;height:150vh;} }
@media(max-width:400px){ .video-overlay{font-size:1.2rem;} .video-container iframe{width:180vw;height:180vh;} }



/*Bloque 3*/
.reglas-info { background:url('../recursos/fondo-reglas.png') center/cover no-repeat; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:left; padding:2rem; min-height:100vh; box-sizing:border-box; }
.reglas-info h2 { color:#FFCC00; margin-bottom:2rem; text-shadow:2px 2px 5px #000; font-size:2rem; }
.reglas-grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:2rem; width:90%; max-width:1200px; }
.reglas-card { background:rgba(0,0,0,0.65); border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:1.5rem; flex:1 1 450px; max-width:550px; box-sizing:border-box; transition:all .3s ease; }
.reglas-card:hover { background:rgba(0,0,0,0.8); transform:translateY(-5px); }
.reglas-card h3 { color:#FFCC00; text-align:center; margin-bottom:1rem; font-size:1.4rem; }
.reglas-card ul { list-style:none; padding:0; margin:0; }
.reglas-card li { margin-bottom:.5rem; font-size:1.1rem; line-height:1.5; }
.status { width:10px; height:10px; border-radius:50%; display:inline-block; background:#00ff55; box-shadow:0 0 6px #00ff55; margin-right:.5rem; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%{opacity:1;transform:scale(1);} 50%{opacity:.6;transform:scale(1.3);} 100%{opacity:1;transform:scale(1);} }

.servers-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:0.8rem; margin-top:1rem; justify-items:stretch; width:100%; }
.server { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:.8rem 1rem; display:flex; align-items:center; justify-content:flex-start; font-size:1rem; transition:background .3s ease, transform .2s ease; text-align:left; }
.server:hover { background:rgba(255,255,255,0.1); transform:scale(1.02); }
.tag-new { background:#FFCC00; color:#000; font-weight:bold; font-size:.75rem; padding:2px 6px; border-radius:4px; margin-left:.5rem; box-shadow:0 0 6px #FFCC00; animation:shine 1.8s infinite; }
@keyframes shine { 0%,100%{opacity:1;} 50%{opacity:.6;} }

/*Ajustes responsivos generales del bloque */
@media(max-width:992px){
  .reglas-grid { flex-direction:column; align-items:center; width:95%; }
  .reglas-card { width:100%; max-width:600px; }
  .reglas-card h3 { font-size:1.3rem; text-align:center; }
  .mapa-item { flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; gap:.5rem; padding:.8rem; }
  .mapa-info { width:calc(100% - 80px); margin-left:0; }
  .ver-mapa { align-self:flex-end; margin-left:auto; margin-top:.5rem; font-size:.8rem; padding:.35rem .7rem; }
}

/*Ocultar el botón "Ver mapa" solo en pantallas pequeñas */
@media(max-width:768px){
  .ver-mapa { display:none !important; }
  .mapa-item { flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; gap:.4rem; padding:.6rem .8rem; }
  .status { margin-right:.5rem; position:relative; left:0; top:0; }
  .mapa-info { align-items:flex-start; text-align:left; margin-left:.3rem; }
  .mapa-info h4 { font-size:.9rem; }
  .mapa-info p { font-size:.75rem; }
}

@media(max-width:600px){
  .reglas-info { padding:1.5rem; text-align:center; }
  .reglas-info h2 { font-size:1.4rem; margin-bottom:1rem; }
  .reglas-card { padding:.9rem; border-radius:8px; }

  /* 🧩 Rejilla de mapas en dos columnas */
  .mapas-lista {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:.6rem;
    width:100%;
  }

  /* 🔹 Cada mapa más compacto */
  .mapa-item {
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left;
    background:rgba(0,0,0,0.55);
    padding:.5rem .6rem;
    font-size:.8rem;
    min-height:70px; width: 100%; position: relative; padding: 5px !important; margin-bottom: 1px !important;
  }

  .mapa-info{ width: 100%; }
  .status{ position:absolute; left:0; top:0; }

  .status { margin-right:.4rem; }
  .mapa-info h4 { font-size:.85rem; }
  .mapa-info p { font-size:.7rem; margin-top:.2rem; }
  .ver-mapa { display:none !important; }
}


@media(max-width:380px){
  .reglas-info h2 { font-size:1.3rem; }
  .mapa-item { padding:.6rem; }
  .ver-mapa { font-size:.85rem; padding:.4rem; }
}

.mapa-item { background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.15); border-radius:8px; display:flex; align-items:center; justify-content:space-between; padding:.6rem .9rem; margin-bottom:.6rem; transition:background .3s ease, transform .2s ease; box-sizing:border-box; }
.mapa-item:hover { background:rgba(0,0,0,0.75); transform:translateY(-3px); }
.status { width:10px; height:10px; border-radius:50%; background:#00ff55; box-shadow:0 0 6px #00ff55; margin-right:.6rem; animation:pulse 1.5s infinite; flex-shrink:0; }
.mapa-info { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; flex:1; margin-left:.3rem; }
.mapa-info h4 { margin:0; color:#FFCC00; text-shadow:1px 1px 3px #000; font-size:1rem; line-height:1.2; }
.mapa-info p { margin:.15rem 0 0; color:#fff; font-size:.85rem; opacity:0.85; }
.ver-mapa { background:linear-gradient(180deg, #ffd84dad 0%, #ffb3008a 100%); border:1px solid rgba(255,204,0,0.5); color:#000; padding:.4rem .8rem; border-radius:6px; cursor:pointer; font-weight:600; font-size:.85rem; transition:all .25s ease; box-shadow:0 0 12px rgba(255,204,0,0.25); }
.ver-mapa:hover { background:linear-gradient(180deg,#FFB300 0%,#FFD84D 100%); box-shadow:0 0 20px rgba(255,204,0,0.5); transform:scale(1.05); }
.new-tag { background:#21c521; color:#fff; font-size:.7rem; margin-left:.3rem; padding:2px 5px; border-radius:4px; font-weight:600; box-shadow:0 0 4px #21c521; }

/* Modal mapa */
.modal-mapa{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);backdrop-filter:blur(6px);align-items:center;justify-content:center;z-index:9999;overflow:hidden;}
.modal-mapa-content{background:rgba(15,25,35,0.95);border:1px solid rgba(255,255,255,0.15);border-radius:10px;color:#fff;position:relative;padding:1.2rem;box-shadow:0 0 25px rgba(255,255,255,0.15);max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;}
.mapa-viewer{display:flex;align-items:center;justify-content:center;width:100%;height:auto;max-height:75vh;overflow:hidden;}
.mapa-viewer img{max-width:100%;max-height:75vh;width:auto;height:auto;display:block;border-radius:10px;object-fit:contain;box-shadow:0 0 15px rgba(255,255,255,0.15);}
.cerrar-mapa{position:absolute;top:10px;right:16px;color:#FFCC00;font-size:1.6rem;cursor:pointer;transition:color .2s ease;}
.cerrar-mapa:hover{color:#fff;}
.mapa-footer{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:.8rem;}
.mapa-coords{color:#FFCC00;font-weight:bold;text-shadow:1px 1px 3px #000;font-size:.85rem;}
.mapa-link{color:#FFCC00;text-decoration:none;font-weight:bold;font-size:.85rem;text-shadow:1px 1px 3px #000;transition:all .2s ease;}
.mapa-link:hover{color:#FFD633;text-shadow:0 0 6px #FFCC00;}
@media(max-width:768px){.modal-mapa-content{padding:1rem;max-width:95vw;max-height:90vh;}.mapa-footer{flex-direction:column;align-items:center;gap:.5rem;}.mapa-coords,.mapa-link{font-size:.8rem;}}



/*Bloque 4*/
.mods-ark { background:url('../recursos/fondo-mods.png') center/cover no-repeat; color:#CFEFFF; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; min-height:100vh; box-sizing:border-box; }
.mods-ark h2 { color:#7BE2FF; font-size:2rem; text-shadow:0 0 15px rgba(123,226,255,0.5); margin-bottom:2rem; }
.mods-slider { position:relative; width:90%; max-width:1300px; padding:0 48px; }
.mods-ark-grid { display:grid; grid-auto-flow:column; grid-auto-columns:calc(25% - 1rem); gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.mods-ark-grid::-webkit-scrollbar { display:none; }
.mod-ark-card { scroll-snap-align:start; background:rgba(10,30,45,0.7); border:1px solid rgba(123,226,255,0.2); border-radius:8px; overflow:hidden; position:relative; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.mod-ark-card:hover { transform:translateY(-5px); box-shadow:0 0 20px rgba(123,226,255,0.5); border-color:rgba(123,226,255,0.6); }
.mod-ark-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.featured { position:absolute; top:0.6rem; right:0.6rem; background:#2187A3; color:#fff; font-size:0.8rem; padding:2px 8px; border-radius:4px; font-weight:bold; text-transform:uppercase; box-shadow:0 0 10px rgba(123,226,255,0.5); }
.mod-info { padding:0.8rem; text-align:left; }
.mod-info h3 { margin:0; font-size:1.1rem; color:#7BE2FF; text-shadow:0 0 10px rgba(123,226,255,0.3); }
.mod-info p { margin:0.2rem 0 0.5rem; color:#66C0D9; font-size:0.9rem; }
.mod-meta { display:flex; justify-content:space-between; font-size:0.85rem; color:#A8EFFF; opacity:0.8; }
.slide-btn { position:absolute; top:50%; transform:translateY(-50%); left:auto; right:auto; background:rgba(10,30,45,0.85); border:1px solid rgba(123,226,255,0.4); color:#7BE2FF; font-size:2rem; width:44px; height:64px; cursor:pointer; z-index:5; border-radius:6px; transition:background .3s ease,color .3s ease,transform .1s ease; }
.slide-btn:hover { background:rgba(123,226,255,0.2); color:#fff; }
.slide-btn:active { transform:translateY(-50%) scale(0.96); }
.slide-btn.prev { left:8px; }
.slide-btn.next { right:8px; }
.modDescription{display: none;}

/* Responsive */
@media(max-width:992px){ .mods-ark-grid{grid-auto-columns:calc(33.33% - 1rem);} }
@media(max-width:768px){ .mods-ark-grid{grid-auto-columns:calc(50% - 1rem);} .mods-ark h2{font-size:1.7rem;} }
@media(max-width:480px){ .mods-ark-grid{grid-auto-columns:calc(50% - 0.8rem);gap:0.8rem;} .slide-btn{width:36px;height:56px;font-size:1.6rem;} }
@media(max-width:360px){ .mods-ark-grid{grid-auto-columns:100%;} }

/*Modal mods*/
.mod-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(5,15,25,0.9); backdrop-filter:blur(6px); z-index:999; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
.mod-modal-content { background:linear-gradient(135deg,rgba(10,30,45,0.95),rgba(20,50,65,0.95)); border:1px solid rgba(123,226,255,0.4); box-shadow:0 0 25px rgba(123,226,255,0.4); border-radius:12px; padding:1.5rem 2rem; width:90%; max-width:900px; color:#CFEFFF; display:flex; gap:1.5rem; align-items:flex-start; position:relative; animation:fadeIn .3s ease-out; max-height:90vh; overflow:hidden; }
.mod-modal-img { width:220px; height:220px; object-fit:cover; border-radius:8px; border:1px solid rgba(123,226,255,0.3); flex-shrink:0; box-shadow:0 0 15px rgba(123,226,255,0.2); }
.mod-modal-text { flex:1; display:flex; flex-direction:column; justify-content:flex-start; text-align:left; overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:70vh; padding-right:.5rem; scrollbar-width:thin; scrollbar-color:rgba(123,226,255,0.5) rgba(10,30,45,0.5); }
.mod-modal-text::-webkit-scrollbar { width:6px; }
.mod-modal-text::-webkit-scrollbar-thumb { background:rgba(123,226,255,0.5); border-radius:3px; }
.mod-modal-title { color:#7BE2FF; font-size:1.6rem; margin-bottom:.3rem; text-shadow:0 0 10px rgba(123,226,255,0.4); }
.mod-modal-author { color:#66C0D9; font-size:1rem; margin-bottom:1rem; opacity:0.9; margin-bottom: 0px; }
.mod-modal-desc { font-size:1.05rem; line-height:0.3; color:#A8EFFF;  }/*white-space:pre-line;*/
.close-modal { position:absolute; top:10px; right:16px; color:#7BE2FF; font-size:1.6rem; cursor:pointer; transition:color .2s ease; }
.close-modal:hover { color:#fff; }
@keyframes fadeIn { from{opacity:0; transform:scale(.95);} to{opacity:1; transform:scale(1);} }

/* Responsive */
@media(max-width:768px){
  .mod-modal-content { flex-direction:column; align-items:center; text-align:center; padding:1.2rem; gap:1rem; max-height:90vh; }
  .mod-modal-img { width:100%; height:auto; max-height:250px; margin-bottom:.5rem; }
  .mod-modal-text { text-align:left; max-height:55vh; padding-right:0.3rem; }
}

/*Descripciones*/
.mod-modal-desc{color:#e6e6e6;font-family:'Trebuchet MS',sans-serif;font-size:.88rem;line-height:1.45;text-align:left;padding:.9rem 1rem;background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.1);border-radius:8px;max-height:60vh;overflow-y:auto;box-shadow:inset 0 0 15px rgba(255,255,255,0.08);}
.mod-modal-desc h4{color:#FFCC00;font-size:1.15rem;margin-bottom:.4rem;text-shadow:1px 1px 3px #000; margin-top: 0px;}
.mod-modal-desc p{margin:.5rem 0;color:#e0e0e0;font-size:.88rem;}
.mod-modal-desc strong{color:#FFCC00;font-weight:bold;}
.mod-modal-desc ul{margin:.4rem 0;padding-left:1rem;list-style-type:disc;}
.mod-modal-desc li{margin-bottom:.35rem;color:#d5d5d5;font-size:.85rem;}
.mod-modal-desc .mod-link{ text-align: right; }
.mod-modal-desc .mod-link a{ color:#FFCC00; text-decoration: none;}
.mod-modal-desc .mod-link a:hover{text-decoration: underline;}
.mod-modal-desc::-webkit-scrollbar{width:7px;}
.mod-modal-desc::-webkit-scrollbar-thumb{background:#FFCC00;border-radius:4px;}
.mod-modal-desc::-webkit-scrollbar-thumb:hover{background:#FFD633;}
@media(max-width:768px){.mod-modal-desc{font-size:.8rem;line-height:1.4;padding:.7rem;max-height:50vh;}.mod-modal-desc h4{font-size:1rem;margin-bottom:.3rem;}}


/*Bloque Discord*/
.discord-section { background:linear-gradient(180deg,rgba(10,30,45,1) 0%,rgba(5,15,25,1) 100%),url('../recursos/fondo-tek-blur.jpg') center/cover no-repeat; color:#CFEFFF; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:100vh; padding:3rem 1.5rem; position:relative; overflow:hidden; }
.discord-container { max-width:800px; display:flex; flex-direction:column; align-items:center; gap:1.5rem; z-index:2; }
.discord-logo { width:140px; height:auto; filter:drop-shadow(0 0 20px rgba(123,226,255,0.6)); animation:pulseLogo 4s infinite ease-in-out; }
.discord-section h2 { font-size:2rem; color:#7BE2FF; text-shadow:0 0 15px rgba(123,226,255,0.6); margin-bottom:0.5rem; }
.discord-section p { font-size:1.2rem; line-height:1.7; color:#A8EFFF; max-width:700px; }
.discord-btn { display:inline-block; background:linear-gradient(90deg,#5865F2,#4752C4); color:#fff; font-weight:bold; text-decoration:none; padding:0.9rem 2rem; border-radius:8px; margin-top:1rem; box-shadow:0 0 20px rgba(88,101,242,0.6); transition:all 0.3s ease; font-size:1.1rem; }
.discord-btn:hover { transform:scale(1.05); box-shadow:0 0 30px rgba(123,226,255,0.8); background:linear-gradient(90deg,#4752C4,#5865F2); }
@keyframes pulseLogo { 0%,100%{filter:drop-shadow(0 0 15px rgba(123,226,255,0.3));} 50%{filter:drop-shadow(0 0 30px rgba(123,226,255,0.9));} }

/* Responsive */
@media(max-width:768px){ .discord-logo{width:100px;} .discord-section h2{font-size:1.6rem;} .discord-section p{font-size:1rem;} .discord-btn{font-size:1rem; padding:0.8rem 1.6rem;} 
  .discord-section{ padding:0px !important;  }.discord-container{ padding:30px; }
}




@media(max-width:1200px){ 
  .menu-container{padding:0.5rem;} .
  snap-section{padding:1.5rem;} 
  .cueva-overlay{width:380px;height:300px;} .reglas-grid{width:90%;} }

@media(max-width:992px){ 
  .menu-container{flex-direction:column;} 
  /*.menu-logo{height:35px;} */
  .snap-section{padding:1.5rem;} 
  .video{padding:0px;}
  h1,h2{font-size:1.8rem;} 
  p,li{font-size:1rem;} 
  .cueva-overlay{width:320px;height:260px;} 
  .video-overlay{font-size:1.5rem;} 
  .reglas-grid{flex-direction:column;align-items:center;} 
  .reglas-card{width:90%;max-width:500px;} }

@media(max-width:768px){ 
  body{font-size:0.9rem;} 
  .menu-container{flex-direction:row;} 
  .menu-list{display:none;} 
  .mobile-toggle{display:block;} 
  .mobile-menu{display:none;} 
  .snap-section{padding:1rem;} 
  .video{padding:0px;}
  .cueva-overlay{width:280px;height:220px;} 
  .video-overlay{font-size:1.2rem;text-align:center;} 
  .reglas-grid{flex-direction:column;width:95%;} 
  .reglas-card{flex:1 1 auto;width:100%;padding:1.2rem;} 
  h1,h2{font-size:1.5rem;} }

@media(max-width:576px){ 
  /*.menu-logo{height:30px;} */
  .snap-section{padding:1rem;} 
  .video{padding:0px;}
  h1,h2{font-size:1.3rem;} 
  p,li{font-size:0.9rem;} 
  .cueva-overlay{width:240px;height:180px;} 
  .video-overlay{font-size:1rem;} 
  .reglas-card h3{font-size:1.2rem; margin: 0px;margin-bottom: 5px;} 
  .reglas-card li{font-size:1rem;} 
  .info-general ul li{ margin-bottom: 0px;  }
  .server{padding: 1px;}
}

@media(max-width:400px){ 
  .video{padding:0px;}
  h1,h2{font-size:1.1rem;} p,li{font-size:0.85rem;} 
  .cueva-overlay{width:300px;height:150px;} 
  .video-overlay{font-size:0.9rem;} .reglas-card{padding:1rem;} }