/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI: https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/
/* =========================
   COLOR PALETTE :)
   ========================= */
/* Color de acento por negocio: page-id del home de cada negocio → key de $colors.
   Mismos IDs que js/junco.js (BUSINESSES) y header.scss */
/* Acentos sobre fondo claro (variantes --light): el mismo tono de cada negocio, oscurecido hasta 4.5:1 sobre ivory (ADA AA texto normal).
   Fondos light: ivory (#F0EAD8) o linen (#F9F4E9); linen es más claro, así que los mismos acentos también pasan.
   Un negocio que no aparezca aquí hereda su acento normal de $business-colors */
/* Reescribe el selector actual para el home de cada negocio (body.page-id-<id>) y sus subpáginas
   (body.parent-pageid-<id>), y pasa el color de acento de ese negocio al bloque:
   .records__item .text-stat { @include colors.per-business using ($accent) { color: $accent; } }
   En una variante clara se pasa el mapa light: @include colors.per-business(colors.$business-colors-light) using ($accent) */
.gold {
  color: #C8B560;
}

.ivory {
  color: #F0EAD8;
}

.bg-gold {
  background-color: #C8B560;
}

.border-gold {
  border-color: #C8B560;
}

.bg-ivory {
  background-color: #F0EAD8;
}

.ink {
  color: #111009;
}

.bg-ink {
  background-color: #111009;
}

.sage {
  color: #A6BF88;
}

.bg-sage {
  background-color: #A6BF88;
}

.terracotta {
  color: #DFA878;
}

.bg-terracotta {
  background-color: #DFA878;
}

.charcoal {
  color: #37362C;
}

.bg-charcoal {
  background-color: #37362C;
}

.border-charcoal {
  border-color: #37362C;
}

.stone {
  color: #C1BEB1;
}

.bg-stone {
  background-color: #C1BEB1;
}

.slate {
  color: #616056;
}

.bg-slate {
  background-color: #616056;
}

.border-slate {
  border-color: #616056;
}

.obsidian {
  color: #0E0E0A;
}

.bg-obsidian {
  background-color: #0E0E0A;
}

.umber {
  color: #493D07;
}

.bg-umber {
  background-color: #493D07;
}

.fern {
  color: #437604;
}

.bg-fern {
  background-color: #437604;
}

.bronze {
  color: #776929;
}

.bg-bronze {
  background-color: #776929;
}

.rust {
  color: #995B24;
}

.bg-rust {
  background-color: #995B24;
}

.bark {
  color: #454338;
}

.bg-bark {
  background-color: #454338;
}

.linen {
  color: #F9F4E9;
}

.bg-linen {
  background-color: #F9F4E9;
}

.mist {
  color: #D0CFCC;
}

.bg-mist {
  background-color: #D0CFCC;
}

.border-mist {
  border-color: #D0CFCC;
}

.ash {
  color: #8F8C83;
}

.bg-ash {
  background-color: #8F8C83;
}

.border-ash {
  border-color: #8F8C83;
}

.cream {
  color: #F9F6EB;
}

.bg-cream {
  background-color: #F9F6EB;
}

.taupe {
  color: #A39F91;
}

.bg-taupe {
  background-color: #A39F91;
}

/* =========================
   REUSABLE TYPOGRAPHY
   ========================= */
.text-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.text-display {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 88px;
  line-height: 96px;
  letter-spacing: -1px;
}

.text-display .text-accent {
  font-style: italic;
}

.text-headline {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 80px;
  line-height: 88px;
  letter-spacing: -1px;
}

.text-headline .text-accent {
  font-style: italic;
}

.text-heading {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 50px;
}

.text-heading .text-accent {
  font-style: italic;
}

.text-quote {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: -0.9px;
}

.text-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 38px;
}

.text-stat {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 64px;
  line-height: 70px;
}

.text-title-sans {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 42px;
}

.text-subtitle {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.text-button {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

@media only screen and (max-width: 690px) {
  .text-button {
    font-size: 12px;
  }
}
.text-lead {
  font-family: "Montserrat", sans-serif;
  font-size: 19px;
  line-height: 30px;
  font-weight: 400;
}

.text-lead strong {
  font-weight: 700;
}

.text-lead .text-numeral {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.3em;
}

.text-body {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.text-caption {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* Ligas dentro de un caption stone: mismo color del texto, subrayadas */
.text-caption.stone a,
.text-caption.stone a:hover {
  display: block;
  margin-top: 12px;
  color: inherit;
  text-decoration: underline;
}

/* Yeguas (149): texto de apertura sobre el grid en el tamaño de .text-lead (19/30). Va por página porque el
   markup lleva .text-body; es el único .text-body de esa página (las cards usan .text-caption).
   Si se cambia el markup a .text-lead, esta regla sobra */
.page-id-149 .text-body {
  font-size: 19px;
  line-height: 30px;
}

/* =========================
   RESPONSIVE ORDERING
   ========================= */
/* Debajo de 999px Salient pone .row_col_wrap_12 en display:block (salvo rows equal-height), así que order no aplica sin forzar flex en el padre */
@media only screen and (min-width: 691px) and (max-width: 999px) {
  .row_col_wrap_12:has(> .tablet-order-first, > .tablet-order-last) {
    display: flex !important;
    flex-wrap: wrap;
  }
  .row_col_wrap_12 > .tablet-order-first {
    order: -1;
  }
  .row_col_wrap_12 > .tablet-order-last {
    order: 99;
  }
}
@media only screen and (max-width: 690px) {
  .row_col_wrap_12:has(> .mobile-order-first, > .mobile-order-last) {
    display: flex !important;
    flex-wrap: wrap;
  }
  .row_col_wrap_12 > .mobile-order-first {
    order: -1;
  }
  .row_col_wrap_12 > .mobile-order-last {
    order: 99;
  }
}
/* =========================
   BOTÓN "BACK TO TOP"
   ========================= */
/* El hover es un círculo (:after) que crece de scale(0) a scale(1) con transition: all 0.3s.
   Salient (salient-dynamic-styles.css) le da el color de acento con !important también en reposo, así que
   si solo se cambia el :hover la transición anima el color de azul a negro y se ve un brinco azul.
   Se pinta negro en todos los estados. Mismo selector que Salient: el child theme carga después y gana el empate */
body[data-button-style*=rounded] #to-top:after {
  background-color: #000 !important;
}

/* =========================
   VISIBILIDAD POR DISPOSITIVO
   ========================= */
/* Mismo corte que header y footer: mobile hasta 800px.
   Solo se ocultan (display: none); donde se ven conservan su display normal.
   !important para ganarle a los display de Salient/WPBakery */
@media only screen and (min-width: 801px) {
  .show-for-mobile-only {
    display: none !important;
  }
}
@media only screen and (max-width: 800px) {
  .hide-for-mobile {
    display: none !important;
  }
}
.container-wrap {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

#top nav > ul.sf-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  max-width: 100%;
}

#top nav > ul.sf-menu > li {
  flex: 0 0 auto;
}

body #header-outer .buttons.sf-menu {
  display: none !important;
}

body #header-outer[data-lhe=animated_underline] #top nav > ul > li:not([class*=button_]) > a .menu-title-text:after {
  opacity: 0 important;
}

#header-outer nav > ul > li a {
  text-transform: uppercase;
}

#header-outer nav > ul > li > a .menu-title-text {
  color: #F0EAD8;
  transition: color 0.4s ease;
}

#header-outer nav > ul > li > a:hover .menu-title-text {
  color: #C8B560;
}

#header-outer nav > ul > li > a .menu-title-text::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 800px) and (max-width: 1499px) {
  #header-outer nav > ul > li > a .menu-title-text {
    font-size: 12px;
    letter-spacing: 1.5px !important;
  }
}
/* =========================
   MENÚ DE IDIOMAS
   ========================= */
#header-outer #top nav > ul.idiomas {
  display: flex !important;
  align-items: center;
  width: auto !important;
  margin: 0 0 0 24px !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 0;
}

@media (min-width: 800px) and (max-width: 1499px) {
  #header-outer #top nav > ul.idiomas {
    margin: 0 0 0 12px !important;
  }
}
#header-outer #top nav > ul.idiomas > li {
  display: flex !important;
  align-items: center;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#header-outer #top nav > ul.idiomas > li:first-child > a,
#header-outer #top nav > ul.idiomas > li:first-child > a:hover {
  color: #C8B560 !important;
}

/* Enlaces */
#header-outer #top nav > ul.idiomas > li > a {
  display: flex !important;
  align-items: center;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #616056 !important;
  text-decoration: none !important;
  transition: color 0.4s ease;
  font-weight: 500;
}

/* Hover */
#header-outer #top nav > ul.idiomas > li > a:hover {
  color: #FFFFFF !important;
}

/* =========================
   SEPARADOR ES | EN
   ========================= */
#header-outer #top nav > ul.idiomas > li + li {
  margin-left: 3px !important;
  padding-left: 12px !important;
  position: relative;
}

#header-outer #top nav > ul.idiomas > li + li::before {
  content: "|";
  position: absolute;
  color: #616056;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.path-breadcrumb {
  border-top: 1px solid #302F26;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-top: 0;
  max-height: 60px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.35s ease, margin-top 0.35s ease, padding-top 0.35s ease, padding-bottom 0.35s ease, border-color 0.35s ease;
  will-change: opacity, transform, max-height;
}

@media only screen and (max-width: 800px) {
  .path-breadcrumb {
    display: none;
  }
}
.path-breadcrumb ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.path-breadcrumb ul li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.path-breadcrumb ul li a {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 18.9px;
  letter-spacing: 2.04px;
  text-decoration: none;
  text-transform: uppercase;
  color: #d5d3cd;
}

@media (min-width: 800px) and (max-width: 1499px) {
  .path-breadcrumb ul li a {
    font-size: 12px;
  }
}
.path-breadcrumb ul li + li::before {
  content: "/";
  margin-left: 24px;
  margin-right: 24px;
  color: #686963;
  font-weight: 400;
}

/*RANCHO (default): página actual en menú y breadcrumb. En cada negocio lo sobrescriben los bloques de abajo (!important).
  El off-canvas no entra aquí: su activo va siempre en gold (off-canvas.scss)*/
#header-outer nav > ul > li.current-menu-item > a .menu-title-text,
#header-outer nav > ul > li.current-page-ancestor > a .menu-title-text,
.path-breadcrumb ul li:last-child a {
  color: #C8B560;
}

/*AGRO*/
.page-id-60 #header-outer nav > ul > li > a:hover .menu-title-text,
.parent-pageid-60 #header-outer nav > ul > li > a:hover .menu-title-text,
.parent-pageid-60 #header-outer nav > ul > li.current-menu-item > a .menu-title-text,
.parent-pageid-60 #header-outer nav > ul > li.current-page-ancestor > a .menu-title-text,
.page-id-60 .path-breadcrumb ul li:last-child a,
.parent-pageid-60 .path-breadcrumb ul li:last-child a {
  color: #92A174 !important;
}

/*YEGUADA*/
.page-id-58 #header-outer nav > ul > li > a:hover .menu-title-text,
.parent-pageid-58 #header-outer nav > ul > li > a:hover .menu-title-text,
.parent-pageid-58 #header-outer nav > ul > li.current-menu-item > a .menu-title-text,
.parent-pageid-58 #header-outer nav > ul > li.current-page-ancestor > a .menu-title-text,
.page-id-58 .path-breadcrumb ul li:last-child a,
.parent-pageid-58 .path-breadcrumb ul li:last-child a {
  color: #C8B560 !important;
}

/*BRAVA*/
.page-id-62 #header-outer nav > ul > li > a:hover .menu-title-text,
.parent-pageid-62 #header-outer nav > ul > li > a:hover .menu-title-text,
.parent-pageid-62 #header-outer nav > ul > li.current-menu-item > a .menu-title-text,
.parent-pageid-62 #header-outer nav > ul > li.current-page-ancestor > a .menu-title-text,
.page-id-62 .path-breadcrumb ul li:last-child a,
.parent-pageid-62 .path-breadcrumb ul li:last-child a {
  color: #DFA878 !important;
}

#header-outer nav > ul > li.current-menu-item > a .menu-title-text,
#header-outer nav > ul > li.current-page-ancestor > a .menu-title-text {
  font-weight: 600;
}

/* El breadcrumb se oculta con html.junco-scrolled (js/junco.js), no con el .scrolled-down de Salient:
   init.js pone y quita .scrolled-down desde varios lugares con reglas distintas y a veces se queda puesta
   con la página arriba (al recargar o volver con el historial). Entonces el breadcrumb se colapsaba pero
   #header-space conservaba su alto y quedaba el hueco vacío hasta hacer scroll */
html.junco-scrolled #header-outer .path-breadcrumb {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-8px);
  border-color: transparent;
  pointer-events: none;
}

#header-space {
  background-color: #1f1f1f;
}

html.header-preload .path-breadcrumb {
  display: none !important;
}

/* MOBILE */
@media only screen and (max-width: 800px) {
  .path-breadcrumb {
    margin-top: 10px;
    padding-top: 8px;
    padding-bottom: 2px;
    max-height: 46px;
  }
  .path-breadcrumb ul {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .path-breadcrumb ul li a {
    font-size: 12px;
    letter-spacing: 1px;
  }
  .path-breadcrumb ul li + li::before {
    margin-left: 10px;
    margin-right: 10px;
  }
}
/* Fondo del off-canvas: plano, #222118 al 100%. fullscreen-legacy.css de Salient baja la opacidad
   con el mismo selector y carga después, por eso el !important */
#slide-out-widget-area-bg.fullscreen.dark {
  background-color: #222118 !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* Salient pone padding: 0 10% al contenedor; el diseño usa 32px a los lados en mobile */
#slide-out-widget-area .off-canvas-menu-container {
  padding: 0 32px;
}

/* Lista centrada con línea #37362C debajo de cada opción. En desktop se limita el ancho
   para que las líneas no crucen toda la pantalla */
#slide-out-widget-area .off-canvas-menu-container ul.menu {
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

#slide-out-widget-area.fullscreen .inner .off-canvas-menu-container ul.menu > li {
  margin: 0 !important;
  border-bottom: 1px solid #37362C;
}

/* Salient (fullscreen-legacy.css) pone 48px / 32px en Open Sans bold con selectores de ID, por eso los !important */
#slide-out-widget-area.fullscreen .inner .off-canvas-menu-container ul.menu > li > a {
  /* Cada opción mide 44px: 43px del enlace + 1px de la línea del li */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  padding: 0;
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 18.9px !important;
  letter-spacing: 2.26px !important;
  text-transform: uppercase;
  color: #C1BEB1 !important;
  transition: color 0.3s ease;
}

/* Activo y hover siempre en gold, sin importar la sección (a diferencia del header) */
#slide-out-widget-area.fullscreen .inner .off-canvas-menu-container ul.menu > li > a:hover,
#slide-out-widget-area.fullscreen .inner .off-canvas-menu-container ul.menu > li.current-menu-item > a {
  color: #C8B560 !important;
}

#slide-out-widget-area.fullscreen .inner .off-canvas-menu-container ul.menu > li.current-menu-item > a {
  font-weight: 700 !important;
}

