/* =========================
   DESIGN TOKENS
========================= */

:root {
	--primary: #1f7a4d;

	--text: #2b2f33;
	--text-strong: #1f2328;

	--bg: #f2f4f6;
	--card: #ffffff;
	--border: #e6e6e6;
}

/* =========================
	GLOBAL
========================= */

html,
body {
	min-height: 100%;
}

body {
	min-height: 100vh;

	display: flex;
	flex-direction: column;

	background: var(--bg);
	color: var(--text);
}

main {
	flex: 1;
}

a {
	color: var(--primary);
	text-decoration: none;
}

a:hover {
	color: var(--primary);
	text-decoration: underline;
}

/* =========================
	HEADER
========================= */

.site-header {
	background: var(--primary);
	padding: 1.2rem 0 1rem 0;

	text-align: center;
}

/* Reescribir colores hx de pico */
.identity :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	color: white;
}

/* =========================
	NAVEGACION
========================= */

.main-navigation {
	background: var(--card);
	border-bottom: 1px solid var(--border);
}

.nav-inner {
	margin: 0 auto;
	align-items: center;
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;

	gap: 2rem;

	list-style: none;
	margin: 0;
	padding: 0.8rem 1rem;
}

.main-navigation a {
	font-weight: 500;
}

/* =========================
	PRINCIPAL
========================= */

section,
article {
	background: var(--card);
	padding: 1.25rem;
	margin-bottom: 1rem;
	border-radius: 8px;

	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

section :is(h1, h2, h3, h4, h5, h6),
article :is(h1, h2, h3, h4, h5, h6) {
	color: var(--primary);

	padding-bottom: 0.5rem;
	margin-bottom: 1rem;

	border-bottom: 1px solid var(--border);
}

p, li {
	color: var(--text);
}


/* =========================
	CARDS
========================= */

.cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;

	margin: 0 auto;
}

.card {
	background: var(--card);
	padding: 2rem;
	border-radius: 10px;

	text-align: center;

	box-shadow: 0 2px 12px rgba(0,0,0,0.08);

	/* Eliminamos el transform de aquí para que la base sea estable */
	transition: transform 0.15s ease, box-shadow 0.15s ease;

	text-decoration: none;
}

/* hover */
.card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* =========================
	FOOTER
========================= */

footer {
	text-align: center;
	color: #666;
	padding: 2rem 0;
}


/* =========================
	Publicaciones
========================= */

section.publication-list article :is(h4, h5, h6) {
	color: var(--text);
	font-size: 1.15rem;
	font-weight: 500;

	padding-bottom: 0.5rem;
	margin-bottom: 0.25rem;

	border-bottom: 1px solid var(--border);
}

/* =========================
	RESPONSIVE
========================= */

@media (max-width: 700px) {
  .cards {
    grid-template-columns: 1fr;
  }
}