:root {
	--colorFondo: #F1E9DB;
	--colorH1: #131B23;
	--colorH2: #131B23;
	--colorH3: #131B23;
	--colorH4: #131B23;
	--colorLink: #ff7f11;
	--colorSpan: #2274A5;
	--colorSeccion: #131B23;
	--colorParrafo: #131B23;
	--colorItem: #131B23;
	--colorCodigo: #ff7f11;
}

html {
	font-size: 62.5%; /* 1rem = 10px */
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	font-size: 1.6rem; /* Equivalente a 16px para mejor lectura */
	font-family: 'Roboto', sans-serif;
	background: linear-gradient(70deg, var(--colorFondo), #F1E0C5, #C9B79C);
	hyphens: auto;
	margin: 0;
	line-height: 1.6;
}

/* --- Tipografía y Bloques --- */

h1, h2, h3, h4, p, .item, .codigo {
	/* Eliminamos los paddings laterales de 15rem para controlarlos globalmente */
	padding-left: 5%;
	padding-right: 5%;
	color: var(--colorH1);
}

h1 {
	font-size: 4rem;
	text-align: center;
	margin: 2rem 0;
}

h2 { font-size: 3.2rem; text-align: center; }
h3 { font-size: 2.8rem; text-align: justify; }
h4 { font-size: 2.4rem; text-align: justify; }

p {
	font-size: 1.8rem;
	color: var(--colorParrafo);
	text-align: justify;
}

span { color: var(--colorSpan); font-weight: bold; }

.item { font-size: 1.8rem; }
.codigo { 
    font-size: 1.6rem; 
    color: var(--colorCodigo); 
    background-color: rgba(0,0,0,0.05); /* Un toque visual para código */
    padding: 1rem;
    display: block;
    margin: 1rem 5%;
}

.link { color: var(--colorLink); }
.link:hover { color: var(--colorParrafo); }
/* --- Imágenes --- */

.portada, .imagenseccion {
	display: block;
	margin: 2rem auto;
	border: 0.5rem solid #000000;
	border-radius: 1rem;
	max-width: 90%; /* Asegura que no se desborde */
	height: auto;   /* Mantiene la proporción */
}

.portada { width: 60%; }
.imagenseccion { width: 40%; }

/* --- Navegación --- */

nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.seccion {
	font-size: 2rem;
	color: var(--colorSeccion);
	text-decoration: none;
	padding: 1rem;
}

.seccion:hover { color: var(--colorCodigo); text-decoration: underline; }

/* --- Media Queries para Escritorio (Pantallas grandes) --- */
@media (min-width: 768px) {
    /* Aquí aplicamos los márgenes grandes solo si hay espacio */
    h2, h3, h4, p, .item {
        padding-left: 15rem;
        padding-right: 15rem;
    }
    
    .portada { width: 45%; }
    .imagenseccion { width: 25%; }
}

/* --- Media Queries para Móviles --- */
@media (max-width: 480px) {
	h1 { font-size: 2.8rem; }
	h2 { font-size: 2.4rem; }
	h3 { font-size: 2.2rem; }
	
	p, .item, .codigo, .link {
		font-size: 1.6rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}

	nav {
		flex-direction: column;
		align-items: center;
	}

    .portada { width: 90%; }
    .imagenseccion { width: 70%; }
}