/* Enlace a Rancho El Junco en las secciones de negocio (off-canvas-navigation.php): subrayado y pegado abajo.
   Va en una franja del color del fondo a todo lo ancho, para que en mobile, cuando el menú es más largo que la pantalla,
   las opciones pasen por debajo en vez de encimarse con el enlace.
   Salient da margin: 13px 0 a los hijos de .inner; en un elemento fijo eso lo despega del borde de la pantalla
   y deja ver el menú por debajo, por eso margin: 0 !important */
.ocm-rancho-link {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin: 0 !important;
  padding: 24px 0 40px;
  background-color: #222118;
  text-align: center;
}

/* Salient (fullscreen-legacy.css) da margin: 13px 0 a cada hijo de .inner (idioma, menú, enlace a Rancho El Junco).
   Se quita: el espacio lo controlan el padding de .inner y las franjas fijas */
#slide-out-widget-area.fullscreen .inner-wrap > .inner > div {
  margin: 0 !important;
}

/* Espacio arriba del menú para que no quede pegado al selector de idioma (.lang-mobile, fijo debajo del header).
   Salient ya empuja .inner-wrap el alto del header (padding-top), así que aquí solo va la franja del idioma
   (25px + 19px de texto + 16px = 60px) + 26px de aire.
   Salient centra .inner en la pantalla (margin: auto); en tablet/mobile el menú arranca arriba, justo después del espacio.
   En desktop se queda centrado.
   fullscreen-legacy.css pone padding: 30px 0 y margin: auto con selectores más específicos, por eso los !important */
#slide-out-widget-area .inner:has(> .lang-mobile) {
  padding-top: 86px !important;
}

@media only screen and (max-width: 999px) {
  #slide-out-widget-area .inner:has(> .lang-mobile) {
    margin-top: 0 !important;
  }
}
/* Sin selector de idioma (junco_show_idiomas() en false, functions.php): no hay franja .lang-mobile,
   así que el menú solo lleva los 26px de aire arriba y, en tablet/mobile, sigue arrancando arriba */
#slide-out-widget-area .inner:has(> .off-canvas-menu-container):not(:has(> .lang-mobile)) {
  padding-top: 26px !important;
}

@media only screen and (max-width: 999px) {
  #slide-out-widget-area .inner:has(> .off-canvas-menu-container):not(:has(> .lang-mobile)) {
    margin-top: 0 !important;
  }
}
/* Espacio al final del menú para que la última opción se pueda desplazar por encima de la franja.
   fullscreen-legacy.css pone padding: 30px 0 con un selector más específico, por eso el !important */
#slide-out-widget-area .inner:has(> .ocm-rancho-link) {
  padding-bottom: 110px !important;
}

#slide-out-widget-area .ocm-rancho-link a {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.9px;
  letter-spacing: 2.26px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #C1BEB1 !important;
  white-space: nowrap;
  transition: color 0.3s ease;
}

#slide-out-widget-area .ocm-rancho-link a:hover {
  color: #C8B560 !important;
}

#footer-outer {
  display: none !important;
}

.nectar-global-section.nectar_hook_global_section_footer {
  margin-top: auto;
}

/* Selector de idioma del off-canvas: centrado arriba, 24px debajo del header.
   El header queda encima del off-canvas y su alto varía (76px en mobile, más en desktop por el breadcrumb,
   más la barra de admin), así que js/junco.js mide dónde termina y lo guarda en --junco-header-bottom.
   Sin transform: Salient anima los hijos de .inner con transform y lo pisaría */
/* Va en una franja del color del fondo (igual que el enlace a Rancho El Junco abajo) para que, si el menú
   es más largo que la pantalla, las opciones pasen por debajo al hacer scroll.
   margin: 0 porque Salient da margin: 13px 0 a los hijos de .inner y lo despegaría del header */
.lang-mobile {
  position: fixed;
  /* 1px por debajo del borde del header: el header tiene medidas con decimales y, redondeando, quedaba
     una línea de 1px entre los dos por la que se veía el menú. El header va encima y tapa ese pixel */
  top: calc(var(--junco-header-bottom, 76px) - 1px);
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0 !important;
  padding: 25px 0 16px;
  background-color: #222118;
  text-align: center;
}

.lang-mobile ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-mobile ul li {
  display: inline-block;
}

.lang-mobile ul li a {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.9px;
  letter-spacing: 2.04px;
  text-decoration: none;
}

.lang-mobile ul li:first-child a {
  color: #C8B560 !important;
}

.lang-mobile ul li:not(:first-child) a {
  color: #666666;
}

.lang-mobile ul li + li::before {
  content: "|";
  color: #666666;
  margin: 0 14px;
}

.footer1 ul {
  margin-left: 0px;
  margin-bottom: 15px;
}

.footer1 ul li {
  list-style-type: none;
  margin-bottom: 5px;
}

.footer1 ul li a {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 25.5px;
  letter-spacing: 0;
  text-align: left;
  color: #F0EAD8 !important;
}

.footer2 {
  position: relative;
}

.footer2::after {
  background-color: #37362C;
  position: absolute;
  top: 0px;
  height: 1px;
  content: " ";
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1500px;
  z-index: 55;
}

.footer2 a {
  font-size: 14px !important;
  cursor: pointer;
}

.footer3 p {
  color: #F0EAD8 !important;
  line-height: 26px;
}

.footer2 a {
  text-decoration: underline;
  opacity: 1;
}

.footer3 a {
  color: #C8B560 !important;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 2.4px;
  text-decoration: underline;
  opacity: 1 !important;
}

.footer2, .footer3,
.footer2 .row-bg-wrap, .footer3 .row-bg-wrap,
.footer2 .row-bg, .footer3 .row-bg {
  -webkit-transform: none !important;
  will-change: auto !important;
}

.copyright,
.recsa-agro-logo {
  position: relative !important;
}

.copyright::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.8vw;
  width: 1px;
  height: 53px;
  transform: translateY(-50%);
  background-color: #37362C;
  visibility: visible !important;
}

.recsa-agro-logo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.98vw;
  width: 1px;
  height: 53px;
  transform: translateY(-50%);
  background-color: #356A76;
  visibility: visible !important;
}

.footer2 img {
  text-align: right;
  margin-left: auto;
}

@media only screen and (max-width: 1390px) {
  .copyright::after {
    right: 1vw;
  }
}
@media only screen and (max-width: 1200px) {
  .copyright::after {
    display: none;
  }
  .recsa-agro-logo::after {
    right: 0.5vw;
  }
  .recsa-agro-logo::after {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  .footer2 img {
    text-align: left;
    margin-left: 0;
  }
  .copyright::after {
    display: none;
  }
  .footer1 img {
    max-width: 150px !important;
  }
  .recsa-agro-logo img {
    max-width: 120px !important;
  }
  .footer3 p {
    font-size: 12px;
    line-height: 22px;
  }
  .footer3 a {
    font-size: 16px;
  }
}
/* =========================
   MENÚ DEL FOOTER ([junco_menu])
   ========================= */
/* El menú va dentro del row .footer1, cuyas reglas (.footer1 ul li a: color !important, 14px) le ganarían a una sola clase.
   Por eso cada selector lleva .junco-footer-menu delante y los colores llevan !important */
/* Menú del negocio actual en línea, alineado a la derecha, con separadores verticales entre opciones.
   La opción de la página actual y el hover van en el color de cada negocio, igual que en el header (gold en el sitio principal) */
.junco-footer-menu .junco-footer-menu__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0 !important;
  padding: 0;
  list-style: none !important;
}

/* Desktop: el menú baja 12px */
@media only screen and (min-width: 1000px) {
  .junco-footer-menu .junco-footer-menu__list {
    position: relative;
    bottom: -12px;
  }
}
.junco-footer-menu .junco-footer-menu__list > li {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 16px;
  list-style: none !important;
  border-left: 1px solid #37362C;
}

.junco-footer-menu .junco-footer-menu__list > li:first-child {
  border-left: none;
}

.junco-footer-menu .junco-footer-menu__list > li:last-child {
  padding-right: 0;
}

