body {
  width: 100%;
  max-width: 750px; /* Evita que el texto sea larguísimo y canse la vista en pantallas de ordenador grandes */
  margin: 0 auto;   /* Centra todo el bloque de texto en el medio de la pantalla */
  padding: 24px;    /* Deja un margen interno elegante en los bordes de la pantalla del móvil */
  box-sizing: border-box; /* Asegura que el padding no rompa el ancho del móvil */
  
  /* TIPOGRAFÍA Y DISEÑO CONFORTABLE PARA LECTURA */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Tipografía limpia y moderna */
  font-size: 17px;    /* Tamaño de letra altamente legible en pantallas móviles de cualquier gama */
  line-height: 1.65;  /* Espaciado óptimo entre líneas para que los ojos no se pierdan al leer */
  color: #1f1911;     /* Un marrón/gris muy oscuro que reduce el cansancio visual */
  background-color: #c3b091; /* Fondo sepia intenso estilo libro viejo */
  
  word-wrap: break-word; /* Evita que enlaces largos o textos rompan el diseño en Android */
}

/* ==========================================================================
   TÍTULOS Y TEXTO (MODO DIURNO)
   ========================================================================== */
h1 {
  font-size: 32px;
  line-height: 1.2;
  margin-top: 20px;
  margin-bottom: 24px;
  color: #0f0c08; /* Título principal: un tono casi negro pero cálido */
}

h2 {
  font-size: 24px;
  margin-top: 32px;
  margin-bottom: 16px;
  color: #1f1911; /* Título secundario: igual que el texto base pero resalta por su grosor */
}

p {
  margin-top: 0;
  margin-bottom: 18px; /* Crea una separación automática y natural entre tus párrafos */
  text-align: left;    /* Alineación natural a la izquierda, la más cómoda para móviles */
}

strong {
  color: #000000; /* Hace que las palabras en negrita resalten en color negro puro */
}

/* --- ENLACES PARA EL MODO SEPIA (DIURNO) --- */
a {
    color: #a04000; /* Un tono teja/cobre oscuro, muy legible en sepia */
    text-decoration: underline; /* Mantiene la línea abajo para accesibilidad */
}

a:visited {
    color: #78281f; /* Granate/vino apagado para los enlaces ya visitados */
}

a:hover {
    color: #e59866; /* Se aclara un poco cuando pasas el ratón por encima */
}

/* --- ELEMENTOS MULTIMEDIA --- */
img {
  max-width: 100%;  /* Si metes una foto, jamás se saldrá de la pantalla del móvil */
  height: auto;     /* Mantiene la proporción correcta de las imágenes */
  display: block;
  margin: 20px 0;
  transition: opacity 0.3s ease; /* Transición suave si cambia el modo */
}


/* ==========================================================================
   MODO OSCURO AUTOMÁTICO (ENTORNO NOCTURNO)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1412; /* Fondo casi negro pero con un toque sepia */
        color: #e5d1b8;            /* Texto sepia claro para que no deslumbre */
    }

    /* Adaptación de títulos y negritas para que no queden invisibles */
    h1, h2 {
        color: #f5ebd8; /* Títulos en un sepia muy claro y brillante para que contrasten bien */
    }

    strong {
        color: #ffffff; /* Las negritas pasan a ser blancas puras para resaltar en la oscuridad */
    }

    /* Enlaces adaptados para la noche */
    a {
        color: #e59866; /* Cobrizo claro, resalta muy bien sobre el fondo oscuro */
    }

    a:visited {
        color: #b9770e; /* Dorado viejo/mostaza apagado para los ya visitados */
    }

    a:hover {
        color: #f8c471; /* Un dorado más brillante al pasar el ratón */
    }

    /* Atenuación de imágenes para que no deslumbren en la oscuridad */
    img {
        opacity: 0.85; /* Reduce sutilmente el brillo general de las fotos */
    }
}