/*
  Hoja de estilos principal para el sitio "Vida Plena 45".
  Este archivo define la apariencia general de los elementos en todas
  las páginas, incluidos el encabezado, la sección principal, los
  formularios y el pie de página. Se ha seleccionado una tipografía
  legible y colores suaves para transmitir serenidad y modernidad. La
  maquetación es adaptable y responsiva, de modo que se visualice
  correctamente en diferentes tamaños de pantalla.
*/

/* Definición de fuentes y variables de color */
:root {
  --font-family: 'Segoe UI', Tahoma, sans-serif;
  --primary-color: #134e5e;
  --secondary-color: #71b280;
  --light-color: #f9f9f9;
  --dark-color: #333;
  --accent-color: #e97a3e;
}

body {
  margin: 0;
  font-family: var(--font-family);
  line-height: 1.6;
  background: var(--light-color);
  color: var(--dark-color);
}

header {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
  text-align: center;
  padding: 2rem 1rem;
}

header h1 {
  margin: 0;
  font-size: 2.2rem;
}

header p {
  margin-top: 0.5rem;
  font-size: 1.1rem;
}

/* Hero section */
.hero {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  text-align: center;
  padding: 1rem;
  box-sizing: border-box;
}

.hero h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.hero p {
  font-size: 1.1rem;
  max-width: 600px;
}

/* Artículo principal */
.article {
  padding: 2rem 1rem;
  max-width: 900px;
  margin: 0 auto;
}

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

.article p {
  margin-bottom: 1rem;
  text-align: justify;
}

/* Sección de cursos */
.courses {
  background: #fff;
  padding: 2rem 1rem;
}

.courses h2 {
  text-align: center;
  color: var(--primary-color);
  margin-bottom: 2rem;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.course {
  background: var(--light-color);
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

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

.course h3 {
  margin-top: 0;
  color: var(--secondary-color);
}

.course .price {
  font-weight: bold;
  color: var(--accent-color);
}

/* Formulario de contacto */
.contact {
  padding: 2rem 1rem;
  background: var(--light-color);
}

.contact h2 {
  text-align: center;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.contact form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.contact label {
  margin-top: 0.7rem;
  margin-bottom: 0.2rem;
  font-weight: bold;
}

.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"],
.review-form input[type="text"],
.review-form textarea {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

.contact .checkbox {
  display: flex;
  align-items: flex-start;
  margin-top: 0.8rem;
}

.contact .checkbox input {
  margin-right: 0.5rem;
  margin-top: 0.2rem;
}

.contact button {
  margin-top: 1.2rem;
  padding: 0.8rem;
  background: var(--secondary-color);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.contact button:hover {
  background: var(--primary-color);
}

/* Testimonios */
.testimonials {
  background: #fff;
  padding: 2rem 1rem;
}

.testimonials h2 {
  text-align: center;
  color: var(--primary-color);
  margin-bottom: 2rem;
}

.testimonial-list {
  max-width: 900px;
  margin: 0 auto;
}

.testimonial {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-left: 4px solid var(--secondary-color);
  background: var(--light-color);
}

.testimonial p {
  margin: 0;
}

.testimonial .author {
  margin-top: 0.5rem;
  font-style: italic;
  color: var(--primary-color);
}

/* Formulario de reseñas */
.review-form {
  padding: 2rem 1rem;
  background: var(--light-color);
  border-top: 1px solid #eee;
}

.review-form h3 {
  text-align: center;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.review-form form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.review-form button {
  margin-top: 1rem;
  padding: 0.8rem;
  background: var(--accent-color);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.review-form button:hover {
  background: var(--primary-color);
}

/* Pop-up de agradecimiento por la reseña */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.popup-content {
  background: #fff;
  padding: 2rem;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.popup-content button {
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  background: var(--secondary-color);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}

.popup-content button:hover {
  background: var(--primary-color);
}

/* Pie de página */
footer {
  background: var(--primary-color);
  color: #fff;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

footer a {
  color: #e0f5ff;
  text-decoration: underline;
}

/* Ajustes responsivos */
@media (max-width: 600px) {
  .hero h2 {
    font-size: 1.6rem;
  }
  .hero p {
    font-size: 1rem;
  }
  header h1 {
    font-size: 1.8rem;
  }
  header p {
    font-size: 1rem;
  }
}