.junco-footer-menu .junco-footer-menu__list > li > a {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 2.04px;
  text-transform: uppercase;
  color: #C1BEB1 !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.junco-footer-menu .junco-footer-menu__list > li > a:hover,
.junco-footer-menu .junco-footer-menu__list > li.current-menu-item > a {
  color: #C8B560 !important;
}

.junco-footer-menu .junco-footer-menu__list > li.current-menu-item > a {
  font-weight: 500;
}

/* Mismos colores que la navegación del header (header.scss): Agro #92A174, Yeguada gold, Brava terracotta */
.page-id-60 .junco-footer-menu .junco-footer-menu__list > li > a:hover,
.parent-pageid-60 .junco-footer-menu .junco-footer-menu__list > li > a:hover,
.page-id-60 .junco-footer-menu .junco-footer-menu__list > li.current-menu-item > a,
.parent-pageid-60 .junco-footer-menu .junco-footer-menu__list > li.current-menu-item > a {
  color: #92A174 !important;
}

.page-id-58 .junco-footer-menu .junco-footer-menu__list > li > a:hover,
.parent-pageid-58 .junco-footer-menu .junco-footer-menu__list > li > a:hover,
.page-id-58 .junco-footer-menu .junco-footer-menu__list > li.current-menu-item > a,
.parent-pageid-58 .junco-footer-menu .junco-footer-menu__list > li.current-menu-item > a {
  color: #C8B560 !important;
}

.page-id-62 .junco-footer-menu .junco-footer-menu__list > li > a:hover,
.parent-pageid-62 .junco-footer-menu .junco-footer-menu__list > li > a:hover,
.page-id-62 .junco-footer-menu .junco-footer-menu__list > li.current-menu-item > a,
.parent-pageid-62 .junco-footer-menu .junco-footer-menu__list > li.current-menu-item > a {
  color: #DFA878 !important;
}

@media (min-width: 800px) and (max-width: 1499px) {
  .junco-footer-menu .junco-footer-menu__list > li {
    padding: 0 14px;
  }
}
/* Mobile: alineado a la izquierda y en varias líneas, con los mismos separadores que en desktop.
   CSS no sabe qué opción abre cada línea, así que todas llevan su separador (también la primera) y la lista se recorre
   a la izquierda lo que miden el padding y el borde (12px + 1px); el contenedor recorta con overflow: hidden
   el separador de la opción que abre cada línea y el texto queda alineado con el resto del footer */
@media only screen and (max-width: 800px) {
  .junco-footer-menu {
    overflow: hidden;
  }
  .junco-footer-menu .junco-footer-menu__list {
    justify-content: flex-start;
    gap: 8px 0;
    margin-left: -13px !important;
  }
  .junco-footer-menu .junco-footer-menu__list > li,
  .junco-footer-menu .junco-footer-menu__list > li:first-child {
    min-height: 0;
    padding: 0 12px;
    border-left: 1px solid #37362C;
  }
}
/* =========================
   TEXTO DEL FOOTER POR NEGOCIO ([junco_area_footer_text])
   ========================= */
/* Salient da padding-bottom a los <p> y .footer3 p fuerza su color con !important,
   así que el color y el padding van también en los hijos y con !important */
.junco-footer-text,
.junco-footer-text p {
  font-size: 16px;
  color: #F0EAD8 !important;
  padding-bottom: 0 !important;
}

.junco-footer-text {
  max-width: 429px;
}

@media only screen and (max-width: 800px) {
  .junco-footer-text,
  .junco-footer-text p {
    font-size: 14px;
  }
}
/* =========================
   "POR RANCHO EL JUNCO" BAJO EL LOGO ([junco_logo], solo en los negocios)
   ========================= */
/* .footer3 p y .footer3 a fuerzan color con !important y Salient da padding-bottom a los <p>
   y margin/line-height con .row .col p:last-child, así que esos van con !important */
.junco-logo__by {
  margin-top: 0 !important;
  margin-bottom: 23px !important;
  padding-bottom: 0 !important;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 0 !important;
  letter-spacing: 0;
  text-align: left;
  color: #A39F91 !important;
}

.junco-logo__by a {
  font: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  text-decoration: underline;
}

/* =========================
   INSTAGRAM DEL NEGOCIO ([junco_instagram])
   ========================= */
/* Salient pone display: block y margin-bottom: 15px a los img de las filas full-width (no respetaban el text-align
   de la columna) y le da opacity: .7 al enlace, que con el gris del SVG casi no se veía; por eso van con !important */
.junco-instagram {
  display: inline-block;
  opacity: 1 !important;
}

.junco-instagram img {
  display: inline-block !important;
  margin-bottom: 0 !important;
  vertical-align: middle;
}

/* =========================
   FOOTER RECSA (.footer3): LOGO Y TEXTO EN LA MISMA LÍNEA
   ========================= */
/* Mobile: el logo (.recsa-agro-logo) y el texto de la unidad de negocio (la columna siguiente) van lado a lado
   en vez de apilados; el enlace a recsa.mx sigue en su propia línea abajo.
   El row es equal_height, así que .row_col_wrap_12 ya es flex con wrap; los !important le ganan al width: 100%
   de las columnas de Salient y al margin-bottom de la imagen */
@media only screen and (max-width: 800px) {
  .footer3 > .row_col_wrap_12 {
    flex-wrap: wrap !important;
    align-items: center;
    column-gap: 20px;
  }
  .footer3 .recsa-agro-logo {
    flex: 0 0 auto;
    width: auto !important;
  }
  .footer3 .recsa-agro-logo + .wpb_column {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
  }
  /* El enlace a recsa.mx conserva su 1/6 de Salient y, si cabe, se sube a la misma línea y aprieta el texto;
     por eso va forzado al 100% en su propia línea */
  .footer3 .recsa-agro-logo + .wpb_column + .wpb_column {
    flex: 0 0 100%;
    width: 100% !important;
  }
  .footer3 .recsa-agro-logo img {
    margin-bottom: 0 !important;
  }
  /* Salient da margin-bottom: 25px a las columnas apiladas (column_margin="default"); aquí solo agrega espacio
     abajo del texto y descentra el logo */
  .footer3 > .row_col_wrap_12 > .wpb_column {
    margin-bottom: 0 !important;
  }
}
/* =========================
   FOOTER LEGAL (.footer2): ALINEACIÓN EN MOBILE
   ========================= */
/* En WPBakery el row .footer1 (logo, texto, menú) lleva left_padding_24px y .footer2 (aviso, copyright, Zinvol)
   left_padding_14px; con las columnas apiladas los textos quedaban 10px más a la izquierda. Se compensa la diferencia */
@media only screen and (max-width: 800px) {
  .footer2 > .row_col_wrap_12 > .wpb_column > .vc_column-inner {
    padding-left: 10px !important;
  }
}
/* =========================
   HERO
   ========================= */
.hero-module .row-bg-wrap .inner-wrap::after {
  background: linear-gradient(0deg, #111009 0%, transparent 100%);
  content: " ";
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 200px;
  width: 100%;
}

.hero__content .hero__note-icon {
  position: relative;
  top: 7px;
}

.hero__content .text-eyebrow {
  display: block;
  margin-bottom: 18px;
}

.hero__content .text-display {
  margin: 0 0 26px;
}

.hero__content .text-lead {
  margin: 0 !important;
  padding-bottom: 0 !important;
}

.hero__divider {
  width: 100%;
  max-width: 540px;
  height: 1px;
  margin: 28px 0 20px;
  border: none;
}

.hero__note {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__note-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Variante interior (hero-int.md): misma estructura que el hero, tipografía más chica
   y el divider va entre título y texto */
.hero__content--int .text-eyebrow {
  font-size: 12px;
}

.hero__content--int .text-display {
  margin: 0;
  font-size: 60px;
  line-height: 70px;
  letter-spacing: -0.6px;
}

.hero__content--int .text-lead {
  font-size: 24px;
  line-height: 42px;
}

.hero__content--int .hero__divider {
  max-width: 608px;
}

/* Acento por negocio: en el markup el acento por defecto es gold (.gold / .bg-gold).
   En las páginas de un negocio toma su color (colors.per-business) */
.page-id-60 .hero__content--int .text-eyebrow, .parent-pageid-60 .hero__content--int .text-eyebrow,
.page-id-60 .hero__content--int .text-accent,
.parent-pageid-60 .hero__content--int .text-accent {
  color: #A6BF88;
}
.page-id-58 .hero__content--int .text-eyebrow, .parent-pageid-58 .hero__content--int .text-eyebrow,
.page-id-58 .hero__content--int .text-accent,
.parent-pageid-58 .hero__content--int .text-accent {
  color: #C8B560;
}
.page-id-62 .hero__content--int .text-eyebrow, .parent-pageid-62 .hero__content--int .text-eyebrow,
.page-id-62 .hero__content--int .text-accent,
.parent-pageid-62 .hero__content--int .text-accent {
  color: #DFA878;
}

.page-id-60 .hero__content--int .hero__divider, .parent-pageid-60 .hero__content--int .hero__divider {
  background-color: #A6BF88;
}
.page-id-58 .hero__content--int .hero__divider, .parent-pageid-58 .hero__content--int .hero__divider {
  background-color: #C8B560;
}
.page-id-62 .hero__content--int .hero__divider, .parent-pageid-62 .hero__content--int .hero__divider {
  background-color: #DFA878;
}

@media (min-width: 800px) and (max-width: 1499px) {
  .hero__content .text-display {
    font-size: 64px;
    line-height: 70px;
    letter-spacing: -0.6px;
  }
  .hero__content--int .text-display {
    font-size: 52px;
    line-height: 60px;
  }
  .hero__content--int .text-lead {
    font-size: 20px;
    line-height: 34px;
  }
}
@media only screen and (max-width: 800px) {
  .hero-module .row-bg-wrap .inner-wrap::after {
    height: 100px;
  }
  .hero__content .text-eyebrow {
    font-size: 11px;
    line-height: 16px;
  }
  .hero__content .text-display {
    font-size: 42px;
    line-height: 48px;
    letter-spacing: -0.4px;
  }
  .hero__content .text-lead {
    font-size: 16px;
    line-height: 26px;
  }
  .hero__divider {
    margin: 20px 0 16px;
  }
  .hero__content--int .text-display {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.4px;
  }
  .hero__content--int .text-lead {
    font-size: 17px;
    line-height: 28px;
  }
}
/* =========================
   HEADLINE 1
   ========================= */
.headline1__content .text-eyebrow {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
}

/* wpautop envuelve el eyebrow en un <p> (línea en blanco en el markup) y Salient le pone 21px de padding-bottom:
   sin él, el espacio eyebrow → título queda en los 10px del eyebrow, igual que en timeline-text */
.headline1__content p {
  margin: 0;
  padding-bottom: 0;
}

.headline1__content .text-headline,
.headline1__content .text-heading {
  margin: 0;
  padding: 0;
}

/* Acento por negocio: en el markup el eyebrow y la palabra en .text-accent van en gold (sitio principal).
   En las páginas de un negocio toman su color (colors.per-business) */
.page-id-60 .headline1__content .text-eyebrow, .parent-pageid-60 .headline1__content .text-eyebrow,
.page-id-60 .headline1__content .text-accent,
.parent-pageid-60 .headline1__content .text-accent {
  color: #A6BF88;
}
.page-id-58 .headline1__content .text-eyebrow, .parent-pageid-58 .headline1__content .text-eyebrow,
.page-id-58 .headline1__content .text-accent,
.parent-pageid-58 .headline1__content .text-accent {
  color: #C8B560;
}
.page-id-62 .headline1__content .text-eyebrow, .parent-pageid-62 .headline1__content .text-eyebrow,
.page-id-62 .headline1__content .text-accent,
.parent-pageid-62 .headline1__content .text-accent {
  color: #DFA878;
}

/* Variante clara (headline1-light.md): row con class="headline1-module headline1--light" y bg_color linen.
   En el markup el eyebrow va en bronze; en las páginas de un negocio usa $business-colors-light (fern, bronze, rust).
   Gana a la regla de arriba por la clase extra del row */
.page-id-60 .headline1--light .headline1__content .text-eyebrow, .parent-pageid-60 .headline1--light .headline1__content .text-eyebrow,
.page-id-60 .headline1--light .headline1__content .text-accent,
.parent-pageid-60 .headline1--light .headline1__content .text-accent {
  color: #437604;
}
.page-id-58 .headline1--light .headline1__content .text-eyebrow, .parent-pageid-58 .headline1--light .headline1__content .text-eyebrow,
.page-id-58 .headline1--light .headline1__content .text-accent,
.parent-pageid-58 .headline1--light .headline1__content .text-accent {
  color: #776929;
}
.page-id-62 .headline1--light .headline1__content .text-eyebrow, .parent-pageid-62 .headline1--light .headline1__content .text-eyebrow,
.page-id-62 .headline1--light .headline1__content .text-accent,
.parent-pageid-62 .headline1--light .headline1__content .text-accent {
  color: #995B24;
}

@media (min-width: 800px) and (max-width: 1499px) {
  .headline1__content .text-headline {
    font-size: 56px;
    line-height: 62px;
  }
}
@media only screen and (max-width: 800px) {
  .headline1__content .text-eyebrow {
    font-size: 11px;
  }
  .headline1__content .text-headline {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.4px;
  }
  /* headline1-small: título en .text-heading (42px), misma escala que el título de cinematic-content-box */
  .headline1__content .text-heading {
    font-size: 32px;
    line-height: 38px;
  }
}
/* Variante compacta: row con class="headline1--compact". Limita .text-headline a 60px (en vez de 80px)
   y escala tablet/mobile a partir de ese máximo, con la misma escala que el título de hero-int.
   Va al final y con la clase del row para ganarle a los media queries de arriba */
.headline1--compact .headline1__content .text-headline {
  font-size: 60px;
  line-height: 70px;
  letter-spacing: -0.6px;
}

@media (min-width: 800px) and (max-width: 1499px) {
  .headline1--compact .headline1__content .text-headline {
    font-size: 52px;
    line-height: 60px;
  }
}
@media only screen and (max-width: 800px) {
  .headline1--compact .headline1__content .text-headline {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.4px;
  }
}
/* =========================
   THREE CARDS
   ========================= */
.three-cards__col {
  border-width: 1px;
  border-style: solid;
}

.three-cards__col .vc_column-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.three-cards__col .column-image-bg-wrap {
  position: absolute !important;
  inset: 0 !important;
}

.three-cards__col .column-image-bg-wrap .inner-wrap {
  height: 100% !important;
}

.three-cards__col .column-image-bg {
  height: 100% !important;
  padding: 0 !important;
  background-size: cover !important;
}

.three-cards__col .wpb_wrapper,
.three-cards__col .wpb_text_column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.three-cards__card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.three-cards__card .text-eyebrow {
  display: block;
  font-size: 14px;
  margin-bottom: 12px;
}

.three-cards__card .text-title {
  margin: 0 0 8px;
}

.three-cards__card .text-subtitle {
  margin: 0 0 6px;
}

.three-cards__card .text-caption {
  margin: 0;
}

.three-cards__divider {
  width: 100%;
  height: 1px;
  margin: auto 0 16px;
  border: none;
}

.three-cards__cta {
  display: inline-block;
  padding: 12px 22px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

/* Con column_link en la columna, Salient pone un <a class="column-link"> encima de toda la card
   (position: absolute, z-index: 11), así que el cursor nunca llega al CTA y su :hover no se activa.
   Toda la card es el enlace, así que el hover de la card activa también el del CTA */
.three-cards__cta:hover,
.three-cards__col:hover .three-cards__cta {
  color: #111009 !important;
}

.three-cards__cta.bg-sage:hover,
.three-cards__col:hover .three-cards__cta.bg-sage {
  background-color: rgb(53.8721954356%, 66.8294439087%, 38.3234972678%);
}

.three-cards__cta.bg-terracotta:hover,
.three-cards__col:hover .three-cards__cta.bg-terracotta {
  background-color: rgb(82.8116003288%, 53.2690383938%, 27.4864388869%);
}

.three-cards__cta.bg-gold:hover,
.three-cards__col:hover .three-cards__cta.bg-gold {
  background-color: rgb(70.721055525%, 62.270111783%, 24.4632582005%);
}

/* Variante compacta (three-cards-compact.md): solo título, divider y texto.
   El título va recto (sin itálica) y el divider va pegado al título en vez de anclado abajo,
   para que títulos y dividers queden alineados aunque el texto de cada card tenga distinto largo */
.three-cards__col--compact .text-title {
  font-style: normal;
  font-size: 36px;
  line-height: 42px;
  margin: 0;
}

.three-cards__col--compact .three-cards__divider {
  margin: 14px 0 16px;
}

.three-cards__col--compact .text-caption {
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 24px;
}

/* Variante de eventos (three-cards-events.md): sin eyebrow ni subtítulo; título recto (sin itálica) y en 400.
   El texto usa el .text-caption normal (a diferencia de --compact) y el divider sigue anclado abajo */
.three-cards__col--events .text-title {
  font-style: normal;
  font-weight: 400;
}

/* Variante logo (Yeguada Historia, casas criadoras): fondo sólido detrás del logo en todos los tamaños.
   En phone además el logo baja a 120px (ver media query) */
.three-cards__col--logo .column-image-bg {
  background-color: #0D0C0A;
}

/* Variante foto (Yeguada, yeguas): row con class="three-cards--photo".
   La imagen de fondo de la columna deja de cubrir toda la card: queda arriba con la proporción real de la foto
   (487×620) para que se vea completa, y el divider de WPBakery (primer elemento de la columna) baja el texto
   debajo de la foto + 32px. El ancho de la card es la medida (container-type + cqw), así que la foto y el espaciador
   siempre coinciden. Las cards --logo del mismo row usan un área de la mitad de alto.
   Una card sin eyebrow lleva <span class="text-eyebrow" aria-hidden="true">&nbsp;</span> para que el nombre
   quede alineado con las demás */
.three-cards--photo .three-cards__col {
  container-type: inline-size;
  --three-cards-media: 1.273;
}

.three-cards--photo .three-cards__col--logo {
  --three-cards-media: 0.6365;
}

.three-cards--photo .three-cards__col .column-image-bg-wrap {
  bottom: auto !important;
  height: calc(100cqw * var(--three-cards-media)) !important;
  overflow: hidden;
}

/* Limpio hasta el 60% y se funde al fondo de la card */
.three-cards--photo .three-cards__col .column-image-bg-wrap .inner-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 10, 0) 60%, #0E0E0A 100%);
  pointer-events: none;
}

/* WPBakery pone la altura del divider inline (custom_height), por eso el !important */
.three-cards--photo .three-cards__col .divider-wrap .divider {
  height: calc(100cqw * var(--three-cards-media) + 32px) !important;
}

/* wpautop envuelve el eyebrow en un <p> con padding-bottom de Salient; el espacio eyebrow → nombre queda en 8px */
.three-cards--photo .three-cards__card p:has(> .text-eyebrow) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.three-cards--photo .three-cards__card .text-eyebrow {
  margin-bottom: 8px;
}

/* CTA por negocio: en el markup va en bg-gold (sitio principal); en las páginas de un negocio toma su acento
   y el hover se oscurece a partir de ese color. En three-cards normal cada CTA lleva un color fijo por card */
.page-id-60 .three-cards__col--events .three-cards__cta, .parent-pageid-60 .three-cards__col--events .three-cards__cta {
  background-color: #A6BF88;
}
.page-id-58 .three-cards__col--events .three-cards__cta, .parent-pageid-58 .three-cards__col--events .three-cards__cta {
  background-color: #C8B560;
}
.page-id-62 .three-cards__col--events .three-cards__cta, .parent-pageid-62 .three-cards__col--events .three-cards__cta {
  background-color: #DFA878;
}

.page-id-60 .three-cards__col--events .three-cards__cta:hover, .parent-pageid-60 .three-cards__col--events .three-cards__cta:hover,
.page-id-60 .three-cards__col--events:hover .three-cards__cta,
.parent-pageid-60 .three-cards__col--events:hover .three-cards__cta {
  background-color: rgb(53.8721954356%, 66.8294439087%, 38.3234972678%);
}
.page-id-58 .three-cards__col--events .three-cards__cta:hover, .parent-pageid-58 .three-cards__col--events .three-cards__cta:hover,
.page-id-58 .three-cards__col--events:hover .three-cards__cta,
.parent-pageid-58 .three-cards__col--events:hover .three-cards__cta {
  background-color: rgb(70.721055525%, 62.270111783%, 24.4632582005%);
}
.page-id-62 .three-cards__col--events .three-cards__cta:hover, .parent-pageid-62 .three-cards__col--events .three-cards__cta:hover,
.page-id-62 .three-cards__col--events:hover .three-cards__cta,
.parent-pageid-62 .three-cards__col--events:hover .three-cards__cta {
  background-color: rgb(82.8116003288%, 53.2690383938%, 27.4864388869%);
}

@media only screen and (max-width: 800px) {
  .three-cards__col {
    flex: 0 0 100vw !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    box-sizing: border-box;
  }
  .three-cards__card .text-title {
    font-size: 26px;
    line-height: 32px;
  }
  .three-cards__col--compact .text-title {
    font-size: 28px;
    line-height: 34px;
  }
  .three-cards__col--compact .text-caption {
    font-size: 15px;
    letter-spacing: 1px;
  }
  /* Variante logo en phone: la imagen no llena la card; el logo se queda a 120px sin repetirse.
     Supera el cover !important de arriba por especificidad */
  .three-cards__col.three-cards__col--logo .column-image-bg {
    background-size: 120px !important;
    background-repeat: no-repeat;
  }
}
/* =========================
   RECORDS
   ========================= */
/* Línea inferior en la capa de fondo del row, que sí abarca todo el ancho de la pantalla */
.records-module .row-bg-wrap .inner-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #C8B560;
}

/* Acento por negocio: en el markup el número va en gold y la etiqueta en slate (sitio principal).
   En las páginas de un negocio el número y la línea inferior toman su color, y la etiqueta pasa a ivory */
.page-id-60 .records-module .row-bg-wrap .inner-wrap::after, .parent-pageid-60 .records-module .row-bg-wrap .inner-wrap::after {
  background-color: #A6BF88;
}
.page-id-58 .records-module .row-bg-wrap .inner-wrap::after, .parent-pageid-58 .records-module .row-bg-wrap .inner-wrap::after {
  background-color: #C8B560;
}
.page-id-62 .records-module .row-bg-wrap .inner-wrap::after, .parent-pageid-62 .records-module .row-bg-wrap .inner-wrap::after {
  background-color: #DFA878;
}

.page-id-60 .records__item .text-stat, .parent-pageid-60 .records__item .text-stat {
  color: #A6BF88;
}
.page-id-58 .records__item .text-stat, .parent-pageid-58 .records__item .text-stat {
  color: #C8B560;
}
.page-id-62 .records__item .text-stat, .parent-pageid-62 .records__item .text-stat {
  color: #DFA878;
}

.page-id-60 .records__item .text-eyebrow, .parent-pageid-60 .records__item .text-eyebrow {
  color: #F0EAD8;
}
.page-id-58 .records__item .text-eyebrow, .parent-pageid-58 .records__item .text-eyebrow {
  color: #F0EAD8;
}
.page-id-62 .records__item .text-eyebrow, .parent-pageid-62 .records__item .text-eyebrow {
  color: #F0EAD8;
}

.records__item {
  text-align: center !important;
}

.records__item + .records__item {
  border-left-width: 1px;
  border-left-style: solid;
}

/* Bloque centrado en la columna, texto alineado a la izquierda dentro */
.records__item .wpb_text_column p {
  display: inline-block;
  margin: 0;
  padding-bottom: 0;
  text-align: left;
}

/* wpautop inserta un <br> entre número y etiqueta: con .text-stat en block genera una línea vacía */
.records__item .wpb_text_column br {
  display: none;
}

.records__item .text-stat {
  display: block;
  margin: 0 0 10px;
}

.records__item .text-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 400 !important;
}

