@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
        
body {
    font-family: 'Inter', sans-serif;
    background-color: #272933;
    color: #ffffff;
}
/* Utilidades de color personalizadas para igualar el "sky" y "slate" de Tailwind */
.text-sky-400 { color: #38bdf8 !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-900 { color: #0f172a !important; }
.bg-sky-500 { background-color: #0ea5e9 !important; }
.bg-slate-800 { background-color: #1e293b !important; }
.bg-slate-900-50 { background-color: rgba(15, 23, 42, 0.5) !important; }

.btn-sky {
    background-color: #0ea5e9;
    color: white;
    border: none;
}
.btn-sky:hover {
    background-color: #0284c7;
    color: white;
}


.gradient-text {
    background: linear-gradient(90deg, #38bdf8, #818cf8);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-link {
    color: #f8fafc;
    font-weight: 500;
    transition: color 0.3s;
}
.nav-link:hover {
    color: #38bdf8;
}

.rank-card {
    transition: all 0.3s ease;
    height: 100%;
}
.rank-card:hover {
    transform: translateY(-5px);
    border-color: #38bdf8;
}
        
.scale-105 {
    transform: scale(1.05);
    z-index: 2;
}
@media (max-width: 768px) {
    .scale-105 { transform: scale(1); } /* Desactivar escala en móviles */
}

.shadow-sky { box-shadow: 0 10px 30px -10px rgba(14, 165, 233, 0.3); }

/* Espaciado personalizado para igualar a Tailwind py-24 */
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }

/* Ajustes de Modal */
.modal-content {
    background-color: transparent;
    border: none;
}
.modal-backdrop.show { opacity: 0.8; }
        
.form-control-custom {
    background-color: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}
.form-control-custom:focus {
    background-color: #1e293b;
    color: white;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 0.25rem rgba(14, 165, 233, 0.25);
}

/* Tipografía */
.font-black { font-weight: 900 !important; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* Efecto Cristal */
.glass {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/*Estilos de la cabecera de la pagina WEB*/
header {
    background: #222;
    color: white;
    padding: 10px;
    text-align:start;
}
.text-white {
    color: #fff;
}
.text-fuente-nav {
    font-family: "ADLaM Display", system-ui;
}

/*Estilos de primer sector*/
/*Estilo de titulo principal*/
.gradient-text {
            background: linear-gradient(90deg, #38bdf8, #818cf8);
            background-clip: border-box;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
.h1_titulo {
    font-size:5rem;
    font-weight: 800;
    text-align: center;
    padding-top: 300px;
    color: #fff;
    transition: opacity 0.2s linear, transform 0.2s linear;
    will-change: opacity, transform;
}

.adlam-display-regular {
  font-family: "ADLaM Display", system-ui;
  font-weight: 1000;
  font-style: normal;
}
.hero-texto {
  will-change: opacity, transform;
}
/*Estilo de subtitulo*/
.h2_subtitulo {
    font-family:Arial, sans-serif;
    text-align: center;
    padding-top: 10px;
    font-size: 20px;
    background: linear-gradient(90deg, #ffffff, #b3b3b3);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: #222;
}
.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/*Estilos de las secciones de la pagina WEB*/

.parte1 {
    font-family: Arial, sans-serif;
    margin: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0,0,0,0.55)), url('../images/fondo1_1.png'); /*Pone fondo la imagen y agrega capa oscura*/
    background-repeat: no-repeat; /* Evita el mosaico */
    background-size: cover; /* Estira la imagen para cubrir todo el espacio */
    background-position: center center; /* Centra la imagen */
    
    /* Garantiza que el elemento ocupe todo el viewport */
    min-height: 100vh; /* Altura mínima de la ventana gráfica completa */
    width: 100%; /* Ancho completo (elimina el 1920px fijo) */
    /* Esto ayuda a que los píxeles no se suavicen tanto al estirarse */
    image-rendering: crisp-edges; 
    image-rendering: pixelated;
}
.parte2 {
    font-family: Arial, sans-serif;
    margin: 0;
    background-image: url('../images/fondo2.png');
}
.parte3 {
    font-family: Arial, sans-serif;
    margin: 0;
    background-image: url('../images/fondo1.png');
    height: 250px;
}


/*Estilos del logo en el NAV de la pagina WEB*/
.logo-rebote {
  display: block;
  margin-right: 10px;
  transform-origin: 50% 50%;
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
  cursor: pointer;
}

.logo-rebote:hover {
  transform: rotate(10deg) scale(1.10) translateY(1px);
  color: #ffffff;
}

@keyframes rebote-giro {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  30% {
    transform: rotate(15deg) translateY(-10px);
  }
  60% {
    transform: rotate(45deg) translateY(5px);
  }
  100% {
    transform: rotate(45deg) translateY(0);
  }
}

.logo-wrapper {
  display: flex;          /* CLAVE */
  align-items: center;    /* centra vertical */
  gap: 0rem;            /* espacio entre logo y texto */
}

.logo-text {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.3rem;
}
.logo-text:hover {
  color: #ffffff;
}

/*Estilos de la barra de navegacion de la pagina WEB*/

/* Navbar*/
.navbar {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-logo a {
    font-size: 17px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-decoration: none;
    letter-spacing: 2px;
}

.navbar-menu {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.navbar-menu li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 8px 15px;
    border-radius: 5px;
}

.navbar-menu li a:hover {
    color: gold;
    background: rgba(255, 215, 0, 0.1);
}

/*Hamburguesa para móvil*/
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/*Responsive*/
@media (max-width: 968px) {
    .navbar-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.98);
        flex-direction: column;
        padding: 30px;
        gap: 20px;
        transition: left 0.3s ease;
    }

    .navbar-menu.active {
        left: 0;
    }

    .hamburger {
        display: flex;
    }

    .navbar-menu li a {
        display: block;
        padding: 12px 20px;
        font-size: 18px;
    }
}

/*Estilos de la pagina principal que contiene titulos y todo lo inicial de la pagina*/
/* Estado inicial (oculto) */
.animar-entrada {
  opacity: 0;
  transform: translateY(40px);
  animation: aparecerArriba 0.5s ease-out forwards;
}
.animar-entrada2 {
  opacity: 0;
  transform: translateY(40px);
  animation: aparecerArriba 0.7s ease-out forwards;
}
.animar-entrada3 {
  opacity: 0;
  transform: translateY(40px);
  animation: aparecerArriba 0.9s ease-out forwards;
}

/* Animación */
@keyframes aparecerArriba {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*Estilo de botones principales*/
.btn-main{
    margin-top: 50px;
    border-radius: 10px; /* Ajusta según el tamaño */
    padding: 10px 20px;
    border: none;               /* Evita bordes negros por defecto */
}
.btn-main-1 {
    color: #252525;
    background: linear-gradient(135deg, #ffee00 0%, #ffee00 100%);/* Tu color original */
    transition: transform 0.3s ease; /* Aquí sucede la magia */
}

.btn-main-1:hover {
    /* En lugar de 1.05, prueba con un valor muy cercano que no rompa el pixel-grid */
    transform: scale(1.050);
}

.btn-main-2 {
    color: #fff;
    background-color: #00000000;
    border: 1px solid #ffffff13;
}
.btn-main-2:hover {
    background-color: #58585873;
    color: #fff;
    border-color: #ffffff52;
}
.material-symbols-rounded {
  display: block;
  line-height: 1;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}
.cj-redes-sociales{
    justify-self: center;
    width: 300px;
    color: #000000;
    margin-top: 20ch;
    border: 1px solid #ffffff13;
    border-radius: 30px;
    padding: 15px 25px;
}
.cj-texto-compartenos{
    color: #fafafae7;
    margin-right: 1rem;
    padding-top: 2px;
    cursor: default;
}
/* Color base del logo */
.cj-twitch path {
    fill: #ffffff; 
    transition: fill 0.3s ease; /* Opcional: hace que el cambio sea suave */
}
/* Evitamos que el fondo cambie (según tu petición original) */
.cj-twitch {
    background: transparent !important;
    margin-right: 5px;
    display: inline-block; /* Importante: scale no funciona bien en elementos 'inline' puros */
    transition: transform 0.3s ease; /* Aquí sucede la magia */
}
/* CAMBIO DE COLOR AL PASAR EL MOUSE */
.cj-twitch:hover path {
    fill: #9146FF; /* Aquí pones el color que quieres que tenga el logo al hacer hover */
}
/* Si quieres un borde o fondo en el cuadro del SVG, úsalo aquí */
.cj-twitch:hover {
    background-color: transparent; /* Cámbialo si realmente quieres fondo blanco */
    transform: scale(1.25);
}
.cj-tiktok path {
    fill: #ffffff; 
    transition: fill 0.3s ease;
}
.cj-tiktok {
    background: transparent !important;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block; /* Importante: scale no funciona bien en elementos 'inline' puros */
    transition: transform 0.3s ease; /* Aquí sucede la magia */
}
.cj-tiktok:hover path {
    fill: #ff4684;
}
.cj-tiktok:hover {
    background-color: transparent;
    transform: scale(1.25);
}
.cj-ig path {
    fill: #ffffff; 
    transition: fill 0.3s ease;
}
.cj-ig {
    background: transparent !important;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block; /* Importante: scale no funciona bien en elementos 'inline' puros */
    transition: transform 0.3s ease; /* Aquí sucede la magia */
}
.cj-ig:hover path {
    fill: #ff7146;
}
.cj-ig:hover {
    background-color: transparent;
    transform: scale(1.25);
}
.cj-discord path {
    fill: #ffffff; 
    transition: fill 0.3s ease;
}
.cj-discord {
    background: transparent !important;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block; /* Importante: scale no funciona bien en elementos 'inline' puros */
    transition: transform 0.3s ease; /* Aquí sucede la magia */
}

.cj-discord:hover path {
    fill: #4687ff;
}
.cj-discord:hover {
    background-color: transparent;
    transform: scale(1.25);
}
/*Estilo de flecha que salta hacia abajo*/
.flecha_1 {
    color: rgb(35, 195, 235);
    font-weight: 1000;
    font-size: 45px;
    display: flex;
    justify-content: center;
    align-items:baseline;
    animation: saltoAbajo 1.5s infinite ease-in-out;
    cursor: pointer;
    user-select: none;
    margin-top: 2.5rem;
    transition: transform 0.3s ease; /* Aquí sucede la magia */
}
.nota{
    color: rgba(255, 255, 255, 0.28);
}

@keyframes saltoAbajo {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(12px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Titulo de rango de la segunda seccion*/

.titulo-rangos {
    text-align: center;
    margin-bottom: 50px;
    width: 100%;  /* Asegura que ocupe todo el ancho */
}

.titulo-rangos h1 {
    font-family: "Poppins", sans-serif;
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(172, 172, 172, 0.5),
                 0 0 40px rgba(165, 165, 165, 0.3);
    margin-bottom: 10px;
}
/* Contenedores verticales centrados */
.contenedor-padre {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 40px 20px;
  min-height: 60vh;
}

@media (max-width: 600px) {
  .tarjeta { width: 85%; height: 260px; }
  .contenedor-padre { gap: 16px; padding: 24px 12px; }
}

/*Estilos de div que contiene los rangos*/
.contenedor-principal {
    padding: 150px;
    background-image: url(../images/fondo2.png);
}

.contenedor-tarjetas {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    cursor: default;
}
.tarjeta-vip {
    position: relative;
    margin-top: 15px;
    background:
    linear-gradient(135deg, rgba(56, 235, 248, 0.14), rgba(129, 140, 248, 0.08)),
    rgba(15, 23, 42, 0.76);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0);
    height: auto;
    width: 100%;
    max-width: 350px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-vip:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.tarjeta-vip-recomendar {
    position: relative;
    background:
    linear-gradient(135deg, rgba(56, 235, 248, 0.14), rgba(129, 140, 248, 0.08)),
    rgba(15, 23, 42, 0.76);
    border: 2px solid #0ec5e9;
    box-shadow: 0 0 20px rgba(0, 255, 251, 0.355);
    border-radius: 20px;
    height: auto;
    width: 100%;
    max-width: 350px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* La tarjeta se mueve como ya lo hacía */
.contenedor-card-vip:hover{
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.tarjeta-vip-recomendar:hover {
    transform: translateY(-10px);
    border: 2px solid #0ec5e9;
    box-shadow: 0 0 20px rgba(0, 238, 255, 0.355);
}
/* El ancla es la que recibe la transición ahora */
.ancla-capsula {
    transition: transform 0.3s ease;
    position: relative;
    z-index: 11;
}
/* Cuando el padre recibe hover, el ancla sube */
.contenedor-card-vip:hover .ancla-capsula {
    transform: translateY(-10px);
}

.imagen-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.imagen-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contenido {
    padding: 30px;
    text-align: center;
}
.titulo {
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.descripcion {
    font-size: 15px;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 25px;
}
.boton-obtener {
    background: linear-gradient(135deg, #ffee00 0%, #ffee00 100%);
    color: #1d1d1d;
    border: none;
    padding: 5px 40px;
    margin-left: 2.5rem;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    text-decoration: none;
    max-width: 100%;
}
.boton-obtener:hover {
    transform: scale(1.05);
    box-shadow: 0 0px 25px rgba(234, 225, 102, 0.6);
}
.boton-obtener:active {
    transform: scale(0.98);
}

/* Badge VIP opcional */
.badge-basico {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgb(174, 0, 255);
    color: #000000;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.5);
}
.badge-recomendado {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgb(0, 238, 255);
    color: #000000;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.5);
}
.badge-definitivo {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgb(251, 255, 0);
    color: #000000;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.5);
}
.contenido-badge {
    padding: 30px;
    text-align:start;
}
/*Estilos de footer*/
footer {
    background: #222;
    color: white;
    text-align: center;
    padding: 20px;
}
/* ===== ESTILOS PARA PÁGINAS INTERNAS ===== */
.contenido-pagina {
    max-width: 1200px;
    margin: 0 auto;
}

.info-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 20px;
}

.subtitulo-seccion {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
}

.subtitulo-card {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

.texto-descripcion {
    color: #e0e0e0;
    font-size: 16px;
    line-height: 1.8;
}

.lista-beneficios {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.lista-beneficios li {
    color: #e0e0e0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lista-beneficios li:last-child {
    border-bottom: none;
}

.premium-card {
    border: 2px solid #ffee00;
    background: linear-gradient(135deg, rgba(255, 238, 0, 0.1) 0%, rgba(255, 238, 0, 0.05) 100%);
}

/* Estilos para página de Mods */
.pack-descarga {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.1) 0%, rgba(66, 133, 244, 0.05) 100%);
    border: 2px solid rgba(66, 133, 244, 0.3);
    border-radius: 20px;
    padding: 40px;
}

.mod-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 15px 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.mod-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px);
}

.mod-nombre {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.mod-descripcion {
    color: #aaa;
    font-size: 14px;
    margin: 0;
}

.btn-mod-download {
    background: #4285f4;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-mod-download:hover {
    background: #3367d6;
    transform: scale(1.05);
}

.instalacion-paso {
    background: rgba(255, 255, 255, 0.03);
    border-left: 4px solid #ffee00;
    padding: 20px;
    margin: 15px 0;
    border-radius: 5px;
}

.instalacion-paso h4 {
    color: #ffee00;
    margin-bottom: 10px;
}

.instalacion-paso p {
    color: #e0e0e0;
    margin: 0;
}

.boton-regresar-inicio {
  text-decoration: none;
}
/* Estilos para página de IP */
.ip-destacada {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, rgba(255, 238, 0, 0.1) 0%, rgba(0, 238, 255, 0.1) 100%);
    border-radius: 20px;
    border: 2px solid rgba(255, 238, 0, 0.3);
}

.ip-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    border-radius: 15px;
    margin: 20px auto;
    max-width: 500px;
}

.ip-texto {
    font-size: 1px;
    font-weight: bold;
    color: #ffee00;
    font-family: 'Courier New', monospace;
}

.btn-copiar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #4285f4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-copiar:hover {
    background: #3367d6;
    transform: scale(1.05);
}

.texto-ayuda {
    color: #aaa;
    font-size: 14px;
}

.servidor-info {
    margin-top: 20px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-label {
    color: #aaa;
    font-weight: 600;
}

.info-valor {
    color: #fff;
    font-weight: 500;
}

.estado-online {
    color: #10b981;
    font-weight: bold;
}

.estado-offline {
    color: #ef4444;
    font-weight: bold;
}

.estado-error {
    color: #f59e0b;
    font-weight: bold;
}

.lista-requisitos {
    list-style: none;
    padding: 0;
}

.lista-requisitos li {
    color: #e0e0e0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.paso-conexion {
    display: flex;
    gap: 20px;
    margin: 25px 0;
    align-items: flex-start;
}

.numero-paso {
    background: #ffee00;
    color: #000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    flex-shrink: 0;
}

.contenido-paso h4 {
    color: #fff;
    margin-bottom: 10px;
}

.contenido-paso p {
    color: #e0e0e0;
    margin: 0;
}

/* Estilos para página de Actualizaciones */
.timeline {
    position: relative;
    padding: 20px 0;
}

.actualizacion-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.actualizacion-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.actualizacion-item.destacada {
    border: 2px solid #ffee00;
    background: linear-gradient(135deg, rgba(255, 238, 0, 0.1) 0%, rgba(255, 238, 0, 0.05) 100%);
}

.actualizacion-fecha {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.badge {
    background: #ff4444;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    animation: pulso 2s infinite;
}

@keyframes pulso {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.fecha {
    color: #aaa;
    font-size: 14px;
    font-weight: 600;
}

.actualizacion-titulo {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.actualizacion-categoria {
    display: inline-block;
    background: rgba(66, 133, 244, 0.2);
    color: #4285f4;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 15px;
}

.actualizacion-descripcion {
    color: #e0e0e0;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.lista-cambios {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.lista-cambios li {
    color: #e0e0e0;
    padding: 8px 0;
    padding-left: 10px;
}

.evento-proximo {
    display: flex;
    gap: 20px;
    padding: 20px;
    margin: 15px 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border-left: 4px solid #ffee00;
    transition: all 0.3s ease;
}

.evento-proximo:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px);
}

.evento-icono {
    font-size: 40px;
    flex-shrink: 0;
}

.evento-info h4 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 8px;
}

.evento-info p {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 8px;
}

.evento-fecha {
    color: #ffee00;
    font-size: 13px;
    font-weight: 600;
}

.metodo-exp {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    height: 100%;
}

.metodo-exp h4 {
    color: #ffee00;
    font-size: 18px;
    margin-bottom: 10px;
}

.metodo-exp p {
    color: #e0e0e0;
    font-size: 14px;
    margin: 0;
}

/* Responsive para páginas internas */
@media (max-width: 768px) {
    .ip-box {
        flex-direction: column;
        gap: 15px;
    }
    
    .ip-texto {
        font-size: 20px;
    }
    
    .mod-item {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .paso-conexion {
        flex-direction: column;
    }
    
    .evento-proximo {
        flex-direction: column;
        text-align: center;
    }
}
/* ============================= */
/* PÁGINA DE INFORMACIÓN */
/* ============================= */

.contenedor-principal {
    background:
        radial-gradient(circle at top, rgba(14, 165, 233, 0.2), transparent 30%),
        linear-gradient(180deg, #08111f 0%, #0f172a 45%, #0b1020 100%);
    color: #ffffff;
    padding: 100px 20px;
}

/* Bloques de información */
.info-bloque {
    max-width: 900px;
    margin: 0 auto 60px auto;
    text-align: center;
}

/* Títulos */
.info-bloque h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffcc00;
}

/* Texto */
.info-bloque p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #dddddd;
}

/* Listas */
.info-bloque ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.info-bloque ul li {
    font-size: 1rem;
    margin: 10px 0;
    color: #e0e0e0;
}

/* Botones dentro de info */
.info-bloque .btn-main {
    margin-top: 25px;
    display: inline-block;
}

/* Separación visual */
.info-bloque:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 50px;
}

/* Responsive */
@media (max-width: 768px) {
    .info-bloque h2 {
        font-size: 1.8rem;
    }
}

/* ============================= */
/* PÁGINA RANGO VIP */
/* ============================= */

.vip-info {
    background-color: #0f0f0f;
    color: #ffffff;
    padding: 100px 20px;
    text-align: center;
}

.vip-card {
    max-width: 600px;
    margin: 0 auto;
    background: #1a1a1a;
    border-radius: 24px;
    padding: 50px 30px;
    box-shadow: 0 0 30px rgba(255, 204, 0, 0.15);
}

.vip-imagen {
    width: 200px;
    margin-bottom: 25px;
}

.vip-titulo {
    font-size: 2.2rem;
    color: #ffcc00;
    margin-bottom: 25px;
}

.vip-beneficios {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.vip-beneficios li {
    font-size: 1.05rem;
    margin: 12px 0;
    color: #e0e0e0;
}

.vip-descripcion {
    font-size: 1rem;
    color: #cccccc;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* animaciones */

@keyframes modalEnter {
from {
opacity: 0;
transform: translateY(-20px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes fadeBackdrop {
from { opacity: 0; }
to { opacity: 1; }
}

/* prevenir scroll */
body.modal-open {
overflow: hidden;
}

/* ============================= */
/* AJUSTES RESPONSIVE GLOBALES */
/* ============================= */

.h1_titulo {
    font-size: clamp(2.4rem, 8vw, 5rem);
    padding-top: clamp(120px, 24vh, 300px);
    margin-inline: auto;
    width: min(100%, 12ch);
}

.hero-texto {
    width: min(100%, 900px);
    margin: 0 auto;
    padding-inline: 16px;
}

.h2_subtitulo {
    font-size: clamp(1rem, 2.5vw, 20px);
}

.btn-main {
    white-space: normal;
}

.cj-redes-sociales {
    width: min(100%, 340px);
    margin-top: clamp(3rem, 10vh, 20ch);
    flex-wrap: wrap;
    row-gap: 10px;
}

.titulo-rangos h1 {
    font-size: clamp(2rem, 4vw, 48px);
}

.contenedor-principal {
    padding: clamp(72px, 8vw, 100px) clamp(16px, 4vw, 24px);
    background-size: cover;
    background-position: center;
}

.contenido-pagina,
.info-bloque,
.vip-card,
.ip-destacada,
.pack-descarga,
.info-card,
.actualizacion-item {
    max-width: 100%;
}

.info-card,
.pack-descarga {
    overflow-wrap: break-word;
}

.contenido {
    padding: 30px;
}

.mod-item {
    gap: 16px;
}

.ip-box {
    width: 100%;
    overflow-wrap: anywhere;
}

.ip-texto {
    font-size: clamp(1rem, 4vw, 28px);
    word-break: break-word;
    text-align: center;
}

.info-item {
    gap: 12px;
}

@media (max-width: 992px) {
    .h1_titulo {
        width: min(100%, 14ch);
    }

    .contenedor-tarjetas {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .parte1 {
        padding-inline: 16px;
    }

    .hero-texto {
        padding-inline: 0;
    }

    .btn-main {
        margin-top: 18px;
    }

    .d-flex.justify-content-center.animar-entrada2 {
        flex-direction: column;
        align-items: stretch !important;
        width: min(100%, 420px);
        margin-inline: auto;
    }

    .d-flex.justify-content-center.animar-entrada2 .btn-main {
        width: 100%;
    }

    .cj-redes-sociales {
        width: 100%;
        max-width: 320px;
        padding: 14px 18px;
        justify-content: center !important;
    }

    .cj-texto-compartenos {
        width: 100%;
        margin-right: 0;
        text-align: center;
    }

    .contenedor-principal {
        padding-top: 84px;
        padding-bottom: 84px;
    }

    .contenido {
        padding: 22px 18px;
    }

    .subtitulo-seccion {
        font-size: 28px;
    }

    .info-card,
    .pack-descarga,
    .ip-destacada,
    .actualizacion-item {
        padding: 22px 18px;
    }

    .ip-box {
        padding: 16px;
    }

    .mod-item {
        align-items: stretch;
    }

    .info-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .actualizacion-fecha {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .parte1 {
        min-height: auto;
        padding-bottom: 48px;
    }

    .h1_titulo {
        padding-top: 110px;
        width: 100%;
    }

    .h2_subtitulo {
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .titulo-rangos {
        margin-bottom: 28px;
    }

    .titulo {
        font-size: 24px;
        letter-spacing: 1px;
    }

    .descripcion {
        font-size: 14px;
    }

    .badge-vip,
    .badge-vipplus,
    .badge-elite {
        top: 14px;
        right: 14px;
        padding: 6px 12px;
        font-size: 11px;
    }

    .subtitulo-seccion {
        font-size: 24px;
    }

    .texto-descripcion,
    .info-bloque p,
    .info-bloque ul li,
    .vip-beneficios li {
        font-size: 0.96rem;
        line-height: 1.7;
    }

    .vip-card {
        padding: 32px 18px;
    }

    .vip-imagen {
        width: min(160px, 100%);
    }

    .vip-titulo {
        font-size: 1.85rem;
    }

    .numero-paso {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
}

/*Perfil*/
.perfil-main {
    flex: 1 0 auto;
    display: flex;
}
.perfil-main .parte1 {
    height: auto;
    min-height: 0;
    width: 100%;
    background: transparent;
    margin: 0;
    padding: 110px 0 40px;
}
footer {
    margin-top: auto;
    flex-shrink: 0;
}
.perfil-modal .modal-content {
    background: rgba(15, 18, 28, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(10px);
}
.perfil-modal .modal-header,
.perfil-modal .modal-footer {
    border-color: rgba(255, 255, 255, 0.12);
}
.perfil-modal .btn-close {
    filter: invert(1) grayscale(100%);
}
.perfil-modal .btn-main {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.perfil-modal .modal-dialog {
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.perfil-modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}