body {
  font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
  background: linear-gradient(135deg, #f8fafc 0%, #e7f6ee 100%);
  margin: 0;
  color: #22302a;
}
header {
  background: linear-gradient(90deg, #2d6a4f 60%, #74c69d 100%);
  color: #fff;
  padding: 44px 0 26px 0;
  text-align: center;
  border-radius: 0 0 38px 38px;
  box-shadow: 0 4px 16px rgba(60,60,60,0.06);
  position: relative;
}
h1 {
  margin: 0 0 7px 0;
  font-size: 2.7em;
  letter-spacing: 1px;
  font-weight: 700;
}
.subtitle {
  font-size: 1.3em;
  margin-bottom: 13px;
  font-weight: 500;
  color: #e0f2f1;
  letter-spacing: 0.5px;
}
.lang-select {
  margin: 0 auto 20px auto;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.lang-btn {
  background: #fff;
  color: #2d6a4f;
  border: 2px solid #2d6a4f;
  border-radius: 22px;
  padding: 7px 18px;
  font-size: 1em;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 6px;
}
.lang-btn.active,
.lang-btn:hover {
  background: #38b000;
  color: #fff;
  border-color: #38b000;
  box-shadow: 0 2px 10px #38b00055;
}
.container {
  max-width: 950px;
  margin: 30px auto 40px auto;
  background: #fff;
  padding: 36px 28px;
  border-radius: 24px;
  box-shadow: 0 2px 32px rgba(60,60,60,0.11);
  position: relative;
}
.photos-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 30px 0 16px 0;
}
.photo-slot {
  flex: 1 1 180px;
  max-width: 220px;
  height: 140px;
  background: #e3f2fd url('https://placehold.co/340x210?text=FOTO') center center/cover no-repeat;
  border-radius: 18px;
  box-shadow: 0 2px 18px rgba(60,60,60,0.09);
  border: 2.5px solid #74c69d;
  transition: transform 0.18s;
  overflow: hidden;
}
.photo-slot:hover {
  transform: scale(1.04) rotate(-1deg);
  border-color: #38b000;
}
.oferta-exclusiva {
  background: #ffe066;
  color: #474747;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 1.19em;
  letter-spacing: .5px;
  box-shadow: 0 2px 8px #ffd70033;
}
.mensaje-tours {
  color: #087c78;
  font-size: 1.14em;
  text-align: center;
  margin-bottom: 21px;
  font-weight: bold;
  letter-spacing: 0.3px;
}
h2 {
  font-size: 1.7em;
  font-weight: 700;
  color: #245953;
  margin-top: 0;
  margin-bottom: 12px;
  text-align: left;
}
.maintext {
  font-size: 1.05em;
  color: #555;
  margin-bottom: 25px;
  line-height: 1.6;
}
.benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 28px 0 18px 0;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.6,0.4,0.2,1.1);
}
.benefits.visible { opacity: 1; transform: none; }
.benefit {
  flex: 1 1 200px;
  min-width: 180px;
  background: #e9f5ef;
  padding: 16px 12px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 1px 12px #b7e4c7aa;
  font-size: 1em;
  font-weight: 500;
}
.benefit strong {
  font-size: 1.09em;
  color: #38b000;
  margin-bottom: 6px;
  display: block;
  font-weight: 700;
}
.cta {
  background: linear-gradient(90deg, #2d6a4f 60%, #38b000 100%);
  color: #fff;
  padding: 23px 10px 19px 10px;
  border-radius: 16px;
  text-align: center;
  margin: 34px 0 28px 0;
  box-shadow: 0 2px 24px #38b00022;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.6,0.4,0.2,1.1);
}
.cta.visible { opacity: 1; transform: none; }
.cta h3 { margin: 0 0 8px 0; font-size: 1.32em; }
.cta button {
  background: #ffe066;
  color: #22703f;
  font-size: 1.18em;
  font-weight: bold;
  border: none;
  padding: 13px 40px;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 1px 10px #ffe06677;
}
.cta button:hover { background: #fff; color: #38b000; }
.form {
  background: #f6f6f6;
  padding: 18px 18px 10px 18px;
  border-radius: 16px;
  max-width: 490px;
  margin: 0 auto 12px auto;
  box-shadow: 0 1px 14px #74c69d26;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.6,0.4,0.2,1.1);
}
.form.visible { opacity: 1; transform: none; }
.form label {
  display: block;
  margin: 11px 0 4px;
  font-size: 1em;
  color: #355c4f;
  font-weight: 600;
}
.form input, .form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 13px;
  border-radius: 8px;
  border: 1.3px solid #b7e4c7;
  font-size: 1em;
  font-family: inherit;
  background: #f4fff6;
  transition: border-color 0.2s;
}
.form input:focus, .form select:focus {
  border-color: #38b000;
  outline: none;
}
.form button {
  background: #38b000;
  color: #fff;
  padding: 12px 0;
  border: none;
  border-radius: 9px;
  font-size: 1.1em;
  width: 100%;
  margin-top: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 1px 12px #38b00033;
  transition: background 0.2s, color 0.2s;
}
.form button:hover {
  background: #245953;
  color: #ffe066;
}
.form-message {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}
.testimonios {
  margin: 34px 0 18px 0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.6,0.4,0.2,1.1);
}
.testimonios.visible { opacity: 1; transform: none; }
.testimonios h4 {
  text-align: center;
  margin-bottom: 12px;
  color: #245953;
  font-size: 1.2em;
  letter-spacing: 0.5px;
}
.testimonios-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.testimonio {
  background: #e3f2fd;
  border-left: 6px solid #38b000;
  border-radius: 13px;
  padding: 16px;
  font-style: italic;
  box-shadow: 0 2px 12px #b7e4c755;
  max-width: 330px;
  min-width: 180px;
}
.testimonio span { display:block; font-style: normal; font-weight:bold; color:#22703f; margin-top:5px;}
.faq {
  margin: 38px 0 18px 0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.6,0.4,0.2,1.1);
}
.faq.visible { opacity: 1; transform: none; }
.faq h4 {
  text-align: center;
  margin-bottom: 16px;
  color: #245953;
  font-size: 1.18em;
}
.faq-list { max-width:600px; margin:0 auto;}
.faq-item { margin-bottom:10px; }
.faq-question {
  width: 100%;
  background: #e9f5ef;
  border: none;
  border-radius: 10px;
  text-align: left;
  padding: 13px 18px;
  font-size: 1.05em;
  color: #245953;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
  outline: none;
  margin-bottom: 3px;
  box-shadow: 0 1px 6px #b7e4c733;
}
.faq-question.open, .faq-question:hover {
  background: #38b000;
  color: #fff;
}
.faq-answer {
  display: none;
  background: #f8fafc;
  border-radius: 0 0 10px 10px;
  color: #355c4f;
  padding: 12px 16px 11px 28px;
  font-size: .98em;
  box-shadow: 0 1px 6px #b7e4c722;
}
footer {
  text-align: center;
  color: #6c757d;
  padding: 22px 0 10px 0;
  font-size: 1em;
  margin-top: 40px;
  background: #e9f5ef;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -1px 10px #b7e4c722;
}
.whatsapp-float {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 50;
  width: 55px;
  height: 55px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 2px 10px #38b00055;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.whatsapp-float:hover { background: #38b000; }
.whatsapp-float img { width: 34px; height: 34px; }
.call-float {
  position: fixed;
  right: 26px;
  bottom: 96px;
  z-index: 50;
  width: 48px;
  height: 48px;
  background: #38b000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px #38b00055;
  transition: background 0.2s;
}
.call-float:hover { background: #245953; }
.call-float img { width: 28px; height: 28px; }
.whatsapp-inline { color: #25d366; font-weight:bold; }
@media (max-width: 1000px) {
  .container { max-width: 99vw; padding: 10px;}
}
@media (max-width: 720px) {
  .container { padding: 7vw 1vw; }
  .photos-row { flex-direction: column; gap: 18px;}
  .photo-slot { max-width: 100%; height: 120px;}
  .benefits { flex-direction: column; gap: 16px;}
  .testimonios-list { flex-direction: column; }
}
a { color: #38b000; text-decoration: underline; }
a:hover { color: #245953; }