/* Cuadrícula 2×2 desde el breakpoint de tablet de Salient (999px): en iPad las columnas ya van a 50%,
   así que las líneas tienen que ser las del 2×2 y no las de desktop */
@media only screen and (max-width: 999px) {
  .records-module .row_col_wrap_12 {
    flex-wrap: wrap !important;
  }
  .records__item {
    width: 50% !important;
  }
  .records__item + .records__item {
    border-left-width: 0;
  }
  .records__item:nth-child(2n) {
    border-left-width: 1px;
    border-left-style: solid;
  }
  .records__item:nth-child(n+3) {
    border-top-width: 1px;
    border-top-style: solid;
  }
}
@media only screen and (max-width: 800px) {
  .records__item .wpb_text_column p {
    text-align: center;
  }
  .records__item .text-stat {
    font-size: 44px;
    line-height: 50px;
  }
}
/* =========================
   CINEMATIC CONTENT BOX
   ========================= */
/* Salient pone background-position inline en .row-bg, por eso el !important */
.cinematic-content-box--reverse .row-bg-wrap .row-bg {
  background-position: -10vw 0 !important;
}

/* El color del borde viene de la utilidad .charcoal en la columna (currentColor) */
.cinematic-content-box__media .img-with-aniamtion-wrap,
.cinematic-content-box__media .inner,
.cinematic-content-box__media .hover-wrap,
.cinematic-content-box__media .hover-wrap-inner {
  width: 100%;
  margin: 0;
}

.cinematic-content-box__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid currentColor;
}

/* wpautop envuelve el eyebrow y el CTA en <p>, que en Salient traen padding-bottom */
.cinematic-content-box__content p {
  margin: 0;
  padding-bottom: 0;
}

.cinematic-content-box__content .text-eyebrow {
  display: block;
  font-size: 14px;
  margin-bottom: 16px;
}

.cinematic-content-box__content .text-heading {
  margin: 0 0 20px;
  padding: 0;
}

.cinematic-content-box__content .text-body {
  margin-bottom: 36px;
}

.cinematic-content-box__cta {
  display: inline-block;
  padding: 14px 28px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.cinematic-content-box__cta:hover {
  color: #111009 !important;
}

.cinematic-content-box__cta.bg-gold:hover {
  background-color: rgb(70.721055525%, 62.270111783%, 24.4632582005%);
}

/* Palabra de color dentro del título: <span class="cinematic-content-box__accent gold">operativa</span>.
   Es una clase aparte de .text-accent porque en este componente .text-accent envuelve todo el título (solo itálica) */
/* Acento por negocio: en el markup el eyebrow y la palabra de color van en gold, y el CTA en bg-gold (sitio principal).
   En las páginas de un negocio toman su color, y el hover del CTA se oscurece a partir de ese color.
   Va después de .bg-gold:hover para ganarle con la misma especificidad */
.page-id-60 .cinematic-content-box__content .text-eyebrow, .parent-pageid-60 .cinematic-content-box__content .text-eyebrow,
.page-id-60 .cinematic-content-box__accent,
.parent-pageid-60 .cinematic-content-box__accent {
  color: #A6BF88;
}
.page-id-58 .cinematic-content-box__content .text-eyebrow, .parent-pageid-58 .cinematic-content-box__content .text-eyebrow,
.page-id-58 .cinematic-content-box__accent,
.parent-pageid-58 .cinematic-content-box__accent {
  color: #C8B560;
}
.page-id-62 .cinematic-content-box__content .text-eyebrow, .parent-pageid-62 .cinematic-content-box__content .text-eyebrow,
.page-id-62 .cinematic-content-box__accent,
.parent-pageid-62 .cinematic-content-box__accent {
  color: #DFA878;
}

.page-id-60 .cinematic-content-box__cta, .parent-pageid-60 .cinematic-content-box__cta {
  background-color: #A6BF88;
}
.page-id-60 .cinematic-content-box__cta:hover, .parent-pageid-60 .cinematic-content-box__cta:hover {
  background-color: rgb(53.8721954356%, 66.8294439087%, 38.3234972678%);
}
.page-id-58 .cinematic-content-box__cta, .parent-pageid-58 .cinematic-content-box__cta {
  background-color: #C8B560;
}
.page-id-58 .cinematic-content-box__cta:hover, .parent-pageid-58 .cinematic-content-box__cta:hover {
  background-color: rgb(70.721055525%, 62.270111783%, 24.4632582005%);
}
.page-id-62 .cinematic-content-box__cta, .parent-pageid-62 .cinematic-content-box__cta {
  background-color: #DFA878;
}
.page-id-62 .cinematic-content-box__cta:hover, .parent-pageid-62 .cinematic-content-box__cta:hover {
  background-color: rgb(82.8116003288%, 53.2690383938%, 27.4864388869%);
}

/* Variante clara (cinematic-content-box-light.md): row con class="cinematic-content-box--light" y bg_color ivory.
   En el markup el acento va en bronze (gold oscurecido para contraste ADA sobre ivory).
   En las páginas de un negocio usa $business-colors-light (fern, bronze, rust). Gana a la regla de arriba por la clase extra del row */
.page-id-60 .cinematic-content-box--light .cinematic-content-box__content .text-eyebrow, .parent-pageid-60 .cinematic-content-box--light .cinematic-content-box__content .text-eyebrow,
.page-id-60 .cinematic-content-box--light .cinematic-content-box__accent,
.parent-pageid-60 .cinematic-content-box--light .cinematic-content-box__accent {
  color: #437604;
}
.page-id-58 .cinematic-content-box--light .cinematic-content-box__content .text-eyebrow, .parent-pageid-58 .cinematic-content-box--light .cinematic-content-box__content .text-eyebrow,
.page-id-58 .cinematic-content-box--light .cinematic-content-box__accent,
.parent-pageid-58 .cinematic-content-box--light .cinematic-content-box__accent {
  color: #776929;
}
.page-id-62 .cinematic-content-box--light .cinematic-content-box__content .text-eyebrow, .parent-pageid-62 .cinematic-content-box--light .cinematic-content-box__content .text-eyebrow,
.page-id-62 .cinematic-content-box--light .cinematic-content-box__accent,
.parent-pageid-62 .cinematic-content-box--light .cinematic-content-box__accent {
  color: #995B24;
}

/* Sin CTA el texto es el último elemento y no necesita el margen inferior */
.cinematic-content-box__content .text-body:last-child {
  margin-bottom: 0;
}

/* Columnas apiladas: el espacio entre imagen y texto va como row-gap del contenedor para que no dependa del orden (mobile-order-*).
   El row es equal_height, así que Salient mantiene .row_col_wrap_12 en flex con wrap debajo de 999px */
@media only screen and (max-width: 999px) {
  .row_col_wrap_12:has(> .cinematic-content-box__media) {
    row-gap: 40px;
  }
}
@media only screen and (max-width: 690px) {
  .row_col_wrap_12:has(> .cinematic-content-box__media) {
    row-gap: 32px;
  }
}
@media only screen and (max-width: 800px) {
  .cinematic-content-box__content .text-heading {
    font-size: 32px;
    line-height: 38px;
  }
  .cinematic-content-box__content .text-body {
    margin-bottom: 28px;
  }
}
/* =========================
   ACTION BANNER
   ========================= */
/* Color de fondo por negocio: el componente es global y su fondo por defecto (bg_color del row) es gold.
   En el home de cada negocio (body.page-id-<id>) y sus subpáginas (body.parent-pageid-<id>) se cambia.
   Salient pone el color inline en .row-bg, por eso el !important.
   El row se detecta por sus columnas (.action-banner__col, que sí llegan al HTML) y no por una clase del row */
.page-id-60 .wpb_row:has(> .row_col_wrap_12 > .action-banner__col) > .row-bg-wrap .row-bg, .parent-pageid-60 .wpb_row:has(> .row_col_wrap_12 > .action-banner__col) > .row-bg-wrap .row-bg {
  background-color: #A6BF88 !important;
}
.page-id-58 .wpb_row:has(> .row_col_wrap_12 > .action-banner__col) > .row-bg-wrap .row-bg, .parent-pageid-58 .wpb_row:has(> .row_col_wrap_12 > .action-banner__col) > .row-bg-wrap .row-bg {
  background-color: #C8B560 !important;
}
.page-id-62 .wpb_row:has(> .row_col_wrap_12 > .action-banner__col) > .row-bg-wrap .row-bg, .parent-pageid-62 .wpb_row:has(> .row_col_wrap_12 > .action-banner__col) > .row-bg-wrap .row-bg {
  background-color: #DFA878 !important;
}

/* Agro: el título va en ink en vez de umber (en el markup va en umber, que es el default del sitio principal y los demás negocios).
   El mapa (60: ink) limita el mixin a Agro */
.page-id-60 .action-banner__title .text-headline, .parent-pageid-60 .action-banner__title .text-headline {
  color: #111009;
}

.action-banner__title .text-headline {
  margin: 0;
  padding: 0;
  font-size: 64px;
  line-height: 70px;
}

/* wpautop envuelve el CTA en <p>, que en Salient trae padding-bottom */
.action-banner__content p {
  margin: 0;
  padding-bottom: 0;
}

.action-banner__content .text-body {
  margin-bottom: 16px;
}

.action-banner__cta {
  display: inline-block;
  padding: 14px 22px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.action-banner__cta:hover {
  color: #F0EAD8 !important;
}

.action-banner__cta.bg-charcoal:hover {
  background-color: #111009;
}

@media (min-width: 800px) and (max-width: 1499px) {
  .action-banner__title .text-headline {
    font-size: 52px;
    line-height: 58px;
  }
}
/* Columnas apiladas: Salient agrega margin-bottom: 25px a cada columna en rows con column_margin="default".
   El espacio entre título y texto lo da el bottom_padding_tablet/phone de la columna del título,
   y la columna vacía de 1/12 solo sirve en desktop */
@media only screen and (max-width: 999px) {
  body .vc_row-fluid .action-banner__col {
    margin-bottom: 0 !important;
  }
  .action-banner__spacer {
    display: none !important;
  }
}
@media only screen and (max-width: 800px) {
  .action-banner__title .text-headline {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.4px;
  }
  .action-banner__content .text-body {
    font-size: 15px;
    line-height: 24px;
  }
}
/* =========================
   MINI CARDS
   ========================= */
/* El gutter de column_margin="default" es padding: 0 1% sobre la propia .wpb_column (grid-system.css de Salient),
   así que el bg-* de la columna también pinta el gutter y las cards se ven pegadas.
   El padding de la card (left_padding_desktop_24px, etc.) va en .vc_column-inner, que es el content box de la columna:
   con content-box el fondo solo cubre la card y el gutter queda del color del row */
.mini-cards__col {
  background-clip: content-box;
}

/* Radio de 2px de la card. Un border-radius en la columna redondearía la caja exterior (con el gutter), no la card,
   así que se recorta la columna a su content box con esquinas redondeadas.
   Si un navegador no soporta la caja de referencia en clip-path, ignora la regla y la card queda con esquinas rectas */
.mini-cards__col {
  clip-path: inset(0 round 2px) content-box;
}

/* Columnas normales de WPBakery (column_margin="default") en rows con equal_height="yes".
   Igual que three-cards: se flexiona toda la cadena de wrappers para que el contenido de cada card
   ocupe la altura igualada: el icono (image_with_animation, alineado a la derecha) queda arriba y el bloque título + divider + texto quede anclado abajo, alineado entre cards */
.mini-cards__col .vc_column-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mini-cards__col .wpb_wrapper,
.mini-cards__col .wpb_text_column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mini-cards__card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* wpautop envuelve el texto en <p>, que en Salient trae padding-bottom */
.mini-cards__card p {
  margin: 0;
  padding-bottom: 0;
}

.mini-cards__card .text-title-sans {
  margin: auto 0 16px;
  padding: 0;
  /* Red de seguridad: si una palabra no cabe en la card, se parte en vez de cortarse en el borde */
  overflow-wrap: break-word;
}

/* Desktop: el título va a 32px (el de .text-title-sans) solo desde 1590px; por debajo baja a 24px hasta el tramo fluido.
   Mismo line-height proporcional (42/32 = 1.3125) */
@media only screen and (min-width: 1000px) and (max-width: 1589px) {
  .mini-cards__card .text-title-sans {
    font-size: 24px;
    line-height: 1.3125;
  }
}
/* Tramo fluido: las columnas siguen lado a lado (Salient las apila desde 999px) pero la card se angosta y el
   título ya no cabe ("microaspersión", "Sostenibilidad"). Ahí el tamaño pasa a vw, ajustado al ancho de la card
   para que la palabra más larga quepa, y topado a los 24px del tramo anterior para que no haya salto.
   Solo aplica a filas de 4 (vc_col-sm-3): en filas de 3 (vc_col-sm-4) la card es más ancha y 24px cabe en todo el tramo */
@media only screen and (min-width: 1000px) and (max-width: 1439px) {
  .mini-cards__col.vc_col-sm-3 .mini-cards__card .text-title-sans {
    font-size: min(24px, 3.15vw - 14px);
  }
}
/* Línea en ink siempre (sitio principal y todos los negocios). Va en el componente y después de las utilidades
   de color, así que le gana a un bg-* en el markup con la misma especificidad */
.mini-cards__divider {
  width: 100%;
  height: 1px;
  margin: 0 0 16px;
  border: none;
  background-color: #111009;
}

/* Fondo de la card: gold por defecto (sitio principal y todos los negocios) y sage solo en Agro.
   El mapa (60: sage) limita el mixin a Agro. El texto y el divider van en ink en todos los casos */
.mini-cards__col {
  background-color: #C8B560;
}
.page-id-60 .mini-cards__col, .parent-pageid-60 .mini-cards__col {
  background-color: #A6BF88;
}

/* Tablet con filas de 4 (1/4): Salient acomoda las cards de 2 en 2 y separa las líneas con margin-bottom: 2%
   en cada columna menos la última (responsive.css + .column_container:last-child). En la segunda línea la tercera
   card lleva margen y la cuarta no, y el flex las estira a la misma altura de línea: la cuarta queda 2% más alta.
   Se cambia ese margen por un padding-bottom igual en todas: el fondo y el clip-path van al content box,
   así que el padding se ve como el mismo hueco, pero ahora todas las columnas miden lo mismo */
@media only screen and (min-width: 691px) and (max-width: 999px) {
  body .wpb_row > .span_12 > .mini-cards__col.one-fourths {
    margin-bottom: 0;
    padding-bottom: 2%;
  }
}
@media only screen and (max-width: 800px) {
  .mini-cards__card .text-title-sans {
    font-size: 26px;
    line-height: 34px;
  }
}
/* =========================
   CARROUSEL TIMELINE
   ========================= */
/* El color de acento lo da la utilidad .gold en la columna (el_class="carrousel-timeline__col gold"):
   la línea de progreso, el año activo y las flechas de Salient lo toman con currentColor.
   Los años inactivos llevan .slate en el markup */
/* ---------- Timeline ---------- */
/* wpautop envuelve el nav en <p> si no va en una sola línea; por eso el markup del nav va en una línea */
.carrousel-timeline__nav {
  position: relative;
  display: flex;
  justify-content: space-evenly;
}

/* Las dos líneas van como pseudo-elementos del nav: el editor de WordPress (TinyMCE) borra los <span> vacíos,
   así que no pueden ir como elementos en el markup.
   ::before es la línea base, en el color de la utilidad .border-charcoal del nav (border-top-color: inherit).
   ::after es el progreso, en el acento de la columna (currentColor) */
.carrousel-timeline__nav::before,
.carrousel-timeline__nav::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  pointer-events: none;
}

/* La línea base se desvanece en los extremos */
.carrousel-timeline__nav::before {
  width: 100%;
  border-top: 1px solid;
  border-top-color: inherit;
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* Ancho = centro del año activo, lo calcula js/junco.js en --carrousel-timeline-progress */
.carrousel-timeline__nav::after {
  width: var(--carrousel-timeline-progress, 0px);
  height: 1px;
  background: linear-gradient(to right, transparent 0%, currentColor 100%);
  transition: width 0.6s cubic-bezier(0.15, 0.75, 0.5, 1);
}

/* Botón de año: punto sobre la línea y año debajo. Se resetean los estilos de <button> de Salient */
.carrousel-timeline__year {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  font-size: 11px;
  line-height: 16px;
  cursor: pointer;
  transition: font-size 0.3s ease;
}

.carrousel-timeline__year::before {
  content: "";
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0 2px, transparent 2.5px);
  transition: border-color 0.3s ease;
}

/* Año activo: hereda el acento de la columna en lugar de .slate */
.carrousel-timeline__year.is-active {
  color: inherit;
  font-size: 16px;
  line-height: 20px;
}

.carrousel-timeline__year.is-active::before {
  border-color: currentColor;
  background: radial-gradient(circle, currentColor 0 3px, transparent 3.5px);
}

.carrousel-timeline__year:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* ---------- Flechas de Salient (flickity_controls="next_prev_arrows_overlaid") ----------
   Salient las dibuja como círculo blanco a 50px del borde; aquí van cuadradas, con borde del acento, pegadas al borde del contenedor.
   El padding de las columnas del slide (left/right_padding_*) deja el espacio para ellas */
.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button {
  width: 42px;
  height: 56px;
  color: inherit;
  background: none;
}

.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button.previous {
  left: 0;
}

.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button.next {
  right: 0;
}

.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button:before {
  border: 1px solid currentColor;
  border-radius: 0;
  background-color: transparent;
}

.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button:hover:before {
  transform: none;
}

/* Salient dibuja la flecha con dos piezas: un SVG (chevron) con alto en % del botón y una raya en :after
   con posición fija para un botón de 40px. Con otro tamaño de botón se descuadran, así que se oculta el SVG
   y el :after dibuja la flecha completa, centrada, con una máscara que toma el acento (currentColor) */
.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button svg {
  display: none;
}

.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .previous:after,
.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .next:after {
  top: 50%;
  left: 50%;
  width: 14px;
  height: 10px;
  margin: -5px 0 0 -7px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M14 5H1.5M5.5 1 1.5 5l4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M14 5H1.5M5.5 1 1.5 5l4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: none;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.15, 0.75, 0.5, 1);
}

