/*
  Pilldomatch website styles

  These styles define the look and feel of the Pilldomatch prototype.
  The palette uses shades of green to evoke an ecological feel. The
  typography sticks to system fonts to avoid loading large web fonts
  which reduces network traffic and lowers the site's carbon footprint.
*/

:root {
  /*
    Paleta institucional basada en el logo de Pilldomatch.
    Se ha sustituido el verde predominante por tonos púrpura y verde
    que reflejan la identidad corporativa del emprendimiento.
  */
  --primary: #7A4EB4; /* púrpura principal para títulos y enlaces activos */
  --secondary: #D4C6E9; /* púrpura claro para resaltados */
  --accent: #6BC47A; /* verde para estados hover y botones */
  --text-color: #333333; /* dark grey for body text */
  --background: #FAFAFA; /* off‑white background */
  --max-width: 1200px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.5;
}

header {
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.5rem 1rem;
}

nav a.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary);
  text-decoration: none;
}

/* Ajuste de la imagen del logotipo */
.logo-img {
  height: 40px;
  width: auto;
  display: block;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

nav ul li a {
  color: var(--text-color);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  transition: background 0.2s ease;
}

nav ul li a:hover {
  background: var(--secondary);
  color: var(--primary);
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 3rem 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero .text {
  flex: 1 1 400px;
  padding-right: 2rem;
}

.hero h1 {
  font-size: 2.5rem;
  color: var(--primary);
  margin: 0 0 1rem;
}

.hero p {
  margin-bottom: 1rem;
}

.hero .cta-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero .cta-button {
  background: var(--primary);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease;
}

.hero .cta-button:hover {
  background: var(--accent);
}

.hero img {
  flex: 1 1 300px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 1rem;
}

section {
  padding: 2rem 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

h2 {
  color: var(--primary);
  margin-bottom: 1rem;
  font-size: 2rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.card {
  flex: 1 1 calc(33.333% - 2rem);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.card h3 {
  margin-top: 0;
  color: var(--primary);
}

.card ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.card p {
  margin-bottom: 1rem;
}

form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.3rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

button[type="submit"] {
  background: var(--primary);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}

button[type="submit"]:hover {
  background: var(--accent);
}

footer {
  background: var(--primary);
  color: #ffffff;
  padding: 2rem 1rem;
}

/* Nota de sostenibilidad en el pie de página */
.sustainability-note {
  font-size: 0.8rem;
  margin-top: 1rem;
}
.sustainability-note a {
  color: #ffffff;
  text-decoration: underline;
}

footer .footer-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

footer .footer-column {
  flex: 1 1 200px;
}

footer a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
}

footer a:hover {
  text-decoration: underline;
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;
  }
  nav ul {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .hero {
    flex-direction: column-reverse;
    text-align: center;
  }
  .hero .text {
    padding-right: 0;
  }
}