/*
  Custom stylesheet for the Vía Dulce Equilibrio landing page.  
  This file defines a fresh, modern design using a palette inspired by
  the Mediterranean. The page makes heavy use of CSS variables for
  easy theme adjustments and uses responsive layouts so that the
  content looks great on mobile, tablet and desktop.  
*/

/* Colour palette */
:root {
  --colour-primary: #205072;      /* deep teal */
  --colour-secondary: #32908F;    /* ocean teal */
  --colour-tertiary: #F28705;     /* burnt orange */
  --colour-accent: #DE7A86;       /* blush pink */
  --colour-background: #F7F5E6;   /* soft off‑white */
  --colour-dark: #2E4057;         /* dark slate for headlines */
  --colour-text: #34495E;         /* dark blue‑grey for body text */
  --max-width: 1100px;
  --transition-fast: 0.2s ease;
}

/* Global resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: var(--colour-text);
  background: var(--colour-background);
  overflow-x: hidden;
}

a {
  color: var(--colour-tertiary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--colour-accent);
}

header {
  background: var(--colour-primary);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.nav h1 {
  font-size: 1.5rem;
  color: #fff;
}
.nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.nav ul li a {
  color: #fff;
  font-weight: bold;
  font-size: 0.95rem;
  transition: opacity var(--transition-fast);
}
.nav ul li a:hover {
  opacity: 0.7;
}

/* Hero section */
.hero {
  position: relative;
  background: url('hero.png') no-repeat center/cover;
  color: #fff;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(32, 80, 114, 0.5);
  /* overlay gradient to improve contrast */
}
.hero-content {
  position: relative;
  text-align: center;
  max-width: 700px;
}
.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #fff;
}
.hero p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #fdfdfd;
}
.hero .btn {
  background: var(--colour-tertiary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.hero .btn:hover {
  background: var(--colour-accent);
}

/* Section general styles */
section {
  padding: 4rem 0;
}
section h3 {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--colour-dark);
  font-size: 2rem;
}

/* Pilares section */
.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.pilar {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-fast);
}
.pilar:hover {
  transform: translateY(-5px);
}
.pilar h4 {
  margin-bottom: 1rem;
  color: var(--colour-primary);
  font-size: 1.3rem;
}
.pilar p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* Articles section */
.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.article {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
  transition: transform var(--transition-fast);
}
.article:hover {
  transform: translateY(-4px);
}
.article h4 {
  margin-bottom: 1rem;
  color: var(--colour-secondary);
  font-size: 1.4rem;
}
.article p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* Historia and Entrevista */
.historia, .entrevista {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
  margin-bottom: 2rem;
}
.historia h4, .entrevista h4 {
  color: var(--colour-tertiary);
  margin-bottom: 1rem;
  font-size: 1.4rem;
}
.historia p, .entrevista p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.qa {
  margin-bottom: 1.5rem;
}
.qa strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--colour-primary);
  font-weight: bold;
}

/* FAQ */
.faq {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}
.faq-item {
  margin-bottom: 1.5rem;
}
.faq-item h4 {
  font-size: 1.1rem;
  color: var(--colour-primary);
  margin-bottom: 0.5rem;
}
.faq-item p {
  font-size: 0.95rem;
}

/* Testimonials */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.testimonial {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
  position: relative;
}
.testimonial::before {
  content: '“';
  font-size: 3rem;
  color: var(--colour-accent);
  position: absolute;
  top: -10px;
  left: 10px;
}
.testimonial h4 {
  color: var(--colour-secondary);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.testimonial p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Forms */
.form-section {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
  margin-bottom: 2rem;
}
.form-section h4 {
  margin-bottom: 1rem;
  color: var(--colour-primary);
  font-size: 1.4rem;
}
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
}
.form-group textarea {
  resize: vertical;
  min-height: 120px;
}
.checkbox-group {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.checkbox-group input {
  margin-right: 0.5rem;
  margin-top: 4px;
}
.form-section button {
  background: var(--colour-tertiary);
  color: #fff;
  border: none;
  padding: 0.8rem 1.6rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.form-section button:hover {
  background: var(--colour-accent);
}

/* About section */
.about {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}
.about h4 {
  margin-bottom: 1rem;
  color: var(--colour-secondary);
  font-size: 1.4rem;
}
.about p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.about ul {
  list-style: none;
  padding-left: 0;
}
.about ul li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
.about ul li span {
  margin-left: 0.5rem;
}

/* Footer */
footer {
  background: var(--colour-primary);
  color: #fff;
  padding: 1.5rem 0;
  text-align: center;
}
footer a {
  color: var(--colour-accent);
  margin: 0 0.5rem;
  font-size: 0.9rem;
}

/* Cookie bar */
#cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  z-index: 200;
}
#cookie-bar button {
  background: var(--colour-tertiary);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  margin-left: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
#cookie-bar button:hover {
  background: var(--colour-accent);
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 1.8rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .nav ul {
    flex-direction: column;
    background: var(--colour-primary);
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    display: none;
  }
  .nav ul.open {
    display: block;
  }
  .nav .menu-toggle {
    display: block;
    cursor: pointer;
    color: #fff;
    font-size: 1.5rem;
  }
  .nav h1 {
    flex: 1;
  }
}