/* La flecha de next es la misma, volteada. Salient le pone transform-origin: right al :after de next;
   con eso el scaleX(-1) la voltea sobre su borde derecho y la corre 14px, por eso el origin: center de arriba */
.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .next:after {
  transform: scaleX(-1);
}

.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .previous:hover:after {
  transform: translateX(-3px);
}

.carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .next:hover:after {
  transform: scaleX(-1) translateX(-3px);
}

/* ---------- Slide ---------- */
.carrousel-timeline__media .img-with-aniamtion-wrap,
.carrousel-timeline__media .inner,
.carrousel-timeline__media .hover-wrap,
.carrousel-timeline__media .hover-wrap-inner {
  width: 100%;
  margin: 0;
}

.carrousel-timeline__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* wpautop envuelve el eyebrow en <p>, que en Salient trae padding-bottom */
.carrousel-timeline__content p {
  margin: 0;
  padding-bottom: 0;
}

.carrousel-timeline__content .text-eyebrow {
  display: block;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 16px;
}

/* Misma escala que headline1--compact / título de hero-int: 60 → 52 → 36 */
.carrousel-timeline__content .text-headline {
  margin: 0;
  padding: 0;
  font-size: 60px;
  line-height: 70px;
  letter-spacing: -0.6px;
}

.carrousel-timeline__divider {
  height: 1px;
  margin: 32px 0 36px;
  border: none;
}

.carrousel-timeline__content .text-lead {
  font-size: 24px;
  line-height: 42px;
}

/* ---------- Acento por negocio ----------
   Columna (línea de progreso, año activo y flechas), eyebrow, palabra en .text-accent y divisor:
   gold por defecto → acento del negocio (sage / gold / terracotta) */
.page-id-60 .carrousel-timeline__col, .parent-pageid-60 .carrousel-timeline__col,
.page-id-60 .carrousel-timeline__content .text-eyebrow,
.parent-pageid-60 .carrousel-timeline__content .text-eyebrow,
.page-id-60 .carrousel-timeline__content .text-accent,
.parent-pageid-60 .carrousel-timeline__content .text-accent {
  color: #A6BF88;
}
.page-id-58 .carrousel-timeline__col, .parent-pageid-58 .carrousel-timeline__col,
.page-id-58 .carrousel-timeline__content .text-eyebrow,
.parent-pageid-58 .carrousel-timeline__content .text-eyebrow,
.page-id-58 .carrousel-timeline__content .text-accent,
.parent-pageid-58 .carrousel-timeline__content .text-accent {
  color: #C8B560;
}
.page-id-62 .carrousel-timeline__col, .parent-pageid-62 .carrousel-timeline__col,
.page-id-62 .carrousel-timeline__content .text-eyebrow,
.parent-pageid-62 .carrousel-timeline__content .text-eyebrow,
.page-id-62 .carrousel-timeline__content .text-accent,
.parent-pageid-62 .carrousel-timeline__content .text-accent {
  color: #DFA878;
}

.page-id-60 .carrousel-timeline__divider, .parent-pageid-60 .carrousel-timeline__divider {
  background-color: #A6BF88;
}
.page-id-58 .carrousel-timeline__divider, .parent-pageid-58 .carrousel-timeline__divider {
  background-color: #C8B560;
}
.page-id-62 .carrousel-timeline__divider, .parent-pageid-62 .carrousel-timeline__divider {
  background-color: #DFA878;
}

/* ---------- Responsive ---------- */
@media (min-width: 800px) and (max-width: 1499px) {
  .carrousel-timeline__content .text-headline {
    font-size: 52px;
    line-height: 60px;
  }
  .carrousel-timeline__content .text-lead {
    font-size: 20px;
    line-height: 34px;
  }
}
@media only screen and (max-width: 800px) {
  .carrousel-timeline__content .text-headline {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.4px;
  }
  .carrousel-timeline__content .text-lead {
    font-size: 18px;
    line-height: 30px;
  }
  .carrousel-timeline__divider {
    margin: 24px 0 24px;
  }
}
/* En phone se ocultan las flechas: las columnas no tienen padding lateral y se navega con swipe o con el timeline */
@media only screen and (max-width: 690px) {
  .carrousel-timeline__col .nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button {
    display: none;
  }
  .carrousel-timeline__year {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .carrousel-timeline__year.is-active {
    font-size: 13px;
  }
}
/* =========================
   TIMELINE VERTICAL FOTOS
   ========================= */
/* Un row por etapa: título (.text-headline) con el rango de años debajo (.text-display),
   y un vc_row_inner por fila: año + línea (1/4) | foto + texto (7/12).
   El resaltado va en gold en el markup (años y rango) */
/* ---------- Título de la etapa ---------- */
.timeline-vertical-fotos__heading {
  margin: 0;
  padding: 0;
}

.timeline-vertical-fotos__heading .text-headline,
.timeline-vertical-fotos__heading .text-display {
  display: block;
}

.timeline-vertical-fotos__heading .text-headline {
  font-weight: 400;
  font-size: 60px;
  line-height: 66px;
  letter-spacing: -0.6px;
}

.timeline-vertical-fotos__heading .text-display {
  font-weight: 400;
  font-size: 100px;
  line-height: 104px;
  letter-spacing: -1px;
}

/* ---------- Año + línea ---------- */
/* wpautop / Salient: sin margen ni padding-bottom en los <p> de las filas */
.timeline-vertical-fotos__year p,
.timeline-vertical-fotos__entry p {
  margin: 0;
  padding-bottom: 0;
}

/* La línea va como ::after del año (TinyMCE borra los <span> vacíos) y llena el resto de la columna.
   Su color viene de la utilidad .border-charcoal del <p> (border-top-color: inherit) */
.timeline-vertical-fotos__year .text-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 48px;
  line-height: 56px;
}

.timeline-vertical-fotos__year .text-heading::after {
  content: "";
  flex: 1;
  border-top: 1px solid;
  border-top-color: inherit;
}

/* ---------- Foto + texto ---------- */
/* El avatar (image_with_animation) y el text block van lado a lado */
.timeline-vertical-fotos__entry .wpb_wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

.timeline-vertical-fotos__entry .img-with-aniamtion-wrap {
  flex: none;
  width: 40px;
  margin: 0;
}

.timeline-vertical-fotos__entry .wpb_text_column {
  flex: 1;
  margin: 0;
}

/* Foto circular; el borde toma el color de la utilidad .stone de la columna (currentColor) */
.timeline-vertical-fotos__entry img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid currentColor;
  border-radius: 50%;
}

/* ---------- Responsive ---------- */
@media (min-width: 800px) and (max-width: 1499px) {
  .timeline-vertical-fotos__heading .text-headline {
    font-size: 52px;
    line-height: 58px;
  }
  .timeline-vertical-fotos__heading .text-display {
    font-size: 80px;
    line-height: 86px;
  }
  .timeline-vertical-fotos__year .text-heading {
    font-size: 42px;
    line-height: 50px;
  }
}
@media only screen and (max-width: 800px) {
  .timeline-vertical-fotos__heading .text-headline {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.4px;
  }
  .timeline-vertical-fotos__heading .text-display {
    font-size: 56px;
    line-height: 62px;
    letter-spacing: -0.6px;
  }
  .timeline-vertical-fotos__year .text-heading {
    font-size: 36px;
    line-height: 42px;
  }
}
/* Columnas apiladas: el año queda arriba de la foto + texto, así que la línea ya no conecta nada */
@media only screen and (max-width: 999px) {
  .timeline-vertical-fotos__year .text-heading::after {
    display: none;
  }
}
/* =========================
   QUOTE
   ========================= */
/* Cita centrada entre dos líneas (arriba y abajo) y un texto de cierre debajo.
   El color de las líneas viene de la utilidad .border-ash del wrapper */
/* wpautop / Salient: sin margen ni padding-bottom en los <p> */
.quote__box p,
.quote__text p {
  margin: 0;
  padding-bottom: 0;
}

.quote__box {
  padding: 40px 0 32px;
  /* Solo ancho y estilo: el color lo pone .border-ash (un shorthand border-top: 1px solid lo reiniciaría) */
  border-width: 1px 0;
  border-style: solid;
  text-align: center;
}

.quote__box .text-quote {
  margin-bottom: 16px;
}

.quote__box .text-eyebrow {
  display: block;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 2.4px;
}

@media (min-width: 800px) and (max-width: 1499px) {
  .quote__box .text-quote {
    font-size: 36px;
    line-height: 46px;
  }
}
@media only screen and (max-width: 800px) {
  .quote__box {
    padding: 28px 0 24px;
  }
  .quote__box .text-quote {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.4px;
  }
  .quote__box .text-eyebrow {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2px;
  }
}
/* ---------- Variante alineada a la izquierda (quote-left.md) ----------
   class="quote--left" en el row. Fondo claro (linen): cita .ink, firma .slate y líneas .border-mist en el markup.
   La cita es un poco más chica que la base y se corta a ~30 caracteres por línea */
.quote--left .quote__box {
  text-align: left;
}

.quote--left .quote__box .text-quote {
  max-width: 30ch;
  font-size: 34px;
  line-height: 44px;
  letter-spacing: -0.6px;
}

.quote--left .quote__box .text-eyebrow {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 3px;
}

@media (min-width: 800px) and (max-width: 1499px) {
  .quote--left .quote__box .text-quote {
    font-size: 30px;
    line-height: 40px;
  }
}
@media only screen and (max-width: 800px) {
  .quote--left .quote__box .text-quote {
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -0.4px;
  }
  .quote--left .quote__box .text-eyebrow {
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 2px;
  }
}
/* =========================
   EVENTOS LISTA
   ========================= */
/* Un row por evento sobre fondo ivory: foto (5/12) | fecha, título, texto y cartel (7/12), y una línea abajo.
   El row lleva una sola columna 1/1 (el padding lateral del row da el margen); el primer evento lleva 128px arriba */
/* ---------- Foto ---------- */
.eventos-lista__media .img-with-aniamtion-wrap,
.eventos-lista__media .inner,
.eventos-lista__media .hover-wrap,
.eventos-lista__media .hover-wrap-inner {
  width: 100%;
  margin: 0;
}

/* El color del borde viene de la utilidad .charcoal de la columna (currentColor) */
.eventos-lista__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid currentColor;
}

