/* VARIABLES DE COLOR HOLÍSTICO */
:root {
  --color-bg: #F5F3F0;
  --color-primary: #7FB77E;
  --color-secondary: #9F86C0;
  --color-accent: #F7B267;
  --color-text: #333333;
}

/* RESET */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Inter', sans-serif; }
body { background-color: var(--color-bg); color: var(--color-text); line-height:1.6; }

/* HEADER */
.header { background:#fff; padding:1rem 0; border-bottom:2px solid var(--color-secondary); position:sticky; top:0; z-index:1000; }
.header .container { display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; padding:0 1rem; }
.logo img { height:50px; }
.logo span { margin-left:0.5rem; font-weight:bold; color:var(--color-secondary); }
.nav a { margin-left:1rem; text-decoration:none; color:var(--color-text); font-weight:500; }
.btn-whatsapp { background:var(--color-primary); color:#fff; padding:0.5rem 1rem; border-radius:25px; text-decoration:none; }

/* MOBILE MENU */
.mobile-menu { display:none; flex-direction:column; background:#fff; border-top:1px solid var(--color-secondary); padding:1rem; }
.mobile-menu.open { display:flex; }
.mobile-menu a { margin-bottom:0.5rem; }

/* HERO */
.hero { padding:4rem 0; }
.hero-grid { display:flex; flex-wrap:wrap; align-items:center; max-width:1200px; margin:0 auto; }
.hero-text { flex:1; min-width:280px; }
.hero-text h1 { font-size:2.5rem; margin-bottom:1rem; }
.hero-text .primary-color { color: var(--color-primary); }
.hero-text p { font-size:1.1rem; margin-bottom:1.5rem; }
.hero-buttons a { margin-right:1rem; text-decoration:none; padding:0.7rem 1.5rem; border-radius:25px; font-weight:600; }
.btn-primary { background:var(--color-primary); color:#fff; }
.btn-secondary { background:#fff; border:2px solid var(--color-secondary); color:var(--color-secondary); }
.btn-accent { background:var(--color-accent); color:#333; }

/* HERO IMAGE */
.hero-image { flex:1; min-width:280px; text-align:center; }
.hero-image img { max-width:100%; border-radius:20px; }

/* TERAPIAS */
.terapias { padding:3rem 0; }
.terapias h2 { font-size:2rem; color:var(--color-secondary); margin-bottom:1rem; text-align:center; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:1rem; margin-top:2rem; }
.card { background:#fff; padding:1.5rem; border-radius:20px; border:1px solid var(--color-secondary); text-decoration:none; color:var(--color-text); transition:0.3s; }
.card:hover { box-shadow:0 5px 20px rgba(0,0,0,0.1); transform:translateY(-5px); }

/* CTA */
.cta { background:var(--color-secondary); color:#fff; padding:3rem 1rem; text-align:center; }
.cta a { margin-top:1rem; display:inline-block; background:var(--color-primary); color:#fff; padding:0.8rem 2rem; border-radius:25px; text-decoration:none; }

/* CONTACTO */
.contacto { padding:3rem 1rem; }
.contacto h1 { color: var(--color-secondary); text-align: center; margin-bottom: 1rem; }
.contacto p { text-align: center; margin-bottom: 2rem; }
.contact-form { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; }
.contact-form label { margin-top: 1rem; margin-bottom: 0.5rem; font-weight: 500; }
.contact-form input,
.contact-form textarea { padding: 0.8rem 1rem; border-radius: 10px; border: 1px solid var(--color-secondary); }
.contact-form button { margin-top: 1.5rem; }

/* FOOTER */
.footer { background:#fff; border-top:2px solid var(--color-secondary); padding:2rem 1rem; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; max-width:1200px; margin:0 auto; }
.footer h3,h4 { color:var(--color-secondary); margin-bottom:0.5rem; }
.footer ul { list-style:none; }
.footer ul li a { color:var(--color-text); text-decoration:none; }
.footer-bottom { margin-top:2rem; text-align:center; font-size:0.9rem; color:#666; }
.descargas {
  padding: 3rem 1rem;
}
.descargas h1 {
  color: var(--color-secondary);
  text-align: center;
  margin-bottom: 1rem;
}
.descargas p {
  text-align: center;
  margin-bottom: 2rem;
}
.download-section {
  background: #fff;
  padding: 1.5rem;
  border-radius: 20px;
  margin-bottom: 2rem;
  border: 1px solid var(--color-secondary);
}
.download-section h2 {
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.download-section ul {
  list-style: none;
}
.download-section ul li a {
  text-decoration: none;
  color: var(--color-text);
  padding: 0.5rem 0;
  display: inline-block;
  transition: 0.3s;
}
.download-section ul li a:hover {
  color: var(--color-accent);
}
.terapia-detalle {
  padding: 3rem 1rem;
}
.terapia-detalle h1 {
  text-align: center;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}
.descripcion-terapia {
  text-align: center;
  margin-bottom: 2rem;
}
.imagenes-terapia {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.imagenes-terapia img {
  max-width: 300px;
  border-radius: 20px;
  border: 1px solid var(--color-secondary);
}
.detalles-terapia h2 {
  color: var(--color-primary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.detalles-terapia ul {
  list-style: disc inside;
  margin-bottom: 1.5rem;
}
.cta-terapia {
  text-align: center;
  margin-top: 2rem;
}
.cta-terapia .btn-cta, .cta-terapia .btn-secundario {
  display: inline-block;
  margin: 0.5rem;
  padding: 0.8rem 2rem;
  border-radius: 20px;
  text-decoration: none;
  transition: 0.3s;
}
.cta-terapia .btn-cta {
  background: var(--color-primary);
  color: #fff;
}
.cta-terapia .btn-cta:hover {
  background: var(--color-accent);
}
.cta-terapia .btn-secundario {
  background: var(--color-secondary);
  color: #fff;
}
.cta-terapia .btn-secundario:hover {
  background: var(--color-accent);
}
.imagenes-terapia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.mesa img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--color-secondary);
  transition: transform 0.3s;
}
.mesa img:hover {
  transform: scale(1.05);
}
.mesa p {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #333;
}
