/* Expo Agro Valle de Guadalupe - Theme overrides
   Palette & typography based on AgroValle copia.pdf.
   Note: The original PDF fonts are likely licensed; this theme uses close Google Fonts
   and keeps the original font names as fallbacks if you install them locally.
*/

:root{
  /* Brand palette */
  --main-color: #53582F;   /* Verde 1 */
  --color-two:  #86895E;   /* Verde 2 */
  --color-three:#80021E;   /* Rojo 1 */
  --color-four: #94908A;   /* Gris */
  --color-five: #0B0B0B;   /* Fondo */

  /* Text */
  --text-color: #2A2A2A;
  --heading-color: #141414;

  /* Typography (fallback strategy) */
  --expo-font-body: "TT Firs Neue Trial Var Italic", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --expo-font-display: "Lust Didone", "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --expo-font-serif: "MADE Mirage", "Cormorant Garamond", Georgia, serif;
}

body{
  font-family: var(--expo-font-body) !important;
  color: var(--text-color);
}

h1,h2,h3,h4,h5,h6,
.sec-title_heading{
  font-family: var(--expo-font-display) !important;
  color: var(--heading-color);
  letter-spacing: 0.2px;
}

/* Buttons */
.theme-btn.btn-style-one .btn-wrap,
.theme-btn.btn-style-one{background:var(--main-color);color:#fff;border-radius:12px;}


.theme-btn.btn-style-one:hover{background:var(--main-color);color:#fff;}

/* The original template uses pseudo-elements with accent colors (including red) on hover.
   Force them to stay in the green family (match "Enviar Mensaje"). */
.btn-style-one:before,
.btn-style-one:after,
.btn-style-two:before,
.btn-style-two:after{
  background-color: var(--main-color) !important;
}

.btn-style-one,
.btn-style-two,
.theme-btn.btn-style-two{
  background: var(--main-color) !important;
  color: #fff !important;
  border-color: var(--main-color) !important;
  border-radius: 12px;
}

.btn-style-one:hover,
.btn-style-two:hover,
.theme-btn.btn-style-two:hover{
  background: var(--main-color) !important;
  color: #fff !important;
  border-color: var(--main-color) !important;
}


/* Links / accents */
a:hover{ color: var(--color-three); }

/* Header logo sizing */
.main-header .logo img{
  max-height: 54px;
  width: auto;
}

/* Slider: keep content centered and avoid overlaps */
.slider-two{
  margin-top: 0;
}

.slider-two .slider-two_heading span{
  color: var(--color-two);
}

/* Custom section: video embed */
.expo-video{
  background: #fff;
}

.expo-video .video-frame{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

/* Footer */
.main-footer{
  background: var(--color-five);
}

.main-footer,
.main-footer a,
.main-footer p,
.main-footer .footer-title{
  color: #EDEDED;
}

.main-footer a:hover{
  color: var(--color-two);
}

.main-footer .footer-logo img{
  max-height: 70px;
  width: auto;
}

/* Utility */
.expo-badge{
  display:inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(83,88,47,.12);
  color: var(--main-color);
  font-weight: 600;
  font-size: 14px;
}

/* Prevent horizontal overflow on some sections (common 'descuadre') */
html, body{ overflow-x: hidden; }



/* --- Global button hover (match 'Enviar Mensaje') --- */
a.theme-btn, .theme-btn, .btn, button, input[type="submit"], input[type="button"]{
  background: var(--main-color);
  color:#fff !important;
  border-color: var(--main-color) !important;
}
a.theme-btn:hover, .theme-btn:hover, .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover{
  background: var(--main-color);
  color:#fff !important;
  border-color: var(--main-color) !important;
}




/* Force all theme buttons to match "Enviar Mensaje" style */
.theme-btn,
a.theme-btn,
button.theme-btn{
  background: var(--main-color) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.theme-btn:hover,
a.theme-btn:hover,
button.theme-btn:hover{
  background: var(--main-color) !important;
  color: #fff !important;
}

/* Ensure inner texts stay white (some templates animate text layers) */
.theme-btn .btn-wrap .text-one,
.theme-btn .btn-wrap .text-two{
  color:#fff !important;
}


/* =========================================================
   Botones: estilo unificado (verde + texto blanco)
   - Remueve decoraciones circulares del template (pseudo-elements)
   ========================================================= */
.theme-btn,
a.theme-btn,
button.theme-btn{
  color: #fff !important;
}

.btn-style-one,
.btn-style-two,
.btn-style-three,
.btn-style-four{
  background: var(--main-color) !important;
  border: 1px solid var(--main-color) !important;
  color: #fff !important;
}

/* Quita efectos decorativos que "descuadran" (círculos / burbujas) */
.btn-style-one::before,
.btn-style-one::after,
.btn-style-two::before,
.btn-style-two::after,
.btn-style-three::before,
.btn-style-three::after,
.btn-style-four::before,
.btn-style-four::after{
  content: none !important;
  display: none !important;
}

/* Asegura que el texto siempre quede arriba */
.btn-style-one .btn-wrap,
.btn-style-two .btn-wrap,
.btn-style-three .btn-wrap,
.btn-style-four .btn-wrap{
  position: relative;
  z-index: 2;
}

/* Hover: mantiene el verde (ligeramente más oscuro) */
.btn-style-one:hover,
.btn-style-two:hover,
.btn-style-three:hover,
.btn-style-four:hover{
  background: var(--main-color-dark) !important;
  border-color: var(--main-color-dark) !important;
  color: #fff !important;
}

.btn-style-one:hover .text-one,
.btn-style-one:hover .text-two,
.btn-style-two:hover .text-one,
.btn-style-two:hover .text-two,
.btn-style-three:hover .text-one,
.btn-style-three:hover .text-two,
.btn-style-four:hover .text-one,
.btn-style-four:hover .text-two{
  color: #fff !important;
}

/* Botones pequeños del carrito/sidebar (si aparecen) */
.bag-btn{
  background: var(--main-color) !important;
  border: 1px solid var(--main-color) !important;
  color: #fff !important;
}
.bag-btn:hover{
  background: var(--main-color-dark) !important;
  border-color: var(--main-color-dark) !important;
  color: #fff !important;
}


/* =========================
   Buttons - force brand style
   (text white, green background; hover stays green)
   ========================= */
.btn-style-one,
.btn-style-two,
.theme-btn{
  background: var(--main-color) !important;
  color:#fff !important;
  border-radius: 12px !important;
  border: none !important;
}
.btn-style-one:before,
.btn-style-one:after,
.btn-style-two:before,
.btn-style-two:after,
.theme-btn:before,
.theme-btn:after{
  content: none !important;
  display: none !important;
}
.btn-style-one .btn-wrap,
.btn-style-two .btn-wrap{
  float: none !important;
  overflow: visible !important;
}
.btn-style-one .btn-wrap .text-two,
.btn-style-two .btn-wrap .text-two{
  display:none !important;
}
.btn-style-one:hover,
.btn-style-two:hover,
.theme-btn:hover{
  background: #3f4523 !important; /* darker green */
  color:#fff !important;
}
.btn-style-one:hover .btn-wrap .text-one,
.btn-style-two:hover .btn-wrap .text-one{
  transform: none !important;
}