/* ---------- Texto ---------- */
/* wpautop / Salient: sin margen ni padding-bottom en los <p> */
.eventos-lista__content p {
  margin: 0;
  padding-bottom: 0;
}

.eventos-lista__content .text-eyebrow {
  display: block;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 2.8px;
  margin-bottom: 8px;
}

/* Título recto (sin la itálica de .text-title) */
.eventos-lista__content .text-title {
  margin: 0 0 20px;
  padding: 0;
  font-style: normal;
}

.eventos-lista__content .text-body {
  margin-bottom: 24px;
}

/* ---------- Cartel completo ---------- */
/* Fondo .bg-cream y línea izquierda en el acento (.border-gold en el markup; por negocio abajo) */
.eventos-lista__cartel {
  padding: 16px 20px 18px;
  border-width: 0 0 0 2px;
  border-style: solid;
}

.eventos-lista__cartel .text-eyebrow {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  margin-bottom: 16px;
}

/* Salient da margen y quita las viñetas de los <ul> del contenido */
.eventos-lista__list {
  margin: 0 !important;
  padding: 0 0 0 20px;
  list-style: disc outside;
}

.eventos-lista__list li {
  margin: 0;
  padding: 0;
  list-style: inherit;
  line-height: 24px;
}

.eventos-lista__list strong {
  font-weight: 600;
}

/* ---------- Línea entre eventos ---------- */
.eventos-lista__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
}

/* ---------- Acento por negocio ----------
   Línea izquierda del cartel: gold por defecto → sage / gold / terracotta.
   Es decorativa (no texto), así que usa los acentos normales y no $business-colors-light */
.page-id-60 .eventos-lista__cartel, .parent-pageid-60 .eventos-lista__cartel {
  border-color: #A6BF88;
}
.page-id-58 .eventos-lista__cartel, .parent-pageid-58 .eventos-lista__cartel {
  border-color: #C8B560;
}
.page-id-62 .eventos-lista__cartel, .parent-pageid-62 .eventos-lista__cartel {
  border-color: #DFA878;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 800px) {
  .eventos-lista__content .text-eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
  }
  .eventos-lista__content .text-title {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 16px;
  }
  .eventos-lista__cartel {
    padding: 14px 16px 16px;
  }
}
/* =========================
   CONTACTO
   ========================= */
/* Fondo ivory. Columnas: vacía (1/6) | formulario CF7 (5/12) | vacía (1/12) | Pertenencia + logos (1/4) | vacía (1/12).
   El formulario es Contact Form 7 (plantilla en components/contacto-form.md); el shortcode lleva
   html_class="contacto-form slate", así que la <form> hereda slate y los campos lo toman con currentColor.
   functions.php apaga el autop de CF7, por eso la plantilla no trae <p> ni <br /> */
/* ---------- Textos ---------- */
/* wpautop / Salient: sin margen ni padding-bottom en los <p> */
.contacto__eyebrow,
.contacto__pertenencia p {
  margin: 0;
  padding-bottom: 0;
}

.contacto__pertenencia .text-heading {
  margin: 0 0 12px;
  padding: 0;
}

/* ---------- Logos ---------- */
/* Mosaico de 2 por fila; cada logo en un recuadro de 100px con borde en currentColor (.slate de la columna) */
.contacto__logos .wpb_wrapper {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  gap: 28px 44px;
}

.contacto__logos .img-with-aniamtion-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: 0 !important;
  padding: 12px;
}

.contacto__logos .inner,
.contacto__logos .hover-wrap,
.contacto__logos .hover-wrap-inner {
  margin: 0;
}

.contacto__logos img {
  display: block;
  max-width: 100%;
  max-height: 76px;
  object-fit: contain;
}

/* ---------- Formulario ---------- */
/* Separación entre las dos columnas de campos = gutter default de Salient (padding 1% a cada lado de cada columna,
   o sea 2% del ancho del row). Un % aquí se mediría contra la <form>, no contra el row, por eso va en vw */
.contacto-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 2vw;
}

.contacto-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.contacto-form__field--full {
  grid-column: 1/-1;
}

/* Salient pinta los campos con su propio gris, radio de 4px y borde transparente de 2px
   (input[type=text] y body.material ...:focus con el acento #3452ff !important), por encima de cualquier
   utilidad de color; por eso aquí van los colores del campo y los !important */
.contacto-form .wpcf7-text,
.contacto-form .wpcf7-email,
.contacto-form .wpcf7-tel,
.contacto-form .wpcf7-select,
.contacto-form .wpcf7-textarea {
  display: block;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 16px !important;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: inherit !important;
  background-color: #F9F4E9 !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease;
}

.contacto-form .wpcf7-textarea {
  height: 200px;
  padding: 16px !important;
  resize: vertical;
}

.contacto-form .wpcf7-text::placeholder,
.contacto-form .wpcf7-email::placeholder,
.contacto-form .wpcf7-tel::placeholder,
.contacto-form .wpcf7-textarea::placeholder {
  color: inherit;
  opacity: 1;
  text-transform: uppercase;
}

/* Select: la flecha nativa se cambia por una ↓ en ink */
.contacto-form .wpcf7-select {
  appearance: none;
  padding-right: 44px !important;
  text-transform: uppercase;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none' stroke='%23111009' stroke-width='1.4'%3E%3Cpath d='M5 1v10M1 7l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: 8px 10px;
}

/* Foco: borde en el acento claro del negocio (bronze en el sitio principal) */
.contacto-form .wpcf7-text:focus,
.contacto-form .wpcf7-email:focus,
.contacto-form .wpcf7-tel:focus,
.contacto-form .wpcf7-select:focus,
.contacto-form .wpcf7-textarea:focus {
  outline: none;
  border-color: #776929 !important;
}

/* ---------- Interés en visita (radio con look de checkbox) ---------- */
.contacto-form__visita {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.contacto-form__visita .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.contacto-form__visita .wpcf7-list-item {
  margin: 0;
}

.contacto-form__visita label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.contacto-form__visita input[type=radio] {
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
  cursor: pointer;
}

/* Marcado: fondo en el acento (gold por defecto; por negocio abajo) y palomita en linen */
.contacto-form__visita input[type=radio]:checked {
  background-color: #C8B560;
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none' stroke='%23F9F4E9' stroke-width='1.4'%3E%3Cpath d='M1 4l3 3 5-6'/%3E%3C/svg%3E");
}

.contacto-form__visita input[type=radio]:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

/* Mismo tratamiento que .text-eyebrow (CF7 genera este <span>, no se le puede poner clase) */
.contacto-form__visita .wpcf7-list-item-label {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---------- Términos ----------
   Texto .text-caption y enlace .ink en el markup; aquí solo el espacio, el peso y el subrayado.
   Salient pone su acento en a:hover, así que el enlace se queda en ink */
.contacto-form__terminos {
  margin-top: 32px;
}

.contacto-form__terminos a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contacto-form__terminos a:hover {
  color: #111009 !important;
}

/* ---------- Enviar ---------- */
/* Salient fuerza fondo #3452ff !important (también en hover), texto blanco, 4px de radio y su padding;
   por eso el color y la tipografía (la de .text-button) van aquí y no como utilidades en el tag */
.wpcf7-form.contacto-form input[type=submit].wpcf7-submit {
  display: block;
  min-width: 160px;
  margin-top: 52px;
  padding: 15px 40px !important;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #111009 !important;
  background-color: #C8B560 !important;
  border: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease;
}

.wpcf7-form.contacto-form input[type=submit].wpcf7-submit:hover,
.wpcf7-form.contacto-form input[type=submit].wpcf7-submit:focus {
  background-color: rgb(70.721055525%, 62.270111783%, 24.4632582005%) !important;
}

/* ---------- Mensajes de CF7 ----------
   Salient (cf7.css) pinta el aviso de campo como caja blanca con sombra, y su "label span" le da el azul del acento del tema.
   Aquí va como texto simple debajo del campo, en el acento claro del negocio (bronze por defecto; por negocio abajo).
   El campo inválido toma el mismo color en el borde */
.contacto-form .wpcf7-not-valid-tip {
  position: static;
  display: block;
  margin: 8px 0 0;
  padding: 0 !important;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  color: #776929 !important;
  background: none !important;
  border: none;
  box-shadow: none !important;
}

.contacto-form .wpcf7-not-valid {
  border-color: #776929 !important;
}

/* Mensaje general al enviar (error o éxito): sin la caja blanca de Salient, con borde en el acento claro */
.contacto-form .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 12px 16px !important;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #111009 !important;
  background-color: #F9F4E9 !important;
  border: 1px solid #776929 !important;
}

/* Asterisco de campo obligatorio (<i aria-hidden="true">*</i> en la etiqueta): recto, en el acento claro
   (bronze por defecto; por negocio abajo) */
.contacto-form i[aria-hidden=true] {
  margin-left: 2px;
  font-style: normal;
  color: #776929;
}

/* ---------- Acento por negocio ----------
   Eyebrow «Introduce tu información», borde de foco, avisos de validación, asterisco de obligatorio y borde del campo inválido: bronze → fern / bronze / rust (acentos claros, son texto o borde sobre ivory).
   Casilla marcada y botón Enviar (con su hover): gold → sage / gold / terracotta (acentos normales, decorativos) */
.page-id-60 .contacto__eyebrow, .parent-pageid-60 .contacto__eyebrow {
  color: #437604;
}
.page-id-58 .contacto__eyebrow, .parent-pageid-58 .contacto__eyebrow {
  color: #776929;
}
.page-id-62 .contacto__eyebrow, .parent-pageid-62 .contacto__eyebrow {
  color: #995B24;
}

.page-id-60 .contacto-form .wpcf7-text:focus, .parent-pageid-60 .contacto-form .wpcf7-text:focus,
.page-id-60 .contacto-form .wpcf7-email:focus,
.parent-pageid-60 .contacto-form .wpcf7-email:focus,
.page-id-60 .contacto-form .wpcf7-tel:focus,
.parent-pageid-60 .contacto-form .wpcf7-tel:focus,
.page-id-60 .contacto-form .wpcf7-select:focus,
.parent-pageid-60 .contacto-form .wpcf7-select:focus,
.page-id-60 .contacto-form .wpcf7-textarea:focus,
.parent-pageid-60 .contacto-form .wpcf7-textarea:focus {
  border-color: #437604 !important;
}
.page-id-58 .contacto-form .wpcf7-text:focus, .parent-pageid-58 .contacto-form .wpcf7-text:focus,
.page-id-58 .contacto-form .wpcf7-email:focus,
.parent-pageid-58 .contacto-form .wpcf7-email:focus,
.page-id-58 .contacto-form .wpcf7-tel:focus,
.parent-pageid-58 .contacto-form .wpcf7-tel:focus,
.page-id-58 .contacto-form .wpcf7-select:focus,
.parent-pageid-58 .contacto-form .wpcf7-select:focus,
.page-id-58 .contacto-form .wpcf7-textarea:focus,
.parent-pageid-58 .contacto-form .wpcf7-textarea:focus {
  border-color: #776929 !important;
}
.page-id-62 .contacto-form .wpcf7-text:focus, .parent-pageid-62 .contacto-form .wpcf7-text:focus,
.page-id-62 .contacto-form .wpcf7-email:focus,
.parent-pageid-62 .contacto-form .wpcf7-email:focus,
.page-id-62 .contacto-form .wpcf7-tel:focus,
.parent-pageid-62 .contacto-form .wpcf7-tel:focus,
.page-id-62 .contacto-form .wpcf7-select:focus,
.parent-pageid-62 .contacto-form .wpcf7-select:focus,
.page-id-62 .contacto-form .wpcf7-textarea:focus,
.parent-pageid-62 .contacto-form .wpcf7-textarea:focus {
  border-color: #995B24 !important;
}

.page-id-60 .contacto-form i[aria-hidden=true], .parent-pageid-60 .contacto-form i[aria-hidden=true],
.page-id-60 .contacto-form .wpcf7-not-valid-tip,
.parent-pageid-60 .contacto-form .wpcf7-not-valid-tip {
  color: #437604 !important;
}
.page-id-58 .contacto-form i[aria-hidden=true], .parent-pageid-58 .contacto-form i[aria-hidden=true],
.page-id-58 .contacto-form .wpcf7-not-valid-tip,
.parent-pageid-58 .contacto-form .wpcf7-not-valid-tip {
  color: #776929 !important;
}
.page-id-62 .contacto-form i[aria-hidden=true], .parent-pageid-62 .contacto-form i[aria-hidden=true],
.page-id-62 .contacto-form .wpcf7-not-valid-tip,
.parent-pageid-62 .contacto-form .wpcf7-not-valid-tip {
  color: #995B24 !important;
}

.page-id-60 .contacto-form .wpcf7-not-valid, .parent-pageid-60 .contacto-form .wpcf7-not-valid,
.page-id-60 .contacto-form .wpcf7-response-output,
.parent-pageid-60 .contacto-form .wpcf7-response-output {
  border-color: #437604 !important;
}
.page-id-58 .contacto-form .wpcf7-not-valid, .parent-pageid-58 .contacto-form .wpcf7-not-valid,
.page-id-58 .contacto-form .wpcf7-response-output,
.parent-pageid-58 .contacto-form .wpcf7-response-output {
  border-color: #776929 !important;
}
.page-id-62 .contacto-form .wpcf7-not-valid, .parent-pageid-62 .contacto-form .wpcf7-not-valid,
.page-id-62 .contacto-form .wpcf7-response-output,
.parent-pageid-62 .contacto-form .wpcf7-response-output {
  border-color: #995B24 !important;
}

.page-id-60 .contacto-form__visita input[type=radio]:checked, .parent-pageid-60 .contacto-form__visita input[type=radio]:checked {
  background-color: #A6BF88;
}
.page-id-58 .contacto-form__visita input[type=radio]:checked, .parent-pageid-58 .contacto-form__visita input[type=radio]:checked {
  background-color: #C8B560;
}
.page-id-62 .contacto-form__visita input[type=radio]:checked, .parent-pageid-62 .contacto-form__visita input[type=radio]:checked {
  background-color: #DFA878;
}

.page-id-60 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit, .parent-pageid-60 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit {
  background-color: #A6BF88 !important;
}
.page-id-60 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:hover, .page-id-60 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:focus, .parent-pageid-60 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:hover, .parent-pageid-60 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:focus {
  background-color: rgb(53.8721954356%, 66.8294439087%, 38.3234972678%) !important;
}
.page-id-58 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit, .parent-pageid-58 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit {
  background-color: #C8B560 !important;
}
.page-id-58 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:hover, .page-id-58 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:focus, .parent-pageid-58 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:hover, .parent-pageid-58 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:focus {
  background-color: rgb(70.721055525%, 62.270111783%, 24.4632582005%) !important;
}
.page-id-62 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit, .parent-pageid-62 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit {
  background-color: #DFA878 !important;
}
.page-id-62 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:hover, .page-id-62 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:focus, .parent-pageid-62 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:hover, .parent-pageid-62 .wpcf7-form.contacto-form input[type=submit].wpcf7-submit:focus {
  background-color: rgb(82.8116003288%, 53.2690383938%, 27.4864388869%) !important;
}

/* ---------- Responsive ---------- */
/* Tablet: las columnas se apilan (formulario arriba, Pertenencia abajo); los logos caben en una fila */
@media only screen and (max-width: 999px) {
  .contacto__logos .wpb_wrapper {
    grid-template-columns: repeat(5, 100px);
    gap: 24px;
  }
}
@media only screen and (max-width: 690px) {
  .contacto-form__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .contacto-form__visita {
    margin-top: 28px;
  }
  .wpcf7-form.contacto-form input[type=submit].wpcf7-submit {
    width: 100%;
    margin-top: 40px;
  }
  .contacto__logos .wpb_wrapper {
    grid-template-columns: repeat(3, 88px);
    gap: 20px;
  }
  .contacto__logos .img-with-aniamtion-wrap {
    width: 88px;
    height: 88px;
    padding: 10px;
  }
  .contacto__logos img {
    max-height: 66px;
  }
}
/* =========================
   LIGHTBOX
   =========================
   Aviso modal que arma js/junco.js (window.juncoLightbox), p. ej. al enviar un formulario CF7 con «junco_lightbox: on».
   No lleva shortcode: el JS inserta el markup al final del <body> la primera vez que se abre.
   Colores en el markup del JS, como en los demás componentes: fondo .bg-ink en el overlay, caja .bg-linen con línea
   superior .border-gold, eyebrow .bronze, título .ink, texto .bark y botón .bg-gold con texto .ink */
.junco-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.junco-lightbox[hidden] {
  display: none;
}

.junco-lightbox.is-open {
  opacity: 1;
}

/* Sin scroll de la página mientras está abierto */
html.junco-lightbox-open,
html.junco-lightbox-open body {
  overflow: hidden;
}

.junco-lightbox__overlay {
  position: absolute;
  inset: 0;
  opacity: 0.72;
  cursor: pointer;
}

.junco-lightbox__box {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 56px 48px 48px;
  border-width: 2px 0 0;
  border-style: solid;
  text-align: center;
  transform: translateY(16px);
  transition: transform 0.4s cubic-bezier(0.15, 0.75, 0.5, 1);
}

.junco-lightbox.is-open .junco-lightbox__box {
  transform: none;
}

.junco-lightbox__box:focus {
  outline: none;
}

/* ---------- Textos ---------- */
.junco-lightbox__eyebrow {
  display: block;
  margin-bottom: 16px;
}

.junco-lightbox__title {
  margin: 0 0 16px;
  padding: 0;
}

.junco-lightbox__text {
  margin: 0 0 36px;
  padding: 0;
}

/* ---------- Cerrar (×) ----------
   Las dos rayas son pseudo-elementos en currentColor (.ink del botón). Se resetean los estilos de <button> de Salient */
.junco-lightbox__x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  cursor: pointer;
}

