/* ========================================
   VIAJEROS JARDÍN - ESTILOS PRINCIPALES
   Paleta unificada "Travel / Naturaleza"
   ======================================== */

/* ----------------------------------------
   1. SISTEMA DE DISEÑO (paleta + tokens)
   ---------------------------------------- */
:root {
  /* Marca / acciones primarias */
  --brand: #1b5e4b;          /* Verde selva profundo */
  --brand-dark: #134237;     /* Hover de primario */

  /* Acento cálido */
  --accent: #e07a5f;         /* Terracota */
  --accent-dark: #c2603f;    /* Terracota legible sobre blanco */

  /* Detalle brillante */
  --gold: #f2a541;           /* Ámbar dorado */
  --gold-dark: #e08e2a;      /* Hover de dorado */

  /* Neutros */
  --cream: #fbf9f4;          /* Fondo claro */
  --ink: #1f2421;            /* Texto principal / footer */
  --ink-deep: #16201b;       /* Footer más oscuro */
  --stone: #5c6660;          /* Texto secundario */

  /* Utilitarios */
  --wa: #25d366;             /* WhatsApp (sin cambio) */
  --radius: 16px;
  --shadow-sm: 0 1px 3px rgba(31, 36, 33, 0.08);
  --shadow-md: 0 18px 40px rgba(31, 36, 33, 0.10);
}

/* ----------------------------------------
   2. BASE
   ---------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--cream);
  color: var(--ink);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

h1, h2, h3, .font-serif {
  font-family: 'Playfair Display', serif;
}

/* ----- HERO ----- */
.hero-bg {
  background: linear-gradient(rgba(19, 66, 55, .35), rgba(15, 32, 27, .65)),
  url('imagenes/tours/jardin1.jpg');
  background-size: cover;
  background-position: center;
}

/* ----- WHATSAPP FLOAT ----- */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--wa);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
  z-index: 100;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
}

/* ----------------------------------------
   3. CARDS
   ---------------------------------------- */
.card {
  background: white;
  border-radius: var(--radius);
  padding: 12px;
  border: 1px solid #ece9e1;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* ----- TROFEOS Y BADGES ----- */
.trophy-effect {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trophy-effect:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.trophy-glow {
  animation: glowPulse 2.5s infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(242, 165, 65, 0.25); }
  50% { box-shadow: 0 0 16px rgba(242, 165, 65, 0.5); }
}

.trophy-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--ink);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(31, 36, 33, 0.18);
}

/* ----- CONTENEDORES DE IMÁGENES ----- */
.tour-img-container {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #f1efe9;
  position: relative;
  border-radius: 14px;
}

.tour-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}

.card-hover:hover .tour-img-container img {
  transform: scale(1.04);
}

.product-img-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f1efe9;
}

.product-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}

.modal-img-container {
  width: 100%;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ink-deep);
}

.modal-img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
  .tour-img-container { height: 180px; }
  .product-img-container { height: 160px; }
  .modal-img-container { height: 250px; }
}

/* ----- PRODUCT CARDS ----- */
.product-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  border: 1px solid #ece9e1;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* ----------------------------------------
   4. TOURS SWIPER
   ---------------------------------------- */
.tourSwiper1,
.tourSwiper2 {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0 45px;
}

.tourSwiper1 .swiper-wrapper,
.tourSwiper2 .swiper-wrapper {
  display: flex;
}

/* Desktop: 3 tarjetas visibles */
@media (min-width: 1024px) {
  .tourSwiper1 .swiper-slide,
  .tourSwiper2 .swiper-slide {
    width: calc(33.333% - 18px) !important;
    flex-shrink: 0;
    margin-right: 24px;
  }
}

/* Tablet: 2 tarjetas visibles */
@media (min-width: 768px) and (max-width: 1023px) {
  .tourSwiper1,
  .tourSwiper2 { padding: 0 35px; }
  .tourSwiper1 .swiper-slide,
  .tourSwiper2 .swiper-slide {
    width: calc(50% - 15px) !important;
    margin-right: 20px;
  }
}

/* Móvil: tarjetas visibles */
@media (max-width: 767px) {
  .tourSwiper1,
  .tourSwiper2 { padding: 0 20px; }
  .tourSwiper1 .swiper-slide,
  .tourSwiper2 .swiper-slide {
    width: 280px !important;
    margin-right: 16px;
  }
}

