:root {
	--cancha: #14532d;
	--cesped: #1f7a3f;
	--tiza: #f7f5ef;
	--amarilla: #f5c518;
	--roja: #c8372d;
	--texto: #1c1f1d;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Barlow", Arial, sans-serif;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--texto);
	background: var(--tiza);
}

h1, h2, h3 {
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	line-height: 1.1;
	margin: 0 0 0.6rem;
}
h1 { font-size: 3rem; }
h2 { font-size: 2rem; color: var(--cancha); }

a { color: var(--cesped); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--amarilla);
	outline-offset: 2px;
}

header {
	background: var(--cancha);
	color: var(--tiza);
	border-bottom: 5px solid var(--amarilla);
	padding: 0.8rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
.logo {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--amarilla);
	text-decoration: none;
}
nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
nav a {
	display: block;
	padding: 0.4rem 0.9rem;
	color: var(--tiza);
	text-decoration: none;
	border-radius: 4px;
}
nav a:hover { background: var(--cesped); }
nav a[aria-current="page"] { background: var(--amarilla); color: var(--texto); font-weight: 700; }

main { max-width: 1000px; margin: 0 auto; padding: 1.5rem; }
section { margin-bottom: 2.5rem; }

.portada {
	background: repeating-linear-gradient(90deg, var(--cancha) 0 60px, var(--cesped) 60px 120px);
	color: var(--tiza);
	border-radius: 8px;
	padding: 2.5rem 1.5rem;
}
.portada h1 { color: var(--tiza); }
.portada p { max-width: 60ch; }

.boton {
	display: inline-block;
	background: var(--amarilla);
	color: var(--texto);
	font: inherit;
	font-weight: 700;
	padding: 0.6rem 1.4rem;
	border: 0;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
}
.boton:hover { background: #ffdb4d; }

/* Tema integrado: CSS Grid */
.tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem;
}
.tarjeta {
	background: #fff;
	border-left: 6px solid var(--amarilla);
	border-radius: 4px;
	padding: 1rem;
}
.tarjeta h3 { color: var(--cancha); font-size: 1.6rem; }
.tarjeta p { margin: 0.2rem 0; }
.precio { font-family: "Barlow Condensed", sans-serif; font-size: 2rem; font-weight: 700; color: var(--roja); }

.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; }
caption { text-align: left; padding: 0.5rem 0; font-weight: 700; color: var(--cancha); }
th, td { padding: 0.6rem 0.8rem; text-align: left; white-space: nowrap; }
thead th { background: var(--cancha); color: var(--tiza); }
tbody tr:nth-child(even) { background: #eaf3ec; }
td.num, th.num { text-align: right; }
.destacado { font-weight: 700; color: var(--roja); }
.nota { font-size: 0.95rem; }

form { background: #fff; border-radius: 8px; padding: 1.5rem; }
fieldset { border: 2px solid var(--cesped); border-radius: 6px; margin: 0 0 1.2rem; padding: 1rem; }
legend { font-weight: 700; color: var(--cancha); padding: 0 0.4rem; }
label { display: block; margin-top: 0.8rem; font-weight: 600; }
input[type="text"], input[type="email"], input[type="number"],
input[type="date"], select, textarea {
	width: 100%;
	font: inherit;
	padding: 0.5rem;
	border: 2px solid #9db8a5;
	border-radius: 4px;
}
input:invalid:not(:placeholder-shown), select:invalid:not(:focus) { border-color: var(--roja); }
.opcion { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }

footer {
	background: var(--cancha);
	color: var(--tiza);
	padding: 1.2rem 1.5rem;
	font-size: 0.95rem;
	border-top: 5px solid var(--amarilla);
}
footer p { max-width: 1000px; margin: 0.3rem auto; }

@media (max-width: 600px) {
	h1 { font-size: 2.3rem; }
	header { flex-direction: column; align-items: flex-start; }
	main { padding: 1rem; }
	th, td { padding: 0.5rem; }
}