/* ── Reset & Base ──────────────────────────────── */
html {
	font-size: 62.5%;
	box-sizing: border-box;
	scroll-behavior: smooth;
}
*, *:before, *:after {
	box-sizing: inherit;
}
/* ── Background ─────────────────────────── */
body {
	background: #0e0e0e;
	color: #ffffff ;
	margin-bottom: 2rem;
	font-family:  sans-serif;
}
/* ── Headers ─────────────────────────── */
h1 {
	font-size: 3.8rem;
	text-align: center;
	color: #9448BC;/*Color amatista*/
	padding-top: 3rem;
}
h2 {
	font-size: 3.3rem;
	text-align: center;
	color: #480355;/*Color amatista oscuro*/
	padding-top: 3rem;
}
h3 {
	font-size: 3rem;
	text-align: left;
	color: #9CA3DB;/*Color hielo seco*/
	padding-top: 3rem;
	padding-left: 1.6rem;
}
h4 {
	font-size: 2.8rem;
	text-align: left;
	color: #677DB7;/*Color indigo-crepúsculo*/
	padding-top: 3rem;
	padding-left: 1.6rem;
}
/* ── Portada ─────────────────────────────── */
.portada {
	width: 35%;
	height: 35%;
	padding: 1.3rem 0 1.3rem 0;
	display: block;
	margin: auto;
}
.imagenseccion {
	width: 25%;
	height: 5%;
	padding: 1.3rem 0 1.3rem 0;
	display: block;
	margin: auto;
}
/* ── Sección de navegación ─────────────────────────────── */
div {
	text-align: center;
}
ul {
	display: inline-block;
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	overflow: hidden;
}
li {
  	float: left;
  	font-size: 2.2rem;
	display: block;
  	margin: auto;
  	padding: 9px;

}
.seccion{
	font-size: 2.5rem;
	color: #1C7C54;
	text-decoration: none;
}
.seccion:hover{
	color: #31D843;
}
.listablogs {
	display: flex;
	flex-direction: column;
}
/* ── Texto ─────────────────────────────── */
p {
	font-size: 1.8rem;
	padding: 0.8rem 5.2rem;
	text-align: justify;
}
.link {
	font-style: oblique;
	color: #FAB2EA;/*rosa paleta*/
}
.link:hover {
	color: #830A48;/*frutos*/
}
span {
	color: #52FFB8;/*tundra tropical*/
}
.quote {
	font-style: oblique;
	color: #70EE9C;
}
/* ── Media Queries ─────────────────────────────── */
@media (max-width: 480px) {
	h1 {
		font-size: 2.6rem;
		padding: 1rem 1.5rem 0.5rem;
	}
	h2, h3, h4 {
		font-size: 1.9rem;
		text-align: center;
		padding: 0.5rem 1.5rem;
		margin-left: 0;
		border-left: none;
	}
	.portada {
		width: 60%;
	}
	.imagenseccion {
		width: 45%;
	}
	p, .link {
		font-size: 1.35rem;
	}
	.item {
		font-size: 1.35rem;
		padding: 0.3rem 2rem;
	}
	.codigo {
		font-size: 1.2rem;
		padding: 1rem 1.2rem;
		margin: 0.8rem 1.5rem;
	}
	nav {
		flex-direction: column;
		align-items: center;
		padding: 1rem 1.5rem;
	}
	.seccion {
		font-size: 1.8rem;
		padding: 0.7rem 2rem;
		width: 100%;
		text-align: center;
	}
	ul {
		display: flex;
		flex-direction: column;
	}
	.listablogs {
		align-items: flex-start;
		padding: 0.5rem 1rem;
	}
}