@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); /* ¡Font Poppins! */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

:root {
  /* Tus colores y fuentes definidos - ¡ASEGÚRATE DE QUE ESTOS SEAN TUS VALORES FINALES! */
  --main-font: 'Poppins', sans-serif !important;
  --primary-color: #4f9051 !important; /* Tu verde principal (Colugo Green) */
  --secondary-color: #bcf4be !important; /* Tu verde claro (Colugo Light Green) */
  --black-color: #000000 !important; /* Fondo negro (Colugo Black) */
  --white-color: #fbfffb !important; /* Texto blanco roto (Colugo Off-White) */
  --text-light-color: var(--white-color) !important; /* Nuevo: Color de texto claro para el body y elementos */
  --description-color: var(--secondary-color) !important; /* Usar secondary para descripciones */

  /* Colores para elementos específicos */
  --red-color: #FF7C7C !important; /* Rojo para alertas de peligro */
  --card-bg: rgba(0, 0, 0, 0.6) !important; /* Fondo de tarjeta semi-transparente */
  --border-color: rgba(251, 255, 251, 0.2) !important; /* Borde suave de tarjeta */
  --input-bg: rgba(0, 0, 0, 0.3) !important; /* Fondo de input semi-transparente */
  --button-hover-darken: #3e7240 !important; /* Hover para primary-color */
  --stats-background: rgba(188, 244, 190, 0.05) !important; /* Fondo de stats, adaptar */
  --scroll-bar: rgba(188, 244, 190, 0.3) !important; /* Scrollbar, adaptar */
  --scroll-bar-hover: #555555FF !important;
}

body {
  background: var(--black-color) !important; /* FORZAR fondo negro del body */
  font-family: var(--main-font) !important; /* FORZAR Poppins */
  color: var(--text-light-color) !important; /* FORZAR color de texto global (nuevo) */
  width: 100% !important; /* Asegurar que ocupe todo el ancho */
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important; /* Resetear márgenes */
  overflow-x: hidden !important; /* Evitar scroll horizontal */
}

/* Navbar - Ocultar la navegación antigua y estilizar el logo */
.navbar {
  display: flex !important; /* Mostrar la navbar como flex para poder centrar el logo */
  width: 100% !important;
  flex-direction: column !important; /* Para centrar contenido */
  justify-content: center !important; /* Centrar verticalmente */
  align-items: center !important; /* Centrar horizontalmente */
  padding: 0 !important; /* Eliminar padding */
  background: var(--black-color) !important; /* Fondo negro para navbar */
  box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important; /* Sombra sutil */
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  position: relative !important;
  z-index: 1000 !important; /* Asegurar que esté al frente */
}

.navbar .menu-mobile {
  width: auto !important; /* Ancho automático para centrar contenido */
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
}

.navbar .menu-mobile .logo {
  display: block !important; /* Asegurar que el div del logo se comporte como bloque */
  padding: 0 !important;
  margin: 0 auto !important; /* Centrar el contenedor del logo */
  position: relative !important;
}

.navbar .menu-mobile .logo img { /* Estilo para el logo de Hoprin+ */
  max-width: 300px !important; /* Logo a 300px */
  max-height: 200px !important; /* Limitar altura para evitar estiramiento si el original es muy alto */
  height: auto !important;
  display: block !important;
  margin: 20px auto -50px auto !important; /* Margen superior para bajarlo un poco, y negativo para subir el contenido de abajo */
  object-fit: contain !important;
  z-index: 10 !important;
  position: relative !important;
  animation: none !important; /* Desactivar animaciones antiguas */
  transform: none !important;
}

.navbar .menu-mobile .logo h3, /* Ocultar el texto antiguo del logo (si existe) */
.navbar .hamburger, /* Ocultar el menú hamburguesa */
.navbar .links, /* Ocultar todos los enlaces de la navbar */
.navbar .links .link {
  display: none !important; /* FORZAR ocultación */
}


