:root {
  --primary-color: #403F6F;
  --secondary-color: #C70039;
  --accent-color: #FF7F50;
  --background-color: #FAF3E0;
  --text-color: #1B1B1B;
  --header-bg: #403F6F;
  --header-text: #FAF3E0;
  --dropdown-bg: #5A5C85;
  --dropdown-text: #FAF3E0;
  --hover-color: #B85D0D;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; background: var(--background-color); color: var(--text-color); line-height: 1.8; }

/* HEADER */
header { 
  background: var(--header-bg); 
  height: 60px; 
  padding: 0 1.5rem; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  position: fixed; 
  top: 0; 
  width: 100%; 
  z-index: 1000; 
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.menu-toggle { 
  background: transparent; 
  border: none; 
  cursor: pointer; 
  display: flex; 
  flex-direction: column; 
  gap: 5px; 
  position: relative;
  z-index: 1100;
}
.menu-toggle span { 
  display: block; 
  width: 30px; 
  height: 3px; 
  background-color: var(--header-text); 
  border-radius: 3px; 
  transition: 0.4s; 
}
.menu-toggle:hover span { background-color: var(--hover-color); }

nav.dropdown { 
  position: fixed; 
  top: 60px; 
  left: -300px; 
  width: 300px; 
  background: var(--dropdown-bg); 
  box-shadow: 4px 0 8px rgba(0,0,0,0.2); 
  border-radius: 0 6px 6px 0; 
  overflow: hidden; 
  transition: left 0.4s ease-in-out;
}
nav.dropdown.open { left: 0; }
nav.dropdown a { 
  display: block; 
  padding: 1.2rem; 
  color: var(--dropdown-text); 
  text-decoration: none; 
  font-weight: 500; 
  transition: background-color 0.3s, transform 0.3s; 
}
nav.dropdown a:hover { 
  background-color: var(--hover-color); 
  transform: translateX(10px);
}

/* MAIN CONTAINER */
main.container { 
  margin-top: 80px; 
  max-width: 800px; 
  margin-left: auto; 
  margin-right: auto; 
  padding: 2.5rem; 
  background: #FFFFFF; 
  box-shadow: 0 6px 12px rgba(0,0,0,0.1); 
  border-radius: 15px; 
  text-align: center; 
  border: 2px solid var(--accent-color);
}

h1 { 
  color: var(--primary-color); 
  font-family: 'Roboto Slab', serif;
  font-size: 2.5rem; 
  margin-bottom: 1.5rem; 
}

/* PROMO BOX STYLING */
.promo-box {
  background: linear-gradient(to right, var(--primary-color), var(--dropdown-bg));
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-align: center;
  border: 2px solid var(--accent-color);
}

.promo-box p {
  color: var(--header-text);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.promo-box .cta-link {
  background: var(--accent-color);
  margin-top: 1rem;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
}

p { 
  margin-bottom: 1.5rem; 
  font-size: 1.1rem; 
  text-align: justify; 
}

.cta-link { 
  display: inline-block; 
  background: var(--accent-color); 
  color: #FFFFFF; 
  padding: 1rem 2rem; 
  border-radius: 10px; 
  text-decoration: none; 
  font-weight: 600; 
  transition: background 0.3s, transform 0.3s; 
}
.cta-link:hover { 
  background: var(--hover-color); 
  transform: scale(1.05);
}

table {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: collapse;
}
th, td {
  padding: 1rem;
  border: 1px solid var(--secondary-color);
  text-align: center;
}
th {
  background-color: var(--primary-color);
  color: var(--header-text);
}
td a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
}
td a:hover {
  color: var(--hover-color);
  text-decoration: underline;
}

/* FOOTER */
footer { 
  margin-top: 3rem; 
  text-align: center; 
  font-size: 0.9rem; 
  padding: 2rem; 
  background: var(--header-bg); 
  color: var(--header-text); 
  box-shadow: 0 -4px 6px rgba(0,0,0,0.1);
}
footer a { 
  color: var(--hover-color); 
  text-decoration: none; 
  font-weight: bold; 
}
footer a:hover { 
  text-decoration: underline; 
}

@media (max-width: 768px) {
  main.container { padding: 1.5rem; margin: 1rem; }
  h1 { font-size: 2rem; }
  .promo-box { padding: 1rem; }
  .promo-box p { font-size: 1rem; }
}