/* Flechas de navegación de tours */
.tourSwiper1 .swiper-button-next,
.tourSwiper1 .swiper-button-prev,
.tourSwiper2 .swiper-button-next,
.tourSwiper2 .swiper-button-prev {
  display: flex !important;
  background: var(--brand) !important;
  color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  z-index: 30 !important;
  cursor: pointer !important;
  transition: all 0.3s ease;
}

.tourSwiper1 .swiper-button-next:hover,
.tourSwiper1 .swiper-button-prev:hover,
.tourSwiper2 .swiper-button-next:hover,
.tourSwiper2 .swiper-button-prev:hover {
  background: var(--brand-dark) !important;
  transform: scale(1.08);
}

.tourSwiper1 .swiper-button-next:after,
.tourSwiper1 .swiper-button-prev:after,
.tourSwiper2 .swiper-button-next:after,
.tourSwiper2 .swiper-button-prev:after {
  font-size: 18px !important;
  font-weight: bold !important;
}

.tourSwiper1 .swiper-button-next,
.tourSwiper2 .swiper-button-next { right: 0 !important; }

.tourSwiper1 .swiper-button-prev,
.tourSwiper2 .swiper-button-prev { left: 0 !important; }

/* Paginación */
.tourSwiper1 .swiper-pagination,
.tourSwiper2 .swiper-pagination {
  bottom: -30px !important;
  position: relative;
  margin-top: 25px;
}

.tourSwiper1 .swiper-pagination-bullet,
.tourSwiper2 .swiper-pagination-bullet {
  background: #cfd4cf;
  opacity: 1;
  width: 8px;
  height: 8px;
  transition: all 0.3s ease;
}

.tourSwiper1 .swiper-pagination-bullet-active,
.tourSwiper2 .swiper-pagination-bullet-active {
  background: var(--brand);
  width: 24px;
  border-radius: 4px;
}

/* ----------------------------------------
   5. MODALES
   ---------------------------------------- */
#tourModal,
#productModal {
  position: fixed;
  inset: 0;
  background: rgba(15, 32, 27, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

#tourModal.hidden,
#productModal.hidden {
  display: none;
}

#tourModal > div,
#productModal > div {
  background: white;
  max-width: 550px;
  width: 90%;
  max-height: 85vh;
  border-radius: 24px;
  overflow-y: auto;
  position: relative;
  margin: 20px auto;
}

#productModal > div { max-width: 650px; }

/* Botón cerrar modal */
#tourModal button.absolute,
#productModal button.absolute {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  background: rgba(15, 32, 27, 0.7);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 100;
  border: none;
  transition: all 0.3s ease;
}

#tourModal button.absolute:hover,
#productModal button.absolute:hover {
  background: var(--ink-deep);
  transform: scale(1.1);
}

.modalSwiper,
.productModalSwiper {
  width: 100%;
  overflow: hidden;
  height: 280px;
}

.modalSwiper .swiper-slide,
.productModalSwiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modalSwiper .swiper-button-next,
.modalSwiper .swiper-button-prev,
.productModalSwiper .swiper-button-next,
.productModalSwiper .swiper-button-prev {
  display: flex !important;
  background: rgba(15, 32, 27, 0.6) !important;
  color: white !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
}

.modalSwiper .swiper-button-next:after,
.modalSwiper .swiper-button-prev:after,
.productModalSwiper .swiper-button-next:after,
.productModalSwiper .swiper-button-prev:after {
  font-size: 14px !important;
  font-weight: bold !important;
}

/* ----------------------------------------
   6. TESTIMONIOS
   ---------------------------------------- */
.testimoniosSwiper {
  width: 100%;
  padding: 20px 10px 50px 10px;
  overflow: hidden !important;
}

.testimoniosSwiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.testimoniosSwiper .swiper-slide {
  height: auto !important;
}

.testimoniosSwiper .swiper-button-next,
.testimoniosSwiper .swiper-button-prev {
  display: flex !important;
  background: var(--brand) !important;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
}

.testimoniosSwiper .swiper-button-next:after,
.testimoniosSwiper .swiper-button-prev:after {
  font-size: 14px !important;
  font-weight: bold !important;
}

/* ----------------------------------------
   7. CONTADORES DE ESTADÍSTICAS
   ---------------------------------------- */