.junco-lightbox__x::before,
.junco-lightbox__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1px;
  margin-left: -9px;
  background-color: currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.junco-lightbox__x::after {
  transform: rotate(-45deg);
}

.junco-lightbox__x:hover::before {
  transform: rotate(135deg);
}

.junco-lightbox__x:hover::after {
  transform: rotate(45deg);
}

.junco-lightbox__x:focus-visible,
.junco-lightbox__cta:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

/* ---------- Botón ----------
   Mismo tratamiento que el Enviar del formulario de contacto (tipografía de .text-button) */
.junco-lightbox__cta {
  display: inline-block;
  min-width: 160px;
  margin: 0;
  padding: 15px 40px !important;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.junco-lightbox__cta.bg-gold:hover {
  background-color: rgb(70.721055525%, 62.270111783%, 24.4632582005%);
}

/* Salient cambia el color del texto de los botones en hover; aquí se queda en ink */
.junco-lightbox__cta:hover {
  color: #111009 !important;
}

/* El lightbox ya avisa del envío: se oculta el mensaje de éxito de CF7 debajo del formulario (los errores sí se ven) */
.wpcf7-form[data-junco-lightbox=on].sent .wpcf7-response-output {
  display: none !important;
}

/* ---------- Acento por negocio ----------
   Línea superior de la caja y botón (con su hover): gold → sage / gold / terracotta (decorativos).
   Eyebrow: bronze → fern / bronze / rust (texto sobre linen, acentos claros).
   El lightbox cuelga del <body>, así que las clases page-id / parent-pageid del body aplican igual */
.page-id-60 .junco-lightbox__box, .parent-pageid-60 .junco-lightbox__box {
  border-color: #A6BF88;
}
.page-id-58 .junco-lightbox__box, .parent-pageid-58 .junco-lightbox__box {
  border-color: #C8B560;
}
.page-id-62 .junco-lightbox__box, .parent-pageid-62 .junco-lightbox__box {
  border-color: #DFA878;
}

.page-id-60 .junco-lightbox__cta, .parent-pageid-60 .junco-lightbox__cta {
  background-color: #A6BF88;
}
.page-id-60 .junco-lightbox__cta:hover, .parent-pageid-60 .junco-lightbox__cta:hover {
  background-color: rgb(53.8721954356%, 66.8294439087%, 38.3234972678%);
}
.page-id-58 .junco-lightbox__cta, .parent-pageid-58 .junco-lightbox__cta {
  background-color: #C8B560;
}
.page-id-58 .junco-lightbox__cta:hover, .parent-pageid-58 .junco-lightbox__cta:hover {
  background-color: rgb(70.721055525%, 62.270111783%, 24.4632582005%);
}
.page-id-62 .junco-lightbox__cta, .parent-pageid-62 .junco-lightbox__cta {
  background-color: #DFA878;
}
.page-id-62 .junco-lightbox__cta:hover, .parent-pageid-62 .junco-lightbox__cta:hover {
  background-color: rgb(82.8116003288%, 53.2690383938%, 27.4864388869%);
}

.page-id-60 .junco-lightbox__eyebrow, .parent-pageid-60 .junco-lightbox__eyebrow {
  color: #437604;
}
.page-id-58 .junco-lightbox__eyebrow, .parent-pageid-58 .junco-lightbox__eyebrow {
  color: #776929;
}
.page-id-62 .junco-lightbox__eyebrow, .parent-pageid-62 .junco-lightbox__eyebrow {
  color: #995B24;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 690px) {
  .junco-lightbox__box {
    padding: 48px 24px 32px;
  }
  .junco-lightbox__title {
    font-size: 32px;
    line-height: 38px;
  }
  .junco-lightbox__cta {
    width: 100%;
  }
}
/* =========================
   DATOS LISTA
   =========================
   Tabla de datos (p. ej. floración / florece / cosecha) sobre fondo ivory, en una columna 2/3 centrada con dos vacías de 1/6.
   Es un <table> en un text block: WPBakery no tiene elemento de tabla.
   Colores en el markup: encabezados .text-eyebrow .bronze, celdas .text-body .bark,
   línea bajo el encabezado .border-ash en el <thead> y líneas entre filas .border-mist en el <tbody>.
   Las celdas toman el color de línea de su grupo con border-color: inherit (tr → thead/tbody) */
/* Salient (style.css) pinta las tablas de .main-content con fondo blanco, filas cebra (#fcfcfc), bordes #ececec en cada celda,
   padding de 10px, 14px en los td y negrita 700 en los th, con selectores como
   body:not(.woocommerce-cart) .main-content tr td:first-child (especificidad 0,3,3). Por eso los reinicios llevan !important */
.datos-lista__table {
  width: 100%;
  margin: 0 !important;
  border: none !important;
  border-collapse: collapse;
  table-layout: fixed;
  background-color: transparent !important;
}

/* Solo el estilo: un shorthand border: none también reiniciaría border-color y pisaría .border-ash / .border-mist del markup */
.datos-lista__table thead,
.datos-lista__table tbody {
  border-style: none;
}

.datos-lista__table tr {
  border-color: inherit;
  background-color: transparent !important;
}

.datos-lista__table th,
.datos-lista__table td {
  padding: 22px 24px 22px 0 !important;
  text-align: left;
  vertical-align: top;
  border-style: none none solid none !important;
  border-width: 0 0 1px 0 !important;
  border-color: inherit !important;
}

/* Tamaño de .text-body del <table> (Salient pone 14px en los td). Sin color aquí: las celdas lo heredan del <table>
   y un color: inherit le ganaría a la utilidad de color de una celda (p. ej. .slate en las etiquetas de --side) */
.datos-lista__table td {
  font-size: inherit !important;
}

/* Tratamiento de .text-eyebrow del markup, más chico; Salient pone 700 en los th */
.datos-lista__table th {
  padding-top: 0 !important;
  padding-bottom: 14px !important;
  font-size: 12px;
  font-weight: 600 !important;
  letter-spacing: 1px;
}

/* Anchos de columna, medidos del diseño: 24% / 36% / resto */
.datos-lista__table th:nth-child(1) {
  width: 24%;
}

.datos-lista__table th:nth-child(2) {
  width: 36%;
}

/* ---------- Variante lateral (contacto-side-agro.md) ----------
   Sin encabezado: cada fila es etiqueta (td .text-eyebrow .slate) | valor. La primera fila no lleva padding arriba.
   td fuerza font-size: inherit (arriba), así que la etiqueta recupera su tamaño aquí; line-height igual al del valor
   para que ambos queden en la misma línea */
.datos-lista__table--side td:first-child {
  width: 38%;
  font-size: 12px !important;
  line-height: 26px;
  letter-spacing: 1px;
}

.datos-lista__table--side tr:first-child td {
  padding-top: 0 !important;
}

/* ---------- Acento por negocio ----------
   Encabezados: bronze → fern / bronze / rust (texto sobre ivory, acentos claros) */
.page-id-60 .datos-lista__table th, .parent-pageid-60 .datos-lista__table th {
  color: #437604;
}
.page-id-58 .datos-lista__table th, .parent-pageid-58 .datos-lista__table th {
  color: #776929;
}
.page-id-62 .datos-lista__table th, .parent-pageid-62 .datos-lista__table th {
  color: #995B24;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 690px) {
  .datos-lista__table {
    font-size: 14px;
    line-height: 22px;
  }
  .datos-lista__table th,
  .datos-lista__table td {
    padding: 16px 12px 16px 0 !important;
  }
  .datos-lista__table th {
    padding-top: 0 !important;
    padding-bottom: 12px !important;
    font-size: 11px;
    line-height: 16px;
  }
  .datos-lista__table--side td:first-child {
    font-size: 11px !important;
    line-height: 22px;
  }
  .datos-lista__table th:nth-child(1) {
    width: 30%;
  }
  .datos-lista__table th:nth-child(2) {
    width: 35%;
  }
}
/* ---------- Variante panel (datos-lista-panel.md) ----------
   La tabla --side dentro de un recuadro: <div class="datos-lista__panel bg-linen border-ash"> envuelve el <table>.
   Fondo y color del borde vienen de las utilidades del markup; aquí solo ancho, radio y paddings.
   Todas las filas llevan padding arriba (en --side la primera no) y la última no lleva línea: el borde del panel la cierra */
.datos-lista__panel {
  padding: 6px 24px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}

.datos-lista__panel .datos-lista__table td,
.datos-lista__panel .datos-lista__table tr:first-child td {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.datos-lista__panel .datos-lista__table tr:last-child td {
  border-bottom-width: 0 !important;
}

@media only screen and (max-width: 690px) {
  .datos-lista__panel {
    padding: 4px 16px;
  }
  .datos-lista__panel .datos-lista__table td,
  .datos-lista__panel .datos-lista__table tr:first-child td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
/* ---------- Ligas dentro de la tabla ----------
   Salient pinta los <a> con su color de acento; aquí toman el color de la celda (el del <table>, p. ej. .bark)
   y van subrayadas. Sin color de paleta en el SCSS: inherit */
.datos-lista__table a,
.datos-lista__table a:hover {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   TWO COLUMNS
   ========================= */
.two-columns__content .text-eyebrow {
  display: block;
  margin-bottom: 14px;
}

/* .text-heading es 42px; aquí va a la escala del título de cinematic-content-box en mobile */
.two-columns__content .text-heading {
  margin: 0 0 24px;
  padding: 0;
  font-size: 32px;
  line-height: 42px;
}

.two-columns__content .text-body {
  margin: 0;
  padding-bottom: 0;
}

/* Fondo claro: en el markup el eyebrow va en bronze; en las páginas de un negocio usa su acento light (fern, bronze, rust) */
.page-id-60 .two-columns__content .text-eyebrow, .parent-pageid-60 .two-columns__content .text-eyebrow {
  color: #437604;
}
.page-id-58 .two-columns__content .text-eyebrow, .parent-pageid-58 .two-columns__content .text-eyebrow {
  color: #776929;
}
.page-id-62 .two-columns__content .text-eyebrow, .parent-pageid-62 .two-columns__content .text-eyebrow {
  color: #995B24;
}

/* Columnas apiladas: Salient agrega margin-bottom: 25px a cada columna en rows con column_margin="default".
   El espacio entre Misión y Visión lo da el bottom_padding_tablet/phone de la primera columna,
   y las columnas vacías de 1/6 solo sirven en desktop */
@media only screen and (max-width: 999px) {
  body .vc_row-fluid .two-columns__col {
    margin-bottom: 0 !important;
  }
  .two-columns__spacer {
    display: none !important;
  }
}
@media only screen and (max-width: 800px) {
  .two-columns__content .text-eyebrow {
    font-size: 12px;
  }
  .two-columns__content .text-heading {
    font-size: 28px;
    line-height: 36px;
  }
  .two-columns__content .text-body {
    font-size: 15px;
    line-height: 24px;
  }
}
/* =========================
   TIMELINE TEXT
   ========================= */
/* Fondo ivory: título (eyebrow + .text-headline) | lista de hitos con línea vertical y puntos.
   Misma retícula que two-columns: spacer 1/6, título 1/3, lista 1/3, spacer 1/6 */
/* ---------- Título ---------- */
.timeline-text__heading .text-eyebrow {
  display: block;
  margin-bottom: 10px;
}

/* .text-headline es 80px; aquí va a la escala de headline1--compact. "hoy." solo en itálica (.text-accent), sin color */
.timeline-text__heading .text-headline {
  margin: 0;
  padding: 0;
  font-size: 60px;
  line-height: 70px;
  letter-spacing: -0.6px;
}

/* ---------- Lista ---------- */
/* Salient da margen y numeración a los <ol> del contenido.
   La línea y los puntos toman el acento de la utilidad de color del <ol> (currentColor) */
.timeline-text__list {
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

/* La línea va como ::after de cada hito (TinyMCE borra los <span> vacíos): baja desde su punto hasta el punto del siguiente */
.timeline-text__item {
  position: relative;
  margin: 0;
  padding: 0 0 40px 30px;
  list-style: none;
}

.timeline-text__item:last-child {
  padding-bottom: 0;
}

.timeline-text__item::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.timeline-text__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  bottom: -19px;
  left: 3px;
  width: 2px;
  background-color: currentColor;
}

.timeline-text__item .text-title {
  display: block;
  font-weight: 400;
  font-size: 38px;
  line-height: 38px;
}

.timeline-text__item .text-heading {
  margin: 0 0 12px;
  padding: 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
}

.timeline-text__item .text-body {
  margin: 0;
  padding-bottom: 0;
}

/* ---------- Acento por negocio ----------
   Fondo claro: en el markup el eyebrow, la lista (línea y puntos) y los años van en bronze.
   En las páginas de un negocio usan su acento light (fern, bronze, rust) */
.page-id-60 .timeline-text__heading .text-eyebrow, .parent-pageid-60 .timeline-text__heading .text-eyebrow,
.page-id-60 .timeline-text__list,
.parent-pageid-60 .timeline-text__list,
.page-id-60 .timeline-text__item .text-title,
.parent-pageid-60 .timeline-text__item .text-title {
  color: #437604;
}
.page-id-58 .timeline-text__heading .text-eyebrow, .parent-pageid-58 .timeline-text__heading .text-eyebrow,
.page-id-58 .timeline-text__list,
.parent-pageid-58 .timeline-text__list,
.page-id-58 .timeline-text__item .text-title,
.parent-pageid-58 .timeline-text__item .text-title {
  color: #776929;
}
.page-id-62 .timeline-text__heading .text-eyebrow, .parent-pageid-62 .timeline-text__heading .text-eyebrow,
.page-id-62 .timeline-text__list,
.parent-pageid-62 .timeline-text__list,
.page-id-62 .timeline-text__item .text-title,
.parent-pageid-62 .timeline-text__item .text-title {
  color: #995B24;
}

/* ---------- Responsive ---------- */
/* Columnas apiladas: el espacio entre título y lista lo da el bottom_padding_tablet/phone de la columna del título,
   y las columnas vacías de 1/6 solo sirven en desktop */
@media only screen and (max-width: 999px) {
  body .vc_row-fluid .timeline-text__col {
    margin-bottom: 0 !important;
  }
  .timeline-text__spacer {
    display: none !important;
  }
}
@media (min-width: 800px) and (max-width: 1499px) {
  .timeline-text__heading .text-headline {
    font-size: 52px;
    line-height: 60px;
  }
}
@media only screen and (max-width: 800px) {
  .timeline-text__heading .text-eyebrow {
    font-size: 12px;
  }
  .timeline-text__heading .text-headline {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.4px;
  }
  .timeline-text__item {
    padding-bottom: 32px;
  }
  .timeline-text__item::before {
    top: 12px;
  }
  .timeline-text__item:not(:last-child)::after {
    top: 16px;
    bottom: -16px;
  }
  .timeline-text__item .text-title {
    font-size: 32px;
    line-height: 32px;
  }
  .timeline-text__item .text-heading {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 8px;
  }
  .timeline-text__item .text-body {
    font-size: 15px;
    line-height: 24px;
  }
}
/* =========================================================
   Galería mosaico — Zinvol · El Junco (genérico)
   Aplica a TODO Image Gallery de Salient en modo «Image Grid Style».
   Patrón cada 5 fotos: 1 grande (2x2) · 1 alta (1x2) · 3 chicas.
   Móvil: 2 columnas; la 5.ª de cada bloque ocupa el ancho completo.
   Excluir una galería: poner la clase  galeria-libre  en su Row
   (Salient NO imprime el Extra class name del Image Gallery).
   El tamaño lo decide la POSICIÓN de la foto, no la foto.
   ========================================================= */
.wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(150px, 14vw, 195px);
  gap: 8px;
  height: auto !important;
  margin: 0 !important;
}

/* el clearfix de Salient cuenta como celda: se apaga */
.wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items::before,
.wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items::after {
  display: none !important;
  content: none !important;
}

/* anula el posicionamiento absoluto de Isotope */
.wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items > .col {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items > .col:nth-child(5n+1) {
  grid-column: span 2;
  grid-row: span 2;
}

.wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items > .col:nth-child(5n+2) {
  grid-row: span 2;
}

/* la foto llena su celda, recortada */
.wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items > .col .inner-wrap,
.wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items > .col .work-item {
  height: 100% !important;
}

.wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items > .col img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* móvil: 2 columnas */
@media (max-width: 690px) {
  .wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 42vw;
  }
  .wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items > .col:nth-child(5n+1) {
    grid-row: span 1;
  }
  .wpb_row:not(.galeria-libre) .wpb_gallery_slidesimage_grid .portfolio-items > .col:nth-child(5n) {
    grid-column: span 2;
  }
}
/* =========================
   SCORE
   =========================
   Puntuación por áreas con barras (p. ej. valoración morfológica APSL): título .text-eyebrow, una fila por área
   (etiqueta | barra | valor) y una nota al pie. Va en un text block: <ul class="score__list"> con un <li> por área.
   La barra es un <meter value max>: el ancho del relleno sale de value/max sin estilos inline, y no es un <span>
   vacío (TinyMCE los borra). Fondo de la barra con .bg-mist en el <meter>; relleno con currentColor, que viene
   de la utilidad de color del <meter> (.bronze) */
/* wpautop / Salient: sin margen ni padding-bottom en los <p>; Salient pone viñetas y margen a las listas de .main-content */
.score p {
  margin: 0;
  padding-bottom: 0;
}

.score__title {
  display: block;
  margin-bottom: 20px !important;
}

.score__list {
  display: grid;
  row-gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.score__item {
  display: grid;
  grid-template-columns: minmax(120px, 2fr) minmax(0, 5fr) 44px;
  column-gap: 16px;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.score__value {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Barra: sin la apariencia nativa del navegador. Cada pseudo-elemento va en su propia regla:
   un selector de otro motor dentro de una lista invalida la regla completa */
.score__meter {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: none;
  border-radius: 3px;
  overflow: hidden;
}

.score__meter::-webkit-meter-bar {
  height: 6px;
  background: transparent;
  border: none;
  border-radius: 3px;
}

.score__meter::-webkit-meter-optimum-value {
  background: currentColor;
  border-radius: 3px;
}

.score__meter::-webkit-meter-suboptimum-value {
  background: currentColor;
  border-radius: 3px;
}

.score__meter::-webkit-meter-even-less-good-value {
  background: currentColor;
  border-radius: 3px;
}

.score__meter::-moz-meter-bar {
  background: currentColor;
  border-radius: 3px;
}

.score__note {
  margin-top: 20px !important;
}

/* ---------- Acento por negocio ----------
   Título y relleno de la barra: bronze → fern / bronze / rust (sobre ivory, acentos claros) */
.page-id-60 .score .text-eyebrow, .parent-pageid-60 .score .text-eyebrow,
.page-id-60 .score__meter,
.parent-pageid-60 .score__meter {
  color: #437604;
}
.page-id-58 .score .text-eyebrow, .parent-pageid-58 .score .text-eyebrow,
.page-id-58 .score__meter,
.parent-pageid-58 .score__meter {
  color: #776929;
}
.page-id-62 .score .text-eyebrow, .parent-pageid-62 .score .text-eyebrow,
.page-id-62 .score__meter,
.parent-pageid-62 .score__meter {
  color: #995B24;
}

/* ---------- Responsive ----------
   Etiqueta y valor en una línea, la barra debajo a todo el ancho */
@media only screen and (max-width: 690px) {
  .score__list {
    row-gap: 16px;
  }
  .score__item {
    grid-template-columns: 1fr 44px;
    row-gap: 6px;
  }
  .score__meter {
    grid-column: 1/-1;
    grid-row: 2;
  }
}
/* =========================
   ÁRBOL GENEALÓGICO
   =========================
   Pedigrí clásico: el ejemplar a la izquierda y una columna por generación (padres, abuelos y, en --3, bisabuelos).
   Va en un text block: <div class="arbol-genealogico arbol-genealogico--2 ash"> con un __sujeto y una __celda por ancestro,
   en orden padre → sus padres → madre → sus padres (así el orden también sirve para la lista de móvil).
   Posición en la rejilla con clases, sin estilos inline: __celda--g1..g3 (generación → columna) y __celda--r1..r8 (fila
   de inicio); cuántas filas ocupa cada celda lo decide la variante (--2 / --3) según la generación.
   Colores en el markup: nodos .bg-linen .border-mist; rol .slate, nombre .ink, dato .bark; las líneas de unión usan
   currentColor, que viene de la utilidad del contenedor (.ash). Solo el acento de --rep y __chip va por negocio */
/* wpautop / Salient: sin margen ni padding-bottom en los <p> del bloque */
.arbol-genealogico p,
.arbol-genealogico__lede,
.arbol-genealogico__nota {
  padding-bottom: 0 !important;
}

.arbol-genealogico__lede {
  max-width: 720px;
  margin: 0 !important;
}

.arbol-genealogico__nota {
  max-width: 720px;
  margin: 24px 0 0 !important;
  font-size: 14px;
}

/* ---------- Rejilla ---------- */
.arbol-genealogico {
  display: grid;
  column-gap: 32px;
  row-gap: 8px;
  margin-top: 24px;
}

.arbol-genealogico--2 {
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(64px, auto));
}

.arbol-genealogico--3 {
  grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(52px, auto));
}

.arbol-genealogico__sujeto {
  grid-column: 1;
  grid-row: 1/-1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.arbol-genealogico__celda {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.arbol-genealogico__celda--g1 {
  grid-column: 2;
}

.arbol-genealogico__celda--g2 {
  grid-column: 3;
}

.arbol-genealogico__celda--g3 {
  grid-column: 4;
}

.arbol-genealogico__celda--r1 {
  grid-row-start: 1;
}

.arbol-genealogico__celda--r2 {
  grid-row-start: 2;
}

.arbol-genealogico__celda--r3 {
  grid-row-start: 3;
}

.arbol-genealogico__celda--r4 {
  grid-row-start: 4;
}

.arbol-genealogico__celda--r5 {
  grid-row-start: 5;
}

.arbol-genealogico__celda--r6 {
  grid-row-start: 6;
}

.arbol-genealogico__celda--r7 {
  grid-row-start: 7;
}

.arbol-genealogico__celda--r8 {
  grid-row-start: 8;
}

/* Filas que ocupa cada generación: en --2 padres 2 y abuelos 1; en --3 padres 4, abuelos 2 y bisabuelos 1 */
.arbol-genealogico--2 .arbol-genealogico__celda--g1 {
  grid-row-end: span 2;
}

.arbol-genealogico--2 .arbol-genealogico__celda--g2 {
  grid-row-end: span 1;
}

.arbol-genealogico--3 .arbol-genealogico__celda--g1 {
  grid-row-end: span 4;
}

.arbol-genealogico--3 .arbol-genealogico__celda--g2 {
  grid-row-end: span 2;
}

.arbol-genealogico--3 .arbol-genealogico__celda--g3 {
  grid-row-end: span 1;
}

/* Líneas de unión (pseudo-elementos: TinyMCE borra los <span> vacíos): una vertical a media celda y un tramo
   horizontal hacia el nodo, ambos en el hueco entre columnas */
.arbol-genealogico__celda::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 25%;
  bottom: 25%;
  border-left: 1px solid currentColor;
}

.arbol-genealogico__celda::after {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 16px;
  border-top: 1px solid currentColor;
}

/* ---------- Nodo ---------- */
.arbol-genealogico__nodo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 16px;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
}

.arbol-genealogico__rol {
  display: block;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 2.4px;
}

.arbol-genealogico__nombre {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.arbol-genealogico__nombre a {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.arbol-genealogico__sub {
  font-size: 13px;
  line-height: 18px;
}

.arbol-genealogico__nodo--sujeto .arbol-genealogico__nombre {
  font-size: 32px;
}

/* Ficha completa del nodo (alternativa a __sub): pares clave/valor en dos columnas, todo en <span> para que
   TinyMCE no lo reescriba. <span class="arbol-genealogico__datos text-caption"> con __clave .slate y __valor .ink */
.arbol-genealogico__datos {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: 16px;
  row-gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
}

.arbol-genealogico__clave,
.arbol-genealogico__valor {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Bisabuelos (--3): nodo compacto y nombre en sans */
.arbol-genealogico__nodo--min {
  padding: 8px 12px;
}

.arbol-genealogico__nodo--min .arbol-genealogico__nombre {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

/* Etiquetas («En el plantel», «Se repite»): el texto lleva su utilidad de color en el markup */
.arbol-genealogico__chip {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 6px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
}

/* ---------- Acento por negocio ----------
   Ancestro que se repite (borde y filete a la izquierda) y borde de las etiquetas: bronze por defecto (fondo claro);
   en las páginas de un negocio, su acento light (fern / bronze / rust) */
.arbol-genealogico__nodo--rep,
.arbol-genealogico__chip {
  border-color: #776929;
}
.page-id-60 .arbol-genealogico__nodo--rep, .parent-pageid-60 .arbol-genealogico__nodo--rep,
.page-id-60 .arbol-genealogico__chip,
.parent-pageid-60 .arbol-genealogico__chip {
  border-color: #437604;
}
.page-id-58 .arbol-genealogico__nodo--rep, .parent-pageid-58 .arbol-genealogico__nodo--rep,
.page-id-58 .arbol-genealogico__chip,
.parent-pageid-58 .arbol-genealogico__chip {
  border-color: #776929;
}
.page-id-62 .arbol-genealogico__nodo--rep, .parent-pageid-62 .arbol-genealogico__nodo--rep,
.page-id-62 .arbol-genealogico__chip,
.parent-pageid-62 .arbol-genealogico__chip {
  border-color: #995B24;
}

.arbol-genealogico__nodo--rep {
  box-shadow: inset 3px 0 0 #776929;
}
.page-id-60 .arbol-genealogico__nodo--rep, .parent-pageid-60 .arbol-genealogico__nodo--rep {
  box-shadow: inset 3px 0 0 #437604;
}
.page-id-58 .arbol-genealogico__nodo--rep, .parent-pageid-58 .arbol-genealogico__nodo--rep {
  box-shadow: inset 3px 0 0 #776929;
}
.page-id-62 .arbol-genealogico__nodo--rep, .parent-pageid-62 .arbol-genealogico__nodo--rep {
  box-shadow: inset 3px 0 0 #995B24;
}

/* ---------- Responsive ----------
   Hasta 1023px la rejilla pasa a lista vertical en el orden del markup: abuelos con sangría de 24px y bisabuelos
   de 48px, cada uno con un codo (línea vertical + horizontal) hacia su nodo */
@media only screen and (max-width: 1023px) {
  .arbol-genealogico {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .arbol-genealogico__sujeto {
    margin-bottom: 8px;
  }
  .arbol-genealogico__celda::before,
  .arbol-genealogico__celda::after {
    display: none;
  }
  .arbol-genealogico__celda--g2 {
    padding-left: 24px;
  }
  .arbol-genealogico__celda--g3 {
    padding-left: 48px;
  }
  .arbol-genealogico__celda--g2::before,
  .arbol-genealogico__celda--g3::before {
    display: block;
    top: -4px;
    bottom: 50%;
    width: 10px;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }
  .arbol-genealogico__celda--g2::before {
    left: 8px;
  }
  .arbol-genealogico__celda--g3::before {
    left: 32px;
  }
}
@media only screen and (max-width: 690px) {
  .arbol-genealogico__nodo--sujeto .arbol-genealogico__nombre {
    font-size: 28px;
  }
}

/*# sourceMappingURL=style.css.map */