:root {
--primary-color: #4caf50;
--primary-dark-color: #2e7d32;
--background-color: #f5f7fa;
--surface-color: #ffffff;
--text-color: #333333;
--border-color: #e0e0e0;
--highlight-color: #e8f5e9;
--shadow-color: rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background-color: var(--background-color);
color: var(--text-color);
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}

/* Cabecera */

.contest-header {
padding: 40px 20px;
background: linear-gradient(
135deg,
var(--primary-color),
var(--primary-dark-color)
);
color: var(--surface-color);
text-align: center;
}

.contest-header h1 {
margin: 0;
font-size: clamp(1.6rem, 4vw, 2.2rem);
line-height: 1.2;
}

.contest-header p {
margin: 10px 0 0;
font-size: 1.2rem;
}

/* Contenido principal */

.container {
width: calc(100% - 32px);
max-width: 900px;
margin: 30px auto;
padding: 30px;
background-color: var(--surface-color);
border-radius: 10px;
box-shadow: 0 4px 10px var(--shadow-color);
}

.container h2 {
margin-top: 35px;
padding-bottom: 5px;
border-bottom: 2px solid var(--border-color);
color: var(--primary-dark-color);
font-size: 1.4rem;
}

.container h2:first-child {
margin-top: 0;
}

.container p {
margin: 12px 0;
}

.container ul {
margin: 15px 0;
padding-left: 24px;
}

.container li {
margin-bottom: 8px;
}

.container strong {
color: #222222;
}

/* Llamada a la participación */

.highlight {
margin: 35px 0 5px;
padding: 20px;
border-left: 5px solid var(--primary-color);
border-radius: 0 8px 8px 0;
background-color: var(--highlight-color);
}

.highlight h2 {
margin-top: 0;
border-bottom: 0;
}

.highlight p {
margin-bottom: 0;
}

/* Pie de página */

.contest-footer {
margin-top: 40px;
padding: 30px 20px;
background-color: var(--primary-dark-color);
color: var(--surface-color);
text-align: center;
}

.contest-footer strong {
display: block;
margin-bottom: 5px;
font-size: 1.15rem;
}

.contest-footer span {
display: block;
}

/* Adaptación para móviles */

@media (max-width: 600px) {
.contest-header {
padding: 32px 16px;
}

.container {
    width: calc(100% - 20px);
    margin: 15px auto;
    padding: 20px 16px;
    border-radius: 8px;
}

.container h2 {
    font-size: 1.25rem;
}

.highlight {
    padding: 16px;
}

.contest-footer {
    margin-top: 25px;
    padding: 25px 16px;
}
}