.stat-card {
  background: #fff;
  border: 1px solid #ece9e1;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.counter-wrap,
.counter {
  color: var(--brand);
}

/* ----- PAGINACIÓN SWIPER GENERAL ----- */
.swiper-pagination-bullet-active {
  background: var(--brand) !important;
}

/* ----------------------------------------
   8. FAQ
   ---------------------------------------- */
.faq-question {
  cursor: pointer;
  transition: all 0.2s ease;
}

.faq-question:hover,
.faq-question.active {
  background-color: #eef4f1;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.faq-answer.active {
  max-height: 800px;
}

.faq-question i {
  transition: transform 0.2s ease;
  font-size: 12px;
}

.faq-question.active i,
.faq-question .fa-chevron-down.rotate-180 {
  transform: rotate(180deg);
}

.faq-card {
  transition: all 0.2s ease;
}

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

/* ----------------------------------------
   9. NOTIFICACIONES
   ---------------------------------------- */
.notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 24px;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(31, 36, 33, 0.2);
}

.notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.notification-success { background: linear-gradient(135deg, #2e9e7c, var(--brand)); }
.notification-error { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* ----- PRODUCTOS SWIPER - OCULTAR FLECHAS ----- */
[class^="product-swiper-"] .swiper-button-next,
[class^="product-swiper-"] .swiper-button-prev,
.product-card .swiper-button-next,
.product-card .swiper-button-prev {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.product-card .swiper-pagination {
  display: flex !important;
  bottom: 10px !important;
}

.product-card .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.7) !important;
}

.product-card .swiper-pagination-bullet-active {
  background: var(--gold) !important;
}

/* ----------------------------------------
   10. NAVBAR
   ---------------------------------------- */
nav {
  background-color: #ffffff !important;
  border-bottom: 1px solid #ece9e1 !important;
  box-shadow: 0 2px 12px rgba(31, 36, 33, 0.05);
}

nav a {
  color: var(--ink) !important;
  font-weight: 600;
  transition: all 0.25s ease;
}

nav a:hover {
  color: var(--brand) !important;
}

/* Botones de idioma */
nav .bg-gray-100 {
  background-color: #f1efe9 !important;
  border: 1px solid #e2ded4 !important;
}

/* Selector ES/EN unificado — clase dedicada, sin depender de utilidades
   Tailwind generadas en runtime ni de pelear especificidad con otras reglas. */
.lang-toggle-btn {
  background-color: transparent;
  color: var(--stone);
}
.lang-toggle-btn.lang-active {
  background-color: #f28d35 !important;
  color: #ffffff !important;
}
.lang-toggle-btn:not(.lang-active) {
  background-color: transparent !important;
  color: var(--stone) !important;
}

/* Menú móvil */
#mobileMenu {
  background-color: #ffffff !important;
  border-top: 1px solid #ece9e1 !important;
  box-shadow: 0 4px 12px rgba(31, 36, 33, 0.08);
}

#mobileMenu a {
  color: var(--ink) !important;
  font-weight: 600;
}

#mobileMenu a:hover {
  background-color: #eef4f1 !important;
  color: var(--brand) !important;
}

#menuBtn i,
nav .fa-cart-shopping {
  color: var(--ink) !important;
}

/* Contador del carrito */
#cartCount, #cartCountMobile {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  font-weight: bold;
}

/* Logo */
nav img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  nav img { max-height: 40px; }
}

/* ----------------------------------------
   11. FOOTER
   ---------------------------------------- */
.bg-gradient-to-r.from-gray-900.to-gray-800 {
  background: var(--ink-deep) !important;
}

footer h3,
footer h4,
footer .text-\[#f28d35\] {
  color: var(--gold) !important;
}

footer i.fa-whatsapp { color: var(--wa) !important; }

footer i.fa-envelope,
footer i.fa-clock,
footer i.fa-star {
  color: var(--gold) !important;
}

footer i.fa-map-marker-alt { color: var(--accent) !important; }

footer a {
  color: var(--gold) !important;
  transition: all 0.3s ease;
}

