/* === Estilos de Navegación === */
.ebook-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 5%;
  margin-top: 40px;
  border-top: 1px solid #ddd;
  flex-wrap: wrap; /* Permite que los botones pasen a la siguiente línea si no caben */
}

.nav-button {
  background-color: #007ACC;
  color: white !important; /* !important para asegurar que sobreescriba otros estilos */
  padding: 6px 11px; /* Reducido ~30% adicional (era 8px 15px) */
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  min-width: 55px; /* Reducido ~30% adicional (era 75px) */
  text-align: center;
  margin: 5px; /* Espacio alrededor de cada botón */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.3s;
}

.nav-button:hover {
  background-color: #005A9C;
  text-decoration: none !important; /* Evita subrayado al pasar el ratón */
}

/* === Estilos de Ancho de Contenido === */
body {
  font-family: 'Segoe UI', sans-serif;
  background: #fefefe;
  color: #2a2a2a;
  line-height: 1.7;
  padding: 5%; /* Usa porcentaje para adaptarse a cualquier pantalla */
  max-width: 100%; /* Asegura que no se exceda del ancho de pantalla */
  width: 100%; /* Ocupa todo el ancho disponible */
  box-sizing: border-box; /* Incluye padding y borde en el ancho total */
  margin: 0 auto; /* Centra el contenido si hay un max-width definido en otro lugar */
}

/* Ajustar contenedores principales */
div, section, article, main {
  width: 100%; /* Ocupan el ancho completo del contenedor padre */
  max-width: 100%; /* No más anchos fijos */
  box-sizing: border-box;
}

/* Imágenes Responsivas */
img {
  max-width: 100%; /* La imagen nunca será más ancha que su contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Evita espacio extra debajo de la imagen */
  margin: 20px auto; /* Centra la imagen y añade espacio vertical */
}

/* === Logo Styles === */
.company-logo {
  max-width: 200px; /* Aumentado ~35% desde 150px base */
  height: auto;
  display: block; /* Asegura comportamiento consistente */
  margin: 20px auto; /* Centrado y con espacio vertical */
}


/* Legibilidad de Listas */
ul, ol {
  padding-left: 20px; /* Añade sangría a las listas */
  margin-bottom: 20px;
}

li {
  margin-bottom: 10px; /* Espacio entre elementos de la lista */
}

/* Listas Anidadas */
li ul, li ol {
  margin-top: 10px; /* Espacio antes de una lista anidada */
}

/* === Estilos de Tipografía Responsiva === */
h1 {
  font-size: clamp(1.5rem, 5vw, 2rem); /* Tamaño adaptable: min, preferido, max */
  line-height: 1.3;
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

p, li {
  font-size: clamp(0.95rem, 3vw, 1rem); /* Texto principal adaptable */
  line-height: 1.6;
}

/* === Media Queries para Móviles === */
@media (max-width: 480px) {
  .ebook-navigation {
    flex-direction: column; /* Apila los botones verticalmente */
    width: 100%; /* Ocupa todo el ancho */
    align-items: center; /* Centra los botones apilados */
  }
  
  .nav-button {
    /* --- AJUSTE MÓVIL: Botones menos anchos --- */
    width: 80%; /* Reducido desde 90% para que no dominen tanto */
    margin: 8px 0; /* Más espacio vertical entre botones */
    padding: 8px 0; /* Reducido ~30% adicional (era 11px 0) */
  }

  /* --- AJUSTE MÓVIL: Mejorar legibilidad del contenido --- */
  /* Aplica esta clase al contenedor principal del texto en tus HTML */
  .content-area { 
    max-width: 95%; /* Evita líneas de texto excesivamente largas */
    margin-left: auto;
    margin-right: auto;
  }

  ul, ol {
    padding-left: 15px; /* Reduce la sangría de las listas en móviles */
  }
  /* --- Fin Ajustes Legibilidad --- */

  /* Ajustes adicionales para móviles si son necesarios */
  body {
    padding: 3%; /* Menos padding en pantallas muy pequeñas */
  }

  h1 {
     font-size: clamp(1.4rem, 6vw, 1.8rem); /* Ajuste fino para móviles */
  }

   h2 {
     font-size: clamp(1.1rem, 5vw, 1.5rem);
  }

   p, li {
     font-size: clamp(0.9rem, 4vw, 1rem);
  }
}