/******************************************************************
Theme Name: eTips Chile
Theme URI: https://etips.cl
Description: Sitio construido por eTips Chile
Author: eTips Chile (Jorge Louis Fernandez Heredia)
Author URI: https://etips.cl
Version: 2.0
*/
@import "estilos-xl.etips.css";
@import "estilos-lg.etips.css";
@import "estilos-md.etips.css";
@import "estilos-sm.etips.css";
@import "estilos-xs.etips.css";

/* ESTILOS MINIMALISTAS PERSONALIZADOS */
:root {
  /* Nuevo color primario basado en el logo (Verde vibrante) */
  --bs-primary: #00A859; /* Verde del logo - Estimado */
  --bs-secondary: #D4B889; /* Tono Tierra/Arena (Se mantiene) */
  --bs-accent: #FFC857; /* Nuevo color Amarillo/Dorado para CTAs de alto contraste (ACTUALIZADO) */
  --bs-success: #00A859; /* Se alinea con el primario */
  --bs-font-sans-serif: 'Inter', sans-serif;
}

img.logo{width:350px;}

/* Color verde muy oscuro para el fondo original (simulado) */
.bg-dark-green {
  background-color: #003300; /* Un verde muy oscuro, similar al original del fondo */
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap');
body {
  font-family: var(--bs-font-sans-serif);
  background-color: #f8f9fa; /* Light background */
  scroll-behavior: smooth;
}
.bg-primary-custom {
  background-color: var(--bs-primary) !important;
}
.text-primary-custom {
  color: var(--bs-primary) !important;
}
/* Estilos para el botón principal con hover */
.btn-primary-custom {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white !important; /* Asegura el texto blanco en el botón verde */
  transition: background-color 0.3s, border-color 0.3s, transform 0.1s;
}
.btn-primary-custom:hover {
  background-color: #008f4c; /* Un poco más oscuro */
  border-color: #008f4c;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* --- Estilo para Botón de Alto Contraste (Accent: #FFC857) --- */
.btn-accent-custom {
  background-color: var(--bs-accent);
  border-color: var(--bs-accent);
  color: #333 !important; /* Texto oscuro para el fondo claro */
  transition: background-color 0.3s, border-color 0.3s, transform 0.1s;
}
.btn-accent-custom:hover {
  background-color: #e5b34d; /* Un poco más oscuro en hover (Ajustado) */
  border-color: #e5b34d;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.card-service {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  border-radius: 12px;
  border: none;
}
.card-service:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.hero-section {
  /* CAMBIO: Se restaura el fondo a un color verde oscuro sólido, similar al original, para mantener la identidad visual del inicio. */
  background-color: #003300; /* Fondo Verde Oscuro Sólido */
  background-size: cover;
  background-position: center;
  min-height: 85vh;
  display: flex;
  align-items: center;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  
  /* Imagen + overlay (primero va el overlay, luego la imagen) */
  background-image:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url("/assets/images/banner/palmeras-alerdedor-de-laguna.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Estilo para el logo en el navbar */
.navbar-logo-container {
  display: flex;
  align-items: center;
  height: 40px; /* Altura para el contenedor del logo */
}
.navbar-logo-palm {
  /* SVG de la palmera del logo en color blanco para el navbar oscuro */
  fill: white;
  height: 100%; /* Ajustar la altura al contenedor */
  width: auto;
  margin-right: 0.5rem;
}
.navbar-logo-text {
  /* Estilo del texto "LAS PALMERAS" */
  font-size: 1.25rem; /* Ajuste de tamaño */
  font-weight: 700;
  line-height: 1; /* Asegurar alineación */
}

/* --- Estilos para los Botones Flotantes (WhatsApp / Mapa) --- */
.floating-cta-container {
  position: fixed;
  bottom:200px;
  right: 20px;
  z-index: 1050; /* Sobre la mayoría de los elementos */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.floating-btn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
  text-decoration: none; /* FIX 1: Elimina el subrayado de los botones flotantes */
}
.floating-btn:hover {
  transform: scale(1.1);
}

/* Estilo específico para WhatsApp (Mantenido en verde por convención de marca) */
.floating-whatsapp {
  background-color: #25D366; /* Color de WhatsApp */
  width: 60px; /* Un poco más grande para destacar */
  height: 60px;
}

/* Estilo específico para Mapa (usa el color primario) */
.floating-map {
  background-color: var(--bs-primary);
}

/* FIX 2: Elimina el subrayado de los íconos sociales en la sección de contacto */
#contacto a {
  text-decoration: none;
}

/* Estilo para las tarjetas de la galería */
.gallery-item {
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.gallery-item img {
  transition: transform 0.5s ease-in-out;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* --- Estilo para Botón Secundario (Tierra/Arena) --- */
.btn-secondary-custom {
  background-color: var(--bs-secondary); /* #D4B889 */
  border-color: var(--bs-secondary);
  color: #333 !important; /* Texto oscuro para el fondo claro */
  transition: background-color 0.3s, border-color 0.3s, transform 0.1s;
}
.btn-secondary-custom:hover {
  background-color: #c4a879; /* Un poco más oscuro */
  border-color: #c4a879;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Estilo para el carrusel de testimonios */
.testimonial-carousel .carousel-item {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  /* FIX: Oculta los ítems inactivos para evitar la superposición si el JS falla */
  display: none; 
}

/* FIX: Asegura que el ítem activo se muestre */
.testimonial-carousel .carousel-item.active {
  display: flex;
}

.testimonial-text{font-style: italic;font-size: 1.25rem;color: #333;}

/* Estilo para los enlaces de redes sociales en el footer */
.social-link{font-size: 1.5rem;margin-right: 15px;color: #d4b889; /* Color secundario para contraste */transition: color 0.3s;}
.social-link:hover{color: var(--bs-primary); /* Color primario en hover */}

/* Galería de miniaturas con etiqueta */
.thumbnail-wrapper {
  cursor: pointer;
  display: inline-block;
  width: 100%;
}
.thumbnail-wrapper .thumbnail-img {
  cursor: pointer;
  transition: border-color 0.2s, opacity 0.2s;
  border: 2px solid transparent !important;
  border-bottom: none !important;
  opacity: 0.7;
  width: 100%;
  display: block;
}
.thumbnail-wrapper .thumbnail-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  padding: 3px 4px;
  background-color: #f8f9fa;
  color: #555;
  border: 2px solid transparent !important;
  border-top: none !important;
  transition: border-color 0.2s;
}
.thumbnail-wrapper:hover .thumbnail-img,
.thumbnail-wrapper:hover .thumbnail-label {
  opacity: 1;
  border-color: var(--color-primary, #008f4c) !important;
}
.thumbnail-wrapper .thumbnail-img.active,
.thumbnail-wrapper .thumbnail-label.active {
  opacity: 1;
  border-color: var(--color-primary, #008f4c) !important;
}

/* Contenedor de imagen principal en ficha de especie */
.product-image-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.product-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Badge overlay sobre la imagen principal */
.badge-special {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  background-color: rgba(212, 184, 137, 0.92);
  color: #333;
  border-radius: 4px;
  z-index: 10;
}

/* Transición de fade para imagen principal de ficha de especie */
#mainImage{
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}

/* --- Validación de formularios (jquery-validate + Bootstrap 5) --- */
.has-error .help-block {
  display: block;
  font-size: 0.78rem;
  color: #dc3545;
  margin-top: 4px;
}
.has-error .form-control,
.has-error .form-select {
  border-color: #dc3545;
}

/* --- Estado deshabilitado del botón principal (evita que "desaparezca") --- */
.btn-primary-custom:disabled,
.btn-primary-custom[disabled] {
  background-color: #00A859;
  border-color: #00A859;
  color: white !important;
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.powered-by-etips{font-size:1rem;color:#dddddd;}
.powered-by-etips a{color:#cdcdcd;text-decoration:none;}

/* --- Scroll offset para navbar sticky ---
   Evita que el navbar tape el título al navegar con anclas (#servicios, #especies, etc.)
   Valor = altura logo (40px) + padding vertical navbar py-4 (48px) + margen visual (10px)
*/
section[id],
div[id] {
  scroll-margin-top: 60px;
}