footer a:hover { color: #f7c277 !important; }

/* ----------------------------------------
   12. OVERRIDES DE CLASES TAILWIND HEREDADAS
   ---------------------------------------------------------------
   El HTML y los templates de app.js usan clases Tailwind con
   colores fijos (#f28d35 naranja, #FFC107 amarillo). Tailwind por
   CDN inyecta sus utilidades en runtime DESPUÉS de este archivo,
   por lo que estos remapeos necesitan !important para imponerse.
   Punto único de control del color de marca para todo el sitio.
   --------------------------------------------------------------- */

/* Fondo general (clase del <body>) */
.bg-\[#fdfcf9\] { background-color: var(--cream) !important; }

/* Texto de acento (precios, "Detalles", subrayados, etc.) -> terracota */
.text-\[#f28d35\] { color: var(--accent-dark) !important; }

/* Subrayado decorativo y fondos de acento naranja -> terracota */
.bg-\[#f28d35\] {
  background-color: var(--brand) !important;
  color: #fff !important;
}

/* Las líneas decorativas (w-20 h-1 bg-[#f28d35]) deben verse terracota,
   no verde: se reestablecen donde no llevan texto. */
.w-20.bg-\[#f28d35\],
.w-16.bg-\[#f28d35\] {
  background-color: var(--accent) !important;
}

/* Botones primarios de acción (texto blanco): Agregar al carrito,
   Finalizar pedido, etc. -> verde marca */
.bg-\[#f28d35\].text-white { color: #fff !important; }

.hover\:bg-\[#e07d25\]:hover,
.hover\:bg-\[#FFB300\]:hover {
  background-color: var(--brand-dark) !important;
}

/* Botones/realces amarillos (hero "Ver Aventuras", CTA reseñas):
   van con text-black -> dorado para mantener legibilidad */
.bg-\[#FFC107\] {
  background-color: var(--gold) !important;
}

.hover\:bg-\[#FFB300\]:hover {
  background-color: var(--gold-dark) !important;
}

.text-\[#FFC107\] { color: var(--gold) !important; }

/* Precios en modales y carrito */
#modalPrice,
#productModalPrice,
#cartTotal,
#cartItems .text-\[#f28d35\] {
  color: var(--accent-dark) !important;
}

/* ----- Títulos de sección: negro con hover de marca ----- */
.mb-12 h2,
h2.text-4xl.font-bold.mb-2,
h2[data-i18n="section_tours_title"],
#tours h3,
h3.text-2xl.font-bold.mb-4 {
  color: var(--ink) !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

.mb-12 h2:hover,
h2.text-4xl.font-bold.mb-2:hover,
h2[data-i18n="section_tours_title"]:hover {
  color: var(--brand) !important;
}

#tours h3:hover,
h3.text-2xl.font-bold.mb-4:hover {
  color: var(--brand) !important;
  transform: translateX(5px) !important;
}

/* ----------------------------------------
   13. SELECTOR DE IDIOMA (estilo switch)
   ---------------------------------------- */
.idioma-switch {
  display: flex;
  background-color: #f1efe9;
  border-radius: 40px;
  padding: 3px;
  border: 1px solid #e2ded4;
}

.idioma-option {
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  color: var(--stone);
  border: none;
}

.idioma-option.active {
  background-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 5px rgba(31, 36, 33, 0.12);
}

.idioma-option:hover:not(.active) {
  background-color: #e6e2d8;
  color: var(--ink);
}


/* ----------------------------------------
   14. FORMULARIO DE TESTIMONIOS
   ---------------------------------------- */
#testimonioForm {
  display: block !important;
  visibility: visible !important;
}

#testimonioForm input,
#testimonioForm select,
#testimonioForm textarea,
#testimonioForm button {
  display: block !important;
  visibility: visible !important;
}

#ratingStars i {
  font-size: 24px;
  margin-right: 4px;
}

/* ----------------------------------------
   15. RESPONSIVE
   ---------------------------------------- */
@media (max-width: 768px) {
  .tourSwiper1,
  .tourSwiper2 { padding: 0 30px; }

  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 25px;
    bottom: 20px;
    right: 20px;
  }

  .tourSwiper1 .swiper-button-next,
  .tourSwiper1 .swiper-button-prev,
  .tourSwiper2 .swiper-button-next,
  .tourSwiper2 .swiper-button-prev {
    width: 32px !important;
    height: 32px !important;
  }

  .testimoniosSwiper .swiper-slide { width: 280px !important; }

  .notification {
    white-space: normal;
    text-align: center;
    max-width: 90%;
    font-size: 13px;
  }

  #tourModal > div,
  #productModal > div {
    width: 95%;
    max-height: 90vh;
  }

  .modalSwiper,
  .productModalSwiper { height: 220px; }
}

@media (max-width: 640px) {
  .hero-bg { height: 400px !important; }

  .hero-bg h1 {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
    max-width: 90%;
    margin: 0 auto;
  }

  .hero-bg p {
    font-size: 0.85rem !important;
    max-width: 90%;
    margin: 0 auto;
  }

  #modalTitle,
  #productModalTitle { font-size: 1.2rem !important; }

  #modalInfoAdicional .grid { grid-template-columns: 1fr !important; }

  #modalIncludes {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #modalIncludes li { font-size: 0.75rem !important; }
}