/* Footer - Estilizar y ocultar elementos antiguos */
#footer {
  background: var(--black-color) !important;
  padding: 15px 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  color: var(--secondary-color) !important;
  font-size: 0.85em !important;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.4) !important;
  margin-top: auto !important; /* Empujar al final de la página */
  font-family: var(--main-font) !important;
}

#footer p.copyright {
  margin: 0 !important;
  color: var(--secondary-color) !important;
}

#footer .social-links, #footer .server-name-footer {
  display: none !important; /* Ocultar enlaces sociales y texto del servidor */
}

/* Scrollbar (mantener de global.css, sin cambios significativos) */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--stats-background); }
::-webkit-scrollbar-thumb { background: var(--scroll-bar); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-bar-hover); }

/* Otras secciones (adaptar estilos de fondo si es necesario) */
section:not(#header) .content { /* Esto apunta a las secciones que tienen la clase content */
  background: none !important; /* Eliminar fondos de otras secciones si los tienen */
  background-color: var(--black-color) !important; /* Asegurar fondo negro */
  padding: 0 !important; /* Eliminar padding para controlar el espacio desde el #fondo1 o main-content */
  width: 100% !important;
  height: auto !important;
  display: flex !important; /* Para controlar el layout interno */
  flex-direction: column !important;
  align-items: center !important; /* Centrar el contenido */
}

/* Estilos para H2.section-title y texto-contenido general */
h2.section-title {
    font-family: var(--main-font) !important;
    font-size: 2.2em !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    text-align: center !important;
    margin-top: 40px !important; /* Margen superior para separar del logo */
    margin-bottom: 10px !important;
    position: relative !important;
}
h2.section-title::before {
    content: "" !important; position: absolute !important; bottom: -9px !important; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 150px !important; height: 1px !important;
    border-radius: 5px !important; background: var(--secondary-color) !important;
}
h2.section-title::after {
    content: "" !important;
    position: absolute !important; bottom: -10px !important; left: 50% !important;
    transform: translateX(-50%) !important; width: 50px !important; height: 3px !important;
    border-radius: 5px !important; background: var(--primary-color) !important;
}

.texto-contenido { /* Contiene la descripción y los pasos */
    color: var(--secondary-color) !important;
    font-size: 1.05em !important;
    max-width: 800px !important; /* Limitar ancho para legibilidad */
    line-height: 1.6 !important;
    text-align: center !important;
    margin: 0 auto 10px auto !important;
    font-family: var(--main-font) !important;
}

/* Estilos para los pasos numerados dentro de .texto-contenido */
.texto-contenido b { /* Número del paso (ej. 1.) */
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    font-size: 1.2em !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}
.texto-contenido br { display: none !important; } /* Ocultar <br> de la versión activa para usar flex */
.texto-contenido div[align="left"] { /* El div que envuelve los pasos */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centrar los pasos */
    justify-content: center !important;
    width: 100% !important; /* Ocupar el ancho del padre */
}
.texto-contenido div[align="left"] p { /* Texto de cada paso */
    text-align: center !important; /* Centrar el texto de los pasos */
    margin-bottom: 5px !important; /* Espacio entre pasos */
}


/* Responsive (mantener y ajustar) */
@media screen and (max-width: 867px) {
  .navbar .menu-mobile .logo img { /* Ajuste del logo en móvil */
    max-width: 300px !important;
    max-height: 200px !important;
    margin-top: 10px !important;
    margin-bottom: -50px !important; /* Ajustar para móvil */
  }
  h2.section-title { font-size: 1.8em !important; margin-top: -50px !important; }
  .texto-contenido { font-size: 1em !important; }
  section:not(#header) .content { padding: 50px 30px !important; } /* Ajustar padding general */
}
@media screen and (max-width: 480px) {
    .navbar .menu-mobile .logo img { /* Ajuste para móviles muy pequeños */
        max-width: 250px !important;
        max-height: 150px !important;
        margin-top: 5px !important;
        margin-bottom: -40px !important;
    }
    h2.section-title { font-size: 1.5em !important; margin-top: -30px !important; }
    .texto-contenido { font-size: 0.95em !important; }
}