.header-holder{    
    background-image: url("../images/header-bg.png");
    background-position: center;
    background-size: cover;        
}

.header-language-selector{    
    float: right;    
    right:0;
    margin-right:0
}

.language-selector ul li a span{
    color: #fff;
}

.language-selector ul li a:hover span{
    color: #000;
}

/*
 * Separación entre el breadcrumb (#crumbs, MVAM_Theme_Breadcrumb) y el
 * contenido — en producción viene de un margin-top de 60px más abajo en
 * el árbol que no encontramos en ningún CSS fuente (ni externo ni inline,
 * revisado con document.styleSheets en vivo), así que se repone acá de
 * forma contenida en vez de tocar .site-content a ciegas.
 */
.top-bar {
  margin-bottom: 40px;
}

.language-selector ul ul {
  background: transparent !important;
}

/*
 * "Los más destacados" (home, #activities_section): el markup real de
 * travel-agency-companion arma este bloque con id="activities-slider" +
 * owl-carousel (JS coloca los .item en fila). Acá se usa grilla simple en
 * su lugar a propósito (ver class-mvam-theme-customizer-activities.php) sin
 * ese id — mientras travel-agency-companion siga activo, su JS inicializa
 * como carrusel Owl cualquier elemento con ese id sin chequear la clase, lo
 * que pisa el layout en columnas de abajo. Por eso estas reglas son una
 * copia autocontenida (no una reutilización) de las de
 * travel-agency-companion-public.css para "#activities-slider
 * .img-holder/.title-holder/.text-holder", adaptadas a ".activities-grid" y
 * sin depender del id ni del JS del plugin viejo.
 */
/*
 * .activities en sí (no solo .activities-grid, que ya estaba portada más
 * abajo) — encontrado apagando travel-agency-companion: sin esto la
 * sección quedaba sin la imagen de fondo tipo hero detrás del título ("Los
 * más destacados"). Corregido dos veces: la primera puso la imagen directo
 * en `.activities` (mismo criterio que .our-features/.cta/.stats), pero
 * esas otras secciones son 100% imagen de punta a punta — ésta NO: el
 * diseño real (travel-agency-companion-public.css, `.activities:after`,
 * height:61%) solo pone la foto detrás del título, dejando la mitad de
 * abajo (donde flota la grilla de cards) en blanco liso. Con la imagen en
 * `.activities` (100% de la sección, que incluye la grilla) esa parte de
 * abajo quedaba con la foto en vez de blanco.
 *
 * Como no se puede targetear un pseudo-elemento con `style=""` inline, la
 * URL llega como custom property (`--mvam-activities-bg-image`, ver
 * bg_style() en class-mvam-theme-customizer-activities.php) y acá se
 * combina con el oscurecido en un solo `background` de `.activities:before`
 * — mismo elemento, misma altura 61%, que ya estaba pero solo tenía el
 * oscurecido.
 */
.activities {
  padding: 0 0 80px;
  position: relative;
}

.activities:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 61%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--mvam-activities-bg-image, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  content: '';
  z-index: 1;
}

.activities .section-header {
  padding: 72px 0 0;
  color: #fff;
  position: relative;
  z-index: 1;
}

.activities .section-header .holder {
  max-width: 660px;
  margin: 0 auto 68px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.activities .section-header .section-title {
  font-size: 36px;
  line-height: 1.25em;
  font-weight: 500;
  font-family: var(--tac-secondary-font);
  position: relative;
  padding-bottom: 10px;
  margin: 0 0 16px;
}

.activities .section-header .section-title:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 90px;
  height: 3px;
  background: var(--tac-primary-color);
  transform: translateX(-50%);
}

/*
 * .activities:before/:after (foto de fondo + oscurecido, ver
 * travel-agency-companion-public.css) son position:absolute con z-index:1,
 * altura 61% de la sección. El único elemento que originalmente se pone por
 * encima es ".section-header .holder" (position:relative;z-index:1) — la
 * grilla de items nunca se protegía porque en el diseño real (carrusel
 * Owl) el propio JS de Owl vuelve position:relative a sus wrappers. Acá,
 * sin ese JS, hace falta subir la grilla explícitamente o el fondo la tapa.
 */
#activities_section .container {
  position: relative;
  z-index: 2;
}

.activities-grid {
  margin: 0 -15px;
}

.activities-grid:after {
  content: "";
  display: block;
  clear: both;
}

.activities-grid .item {
  float: left;
  width: 25%;
  padding: 0 15px;
  margin: 0 0 30px;
}

.activities-grid .img-holder {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}

.activities-grid .img-holder img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.activities-grid .img-holder .title-holder {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  padding: 40px 26px;
  transition: linear 0.2s;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.activities-grid .img-holder .text-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 30px 25px;
  opacity: 0;
  transition: linear 0.2s;
}

.activities-grid .img-holder:hover .title-holder,
.activities-grid .img-holder:focus-within .title-holder {
  opacity: 0;
}

.activities-grid .img-holder:hover .text-holder,
.activities-grid .img-holder:focus-within .text-holder {
  opacity: 1;
}

.activities-grid .text-holder .title {
  font-size: 18px;
  margin: 0 0 10px;
  font-weight: 500;
}

.activities-grid .text-holder .btn-more {
  font-size: 40px;
  color: #fff;
  transition: linear 0.2s;
}

.activities-grid .text-holder .btn-more:hover,
.activities-grid .text-holder .btn-more:focus {
  text-decoration: none;
  color: var(--primary-color);
}

@media only screen and (max-width: 1024px) {
  .activities-grid .item {
    width: 50%;
  }
}

@media only screen and (max-width: 767px) {
  .activities-grid .item {
    width: 100%;
  }
}

/*
 * Con un solo resultado la tarjeta queda encajonada a la mitad del ancho
 * con el resto de la fila vacío — mejora nuestra, no existe en producción.
 */
.category-main-wrap.category-grid .category-trips-single:first-child:last-child {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

/*
 * Base del grid de resultados (archivos de taxonomía y buscador,
 * MVAM_Theme_Tour_Card) — antes la daba wte-public.css (WP Travel
 * Engine), retirado junto con el plugin. Sin esto, cada
 * .category-trips-single ocupa el 100% del ancho, uno debajo del otro. 2
 * columnas por fila, igual que la vista grid real de producción
 * (confirmado visitando /trip-search-result/?view_mode=grid ahí).
 */
.category-main-wrap.category-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 30px 20px;
}

.category-main-wrap.category-grid .category-trips-single {
  flex: 1 1 calc(50% - 10px);
  max-width: calc(50% - 10px);
}

@media (max-width: 767px) {
  .category-main-wrap.category-grid .category-trips-single {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/*
 * Tarjeta con padding/sombra/esquinas redondeadas y foto recortada a
 * relación fija (en vez de la altura natural de cada imagen, que hacía
 * ver todo desalineado) — esto tampoco venía del theme, vivía en
 * wte-public.css (WP Travel Engine). Valores tomados en vivo de
 * producción (miviajeamendoza.com, getComputedStyle + CSS fuente real),
 * no inventados. Ver specs/mvam-theme/buscador-tours-reemplaza-wte-trip-search.md.
 */
.category-main-wrap.category-grid .category-trips-single-inner-wrap,
.category-main-wrap.category-list .category-trips-single-inner-wrap {
  padding: 24px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}

.category-main-wrap.category-grid .category-trips-single-inner-wrap .category-trip-fig {
  position: relative;
  margin: -24px -24px 0;
}

.category-main-wrap.category-grid .category-trips-single-inner-wrap .category-trip-fig > a,
.category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-fig > a {
  position: relative;
  display: block;
  padding-top: 75%;
  border-radius: 4px;
  overflow: hidden;
  background-color: #efefef;
}

.category-main-wrap.category-grid .category-trips-single-inner-wrap .category-trip-fig > a {
  border-radius: 4px 4px 0 0;
}

.category-main-wrap.category-grid .category-trips-single-inner-wrap .category-trip-fig > a img,
.category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-fig > a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease;
}

/*
 * Efecto hover — otro que vivía en wte-public.css y nunca se portó: la
 * foto hace zoom (recortada por overflow:hidden del contenedor, ya
 * puesto arriba) y la tarjeta levanta una sombra suave. Valores reales.
 */
.category-main-wrap.category-grid .category-trips-single-inner-wrap:hover,
.category-main-wrap.category-list .category-trips-single-inner-wrap:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.category-main-wrap.category-grid .category-trips-single-inner-wrap .category-trip-fig > a:hover img,
.category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-fig > a:hover img {
  transform: scale(1.1);
}

/*
 * Vista lista (toggle junto al selector de orden): una tarjeta por fila,
 * imagen a la izquierda sin sangrar (a diferencia de grid). Valores
 * reales de producción (miviajeamendoza.com/trip-search-result/?view_mode=list).
 */
.category-main-wrap.category-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.category-main-wrap.category-list .category-trips-single {
  width: 100%;
  max-width: 100%;
}

.category-main-wrap.category-list .category-trips-single-inner-wrap {
  display: flex;
  flex-direction: row;
}

/*
 * Bug real: a esta variante (lista) nunca se le agregó position:relative
 * — solo la de grid lo tenía. El ribbon "Destacado" es position:absolute,
 * así que sin un ancestro posicionado se escapaba hasta el initial
 * containing block (arriba a la izquierda del viewport, top:8px;left:8px)
 * en vez de quedar sobre la foto — ahí se solapaba con la barra de redes
 * sociales fija arriba de la página. Confirmado que producción sí tiene
 * position:relative acá (getComputedStyle en /trip-search-result/
 * ?view_mode=list).
 */
.category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-fig {
  position: relative;
  flex: 0 0 40%;
  max-width: 40%;
}

.category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-content-wrap {
  flex: 0 0 60%;
  max-width: 60%;
  padding-left: 24px;
}

@media (max-width: 767px) {
  .category-main-wrap.category-list .category-trips-single-inner-wrap {
    flex-direction: column;
  }

  .category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-fig,
  .category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-content-wrap {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
  }

  .category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-content-wrap {
    padding-top: 24px;
  }
}

/*
 * Separación entre la foto (que sangra hasta el borde con margin negativo,
 * arriba) y el texto — sin esto el título quedaba pegado a la imagen.
 * Valores reales, mismo criterio que el resto de este bloque.
 */
.category-main-wrap.category-grid .category-trips-single-inner-wrap .category-trip-content-wrap {
  padding-top: 24px;
}

/*
 * Bug real: el tamaño de 22px que ya estaba en style.css
 * (`.category-main-wrap.category-grid .category-trip-prc-title-wrap
 * .category-trip-title`) no estaba ganando la cascada — el título salía
 * con el tamaño por default de un <h2> (32px) — y el link adentro
 * heredaba el subrayado por default de <a>, que producción no tiene
 * (`text-decoration:none`). Repetido acá con especificidad de sobra para
 * asegurar que gane.
 */
.category-trip-title,
.category-main-wrap.category-grid .category-trips-single-inner-wrap .category-trip-title,
.category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
}

.category-trip-title a {
  text-decoration: none;
}

/*
 * Precio de la tarjeta — producción no lo muestra en el listado (ni en
 * grid, ni en list, ni ordenando por precio, confirmado en vivo), así
 * que no hay nada real que copiar acá. Decisión propia, confirmada con
 * el usuario: se deja (es información útil que si tenemos) pero
 * separado y destacado — más grande, en negrita, color primario — en
 * vez de heredar el estilo por default de wc_price().
 */
.category-trip-price-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
}

/*
 * Botón "Ver más" real de la vista grid (sólido, relleno) — el
 * `.category-trip-viewmre-btn` que ya estaba en style.css es el de la
 * vista LIST (outline, más chico); en grid production usa este otro,
 * confirmado en vivo contra miviajeamendoza.com. Sobreescribe el de
 * style.css con mayor especificidad de selector.
 */
/*
 * En grid, el botón vive en su propio wrapper (.wpte_trip-details-btn-wrap),
 * separado de .category-trip-aval-time (que ahora solo tiene el bloque de
 * disponibilidad) — así está en producción, confirmado con el HTML real
 * (antes lo habíamos metido los dos juntos dentro de .category-trip-aval-time).
 */
.category-main-wrap.category-grid .category-trips-single-inner-wrap .wpte_trip-details-btn-wrap {
  margin-top: 20px;
}

.category-main-wrap.category-grid .category-trips-single-inner-wrap .wpte_trip-details-btn-wrap .category-trip-viewmre-btn {
  display: block;
  text-align: center;
  padding: 15px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  border: none;
  border-radius: 4px;
  background-color: var(--primary-color);
  color: #fff;
}

.category-main-wrap.category-grid .category-trips-single-inner-wrap .wpte_trip-details-btn-wrap .category-trip-viewmre-btn:hover {
  opacity: 0.8;
  background: var(--primary-color);
  color: #fff;
}

.category-main-wrap.category-grid .category-trips-single-inner-wrap .category-trip-aval-time {
  text-align: left;
  margin: 32px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/*
 * "Disponible todo el año" + meses — contenido fijo de WPTE (no dato por
 * tour, ver MVAM_Theme_Tour_Card::MONTHS), compartido entre grid y list.
 */
.category-trip-avl-tip-inner-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.category-available-trip-text {
  display: block;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

.category-available-months {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-available-months li {
  display: inline-block;
  margin-right: 8px;
  font-size: 11px;
  color: #666;
}

.category-available-months li:last-child {
  margin-right: 0;
}

/*
 * Ribbon "Destacado" — solo se muestra en los tours que ya tenían
 * wp_travel_engine_featured_trip=yes en el CPT viejo de WPTE (27 tours,
 * recuperado por título ya que no se migró ese meta a mvam_tour). Ver
 * MVAM_Theme_Tour_Card::render().
 */
.category-feat-ribbon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  margin: 8px 0 0 8px;
  text-align: right;
}

/*
 * Bug real: style.css ya tenía una regla suelta con más especificidad
 * (`.category-main-wrap.category-grid .category-trips-single-inner-wrap
 * .category-feat-ribbon { top: 56px }`, pensada para OTRA variante de
 * tarjeta con un ícono arriba) que ganaba por selector más largo y
 * empujaba el ribbon a la mitad de la foto. Repetido acá con la misma
 * especificidad para volver a top:0.
 */
.category-main-wrap.category-grid .category-trips-single-inner-wrap .category-feat-ribbon,
.category-main-wrap.category-list .category-trips-single-inner-wrap .category-feat-ribbon {
  top: 0;
}

.category-feat-ribbon-txt {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 15px;
  background-color: #ffc34e;
  color: #8c6b2b;
}

/*
 * Corona real de producción — ::before con un SVG en content (no un
 * ícono aparte en el markup), nunca se había portado. Valores reales
 * (wte-public.css): 14x14px, margin-right:6px.
 */
.category-feat-ribbon-txt::before {
  content: url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M13.8081 4.62308C13.6427 4.48191 13.4093 4.45216 13.2137 4.54737L10.2211 6.00424L7.41314 2.76669C7.30929 2.64692 7.15855 2.57812 7.00001 2.57812C6.84147 2.57812 6.69075 2.64692 6.58687 2.76669L3.77888 6.00421L0.786276 4.54734C0.590686 4.45216 0.357334 4.48188 0.191904 4.62305C0.0264748 4.76423 -0.0395877 4.99004 0.0236584 5.19812L2.10178 12.0341C2.17181 12.2644 2.38424 12.4219 2.62501 12.4219H11.375C11.6157 12.4219 11.8282 12.2644 11.8982 12.0341L13.9763 5.19815C14.0396 4.99006 13.9735 4.76426 13.8081 4.62308ZM10.9696 11.3281H3.03032L1.43479 6.07955L3.67758 7.17141C3.90026 7.2798 4.16785 7.22506 4.33008 7.03803L7.00001 3.95967L9.66996 7.03803C9.83216 7.22509 10.0998 7.27977 10.3224 7.17141L12.5652 6.07955L10.9696 11.3281Z' fill='%238C6B2B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='14' height='14' fill='white' transform='translate(0 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 6px;
}

/*
 * Layout de 2 columnas del buscador (class-mvam-theme-trip-search.php):
 * sidebar de filtros + resultados. Mismo caso que el grid de arriba —
 * wte-public.css lo daba (.advanced-search-wrapper flex:0 0 255px), no
 * el theme. Valores tomados de ahí para mantener el mismo ancho visual.
 */
.advanced-search-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.advanced-search-wrapper .sidebar {
  flex: 0 0 255px;
  max-width: 255px;
  padding: 24px 16px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 2px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
}

.advanced-search-wrapper .wp-travel-engine-archive-repeater-wrap {
  flex: 1;
  min-width: 0;
  padding-left: 30px;
}

/*
 * Bug real: con justify-content:space-between y 3 hijos (contador,
 * orden, toggle de vista) el del medio (orden) queda flotando lejos del
 * toggle en vez de pegado a la derecha, como en producción. Con
 * margin-right:auto en el contador alcanza para agrupar los otros dos a
 * la derecha sin tocar el markup.
 */
.wp-travel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.wp-travel-toolbar .wte-filter-foundposts {
  margin-right: auto;
}

/*
 * Widget de orden real de producción — NO es un <select> nativo, es
 * `.wpte-trip__adv-field.wpte__select-field`: un panel que se abre/cierra
 * (JS togglea la clase `options-open`) con sub-listas agrupadas (Precio,
 * Duración, Nombre). Valores reales sacados en vivo de
 * miviajeamendoza.com (getComputedStyle + CSS fuente).
 */
.wte-ordering {
  display: flex;
  align-items: center;
}

.wte-ordering > span {
  font-size: 14px;
  color: #000;
  opacity: 0.5;
  margin-right: 8px;
}

.wpte-trip__adv-field.wpte__select-field {
  position: relative;
  color: rgba(0, 0, 0, 0.8);
}

.wpte-trip__adv-field.wpte__select-field .wpte__input {
  padding-right: 23px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
  cursor: pointer;
}

.wpte-trip__adv-field.wpte__select-field::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-color: #000;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.7194 0.279313C9.54166 0.100415 9.30123 0 9.05062 0C8.80001 0 8.55958 0.100415 8.38184 0.279313L4.97628 3.67957L1.61816 0.279313C1.44042 0.100415 1.19999 0 0.949379 0C0.698768 0 0.458338 0.100415 0.280598 0.279313C0.192556 0.367798 0.122811 0.472764 0.075302 0.588127C0.0277939 0.70349 0.00343323 0.827092 0.00343323 0.951928C0.00343323 1.07676 0.0277939 1.20037 0.075302 1.31573C0.122811 1.43109 0.192556 1.53606 0.280598 1.62454L4.32378 5.72069C4.4118 5.80923 4.51624 5.87953 4.63118 5.92758C4.74611 5.97563 4.86929 6.00048 4.99373 6.00048C5.11816 6.00048 5.24134 5.97563 5.35628 5.92758C5.47121 5.87953 5.57566 5.80923 5.66368 5.72069L9.7194 1.62454C9.80767 1.53619 9.87755 1.4312 9.92507 1.31581C9.9726 1.20043 9.99683 1.07683 9.99636 0.951996C9.99589 0.827158 9.97071 0.703747 9.9223 0.588724C9.87389 0.4737 9.80319 0.369298 9.7194 0.281079V0.279313Z' fill='black'/%3E%3C/svg%3E") center center no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.7194 0.279313C9.54166 0.100415 9.30123 0 9.05062 0C8.80001 0 8.55958 0.100415 8.38184 0.279313L4.97628 3.67957L1.61816 0.279313C1.44042 0.100415 1.19999 0 0.949379 0C0.698768 0 0.458338 0.100415 0.280598 0.279313C0.192556 0.367798 0.122811 0.472764 0.075302 0.588127C0.0277939 0.70349 0.00343323 0.827092 0.00343323 0.951928C0.00343323 1.07676 0.0277939 1.20037 0.075302 1.31573C0.122811 1.43109 0.192556 1.53606 0.280598 1.62454L4.32378 5.72069C4.4118 5.80923 4.51624 5.87953 4.63118 5.92758C4.74611 5.97563 4.86929 6.00048 4.99373 6.00048C5.11816 6.00048 5.24134 5.97563 5.35628 5.92758C5.47121 5.87953 5.57566 5.80923 5.66368 5.72069L9.7194 1.62454C9.80767 1.53619 9.87755 1.4312 9.92507 1.31581C9.9726 1.20043 9.99683 1.07683 9.99636 0.951996C9.99589 0.827158 9.97071 0.703747 9.9223 0.588724C9.87389 0.4737 9.80319 0.369298 9.7194 0.281079V0.279313Z' fill='black'/%3E%3C/svg%3E") center center no-repeat;
  transition: transform 0.3s ease;
}

.wpte-trip__adv-field.wpte__select-field.options-open::after {
  transform: translateY(-50%) rotate(180deg);
}

.wpte-trip__adv-field.wpte__select-field .wpte__select-options {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  min-width: 185px;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 4px;
  padding: 15px 8px;
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.06);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px) scaleY(0.8);
  transform-origin: top;
  transition: all 0.3s ease;
  z-index: 20;
  text-align: left;
}

.wpte-trip__adv-field.wpte__select-field.options-open .wpte__select-options {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

.wpte-trip__adv-field.wpte__select-field .wpte__select-options > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 315px;
  overflow-y: auto;
}

.wpte-trip__adv-field.wpte__select-field .wpte__select-options ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wpte-trip__adv-field.wpte__select-field .wpte__select-options ul ul {
  margin: 8px 0 0;
}

.wpte-trip__adv-field.wpte__select-field .wpte__select-options li {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

.wpte-trip__adv-field.wpte__select-field .wpte__select-options li span {
  display: block;
  padding: 8px;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
}

.wpte-trip__adv-field.wpte__select-field .wpte__select-options li:hover > span,
.wpte-trip__adv-field.wpte__select-field .wpte__select-options li.selected > span {
  color: var(--primary-color);
}

.wpte-trip__adv-field.wpte__select-field .wpte__select-options .wpte__select-options__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(0, 0, 0, 0.4);
  padding: 8px 8px 4px;
}

/*
 * Bug real: style.css nunca reseteaba list-style en .wte-search-terms-list
 * (ni en los <ul> anidados por jerarquía ni en .wte-terms-more-list) — el
 * reset global es `ul { list-style: disc }` (línea ~463), así que sin esto
 * cada checkbox aparecía con un bullet real al lado.
 */
.wte-search-terms-list,
.wte-search-terms-list ul,
.wte-terms-more-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Bug real: jQuery UI Slider (core de WP) no trae CSS propio — WordPress
 * solo registra el JS (`jquery-ui-slider`), no una hoja de estilos. Sin
 * esto el track mide 0px de alto y el slider es invisible aunque esté
 * inicializado. Valores reales de wte-public.css (WP Travel Engine).
 */
.advanced-search-field .ui-slider {
  position: relative;
  height: 2px;
  border: none;
  background: rgba(0, 0, 0, 0.1);
  margin: 45px 9px 20px;
}

.advanced-search-field .ui-slider .ui-slider-range {
  position: absolute;
  height: 2px;
  border: none;
  background: var(--primary-color);
}

.advanced-search-field .ui-slider .ui-slider-handle {
  position: absolute;
  top: 1px;
  height: 16px;
  width: 16px;
  margin-left: 0;
  border: none;
  border-radius: 50%;
  background: var(--primary-color);
  transform: translate(-50%, -50%);
  cursor: pointer;
  outline: none;
}

/*
 * Toggle vista lista/grilla — íconos reales sacados del CSS en vivo del
 * plugin retirado (wte-public.css), adaptados a botones en vez de <a>
 * (nuestro markup no necesita URL propia, el JS solo cambia una clase).
 */
.wte-view-modes {
  display: inline-block;
  line-height: 1;
}

.wte-view-mode-selection-lists {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wte-view-mode-selection {
  opacity: 0.4;
}

.wte-view-mode-selection.active {
  opacity: 0.8;
}

.wte-view-mode-selection button {
  display: block;
  height: 18px;
  width: 18px;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.wte-view-mode-selection[data-mode='grid'] button {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4H4V0H0V4ZM6 16H10V12H6V16ZM0 16H4V12H0V16ZM0 10H4V6H0V10ZM6 10H10V6H6V10ZM12 0V4H16V0H12ZM6 4H10V0H6V4ZM12 10H16V6H12V10ZM12 16H16V12H12V16Z' fill='black'/%3E%3C/svg%3E");
  background-size: 16px 16px;
}

.wte-view-mode-selection[data-mode='list'] button {
  background-image: url("data:image/svg+xml,%3Csvg width='19' height='16' viewBox='0 0 19 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6.5C1.17 6.5 0.5 7.17 0.5 8C0.5 8.83 1.17 9.5 2 9.5C2.83 9.5 3.5 8.83 3.5 8C3.5 7.17 2.83 6.5 2 6.5ZM2 0.5C1.17 0.5 0.5 1.17 0.5 2C0.5 2.83 1.17 3.5 2 3.5C2.83 3.5 3.5 2.83 3.5 2C3.5 1.17 2.83 0.5 2 0.5ZM2 12.5C1.17 12.5 0.5 13.18 0.5 14C0.5 14.82 1.18 15.5 2 15.5C2.82 15.5 3.5 14.82 3.5 14C3.5 13.18 2.83 12.5 2 12.5ZM5 15H19V13H5V15ZM5 9H19V7H5V9ZM5 1V3H19V1H5Z' fill='black'/%3E%3C/svg%3E");
  background-size: 18.5px 15px;
}

/*
 * Botón "Ver más" outline de la vista LISTA — también estaba muerto en
 * style.css (comentado, ver hallazgo en
 * specs/mvam-theme/buscador-tours-reemplaza-wte-trip-search.md).
 */
.category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-aval-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-aval-time .category-trip-viewmre-btn {
  display: inline-block;
  border: 1px solid var(--primary-color);
  box-shadow: none;
  border-radius: 20px;
  font-size: 14px;
  padding: 10px 25px;
  background: none;
  color: var(--primary-color);
  transition: all ease 0.3s;
}

.category-main-wrap.category-list .category-trips-single-inner-wrap .category-trip-aval-time .category-trip-viewmre-btn:hover {
  color: #fff;
  background: var(--primary-color);
  text-decoration: none;
}

@media (max-width: 767px) {
  .advanced-search-wrapper {
    flex-direction: column;
  }

  .advanced-search-wrapper .sidebar,
  .advanced-search-wrapper .wp-travel-engine-archive-repeater-wrap {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
  }
}

/*
 * Bug real: .advanced-search-header nunca tuvo CSS en ningún archivo del
 * theme — sin display:flex quedaba en block, "Limpiar todo" abajo del
 * título en vez de al lado. Valores reales de producción.
 */
.advanced-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/*
 * "Limpiar todo" real (link subrayado, no botón) — tampoco estaba
 * portado, por eso salía con el estilo por default de <button>.
 */
.clear-search-criteria {
  padding: 0;
  border: none;
  background: none !important;
  color: rgba(0, 0, 0, 0.6) !important;
  text-decoration: underline;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}

.clear-search-criteria:hover {
  color: var(--primary-color) !important;
  text-decoration: none;
}

/*
 * Acordeón de secciones del sidebar (JS: trip-search.js togglea
 * wte-list-opn + jQuery slideToggle, igual que wte-public.js de
 * producción) — la flecha que indica abierto/cerrado.
 */
.advanced-search-field.search-trip-type h3:after {
  position: absolute;
  top: 5px;
  right: 10px;
  content: '';
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23353535' viewBox='0 0 448 512'%3E%3Cpath d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E") center center no-repeat;
  background-size: 12px;
  height: 12px;
  width: 12px;
  opacity: 0.7;
  transition: transform 0.4s;
}

.advanced-search-field.search-trip-type.wte-list-opn h3:after {
  transform: rotate(180deg);
}

.filter-section-title {
  cursor: pointer;
  position: relative;
}

/*
 * Truncado "Show all N" / "Show less" de listas largas de checkboxes —
 * JS togglea la clase .visible en .wte-terms-more.
 */
.wte-terms-more .wte-terms-more-list,
.wte-terms-more .show-less {
  display: none;
  margin: 0;
}

.wte-terms-more.visible .wte-terms-more-list,
.wte-terms-more.visible .show-less {
  display: block;
}

.wte-terms-more.visible .show-more {
  display: none;
}

.wte-terms-more button {
  padding: 0;
  margin: 0;
  background: none !important;
  border: none;
  color: var(--primary-color) !important;
  text-decoration: underline;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}

.wte-terms-more button:hover {
  text-decoration: none;
}

/*
 * Checkbox/sidebar del buscador — style.css tiene una versión vieja de
 * este estilo (checkbox de 13px cuadrado con puntito, contador como
 * badge gris con fondo) que no es la que corre en producción hoy
 * (checkbox de 18px con esquinas redondeadas y tilde, contador como
 * texto plano). Mismo caso de siempre: producción quedó en
 * `wptravelengine_css_v2` (ver MVAM_Theme_Setup), el theme nunca
 * absorbió esa versión. Valores reales sacados en vivo de
 * miviajeamendoza.com con getComputedStyle — se repite el mismo prefijo
 * de selector que la regla vieja (`#primary .advanced-search-wrapper
 * .sidebar ...`) para pisarla por especificidad, no por orden.
 */
.trip-search-result #primary .advanced-search-wrapper .sidebar h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar h2:after {
  display: none;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar .advanced-search-field {
  margin: 0;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.trip-search-result #primary .advanced-search-wrapper .sidebar .advanced-search-field:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar h3 {
  font-size: 16px;
  font-weight: 600;
  color: #232323;
  font-family: inherit;
  margin: 0;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar .filter-section-content {
  margin-top: 15px;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar ul {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar ul li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/*
 * Bug real: con flex:0 0 100% el <ul> anidado toma el 100% del ancho del
 * <li> padre y el margin-left:20px se suma aparte, empujando la caja (y
 * su borde derecho) 20px más allá — por eso los números de "count" de los
 * hijos (Aconcagua, Puente del Inca, etc.), que son position:absolute;
 * right:5px respecto de su propio <li>, quedaban desalineados en una
 * columna distinta a los de primer nivel. En producción el ancho real del
 * <ul> anidado es 20px MENOR que el del padre (confirmado con
 * getComputedStyle: 203px vs 223px) — la indentación resta del ancho en
 * vez de sumarse aparte, así el borde derecho (y el count) queda en la
 * misma columna sin importar la profundidad.
 */
.trip-search-result #primary .advanced-search-wrapper .sidebar ul ul {
  flex: 0 0 calc(100% - 20px);
  margin: 20px 0 0 20px;
  padding-left: 0;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar ul li .count {
  position: absolute;
  top: 0;
  right: 5px;
  font-size: 14px;
  line-height: 28px;
  color: #666;
  background: none;
  border-radius: 0;
  padding: 0;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar ul li label {
  display: block;
  width: 100%;
  padding: 0 30px 0 0;
  margin: 0;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar ul li [type="checkbox"]:not(:checked) + span,
.trip-search-result #primary .advanced-search-wrapper .sidebar ul li [type="checkbox"]:checked + span {
  padding-left: 25px;
  font-size: 14px;
  line-height: 28px;
  color: #666;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar ul li [type="checkbox"]:not(:checked) + span:before,
.trip-search-result #primary .advanced-search-wrapper .sidebar ul li [type="checkbox"]:checked + span:before {
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.trip-search-result #primary .advanced-search-wrapper .sidebar ul li [type="checkbox"]:not(:checked) + span:after,
.trip-search-result #primary .advanced-search-wrapper .sidebar ul li [type="checkbox"]:checked + span:after {
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999999' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E") center center / 12px no-repeat;
  transform: none;
}

/*
 * Destino + duración en la misma línea (flex), en vez de apiladas en
 * bloques separados — así se ve en producción. Valores reales.
 */
.category-trip-prc-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 15px;
  row-gap: 4px;
}

/*
 * Paginador numerado (reemplaza el botón "Ver más resultados") — reusa
 * .pagination, el mismo CSS ya portado en style.css (líneas ~2088-2197,
 * mismo que usa taxonomy.php) que ya centra el contenido
 * (text-align:center). El margen real de separación con las tarjetas de
 * arriba (.trip-pagination en producción: margin: 3.25rem 0 0) va en el
 * wrap, no en .pagination, porque ahora comparte fila con el selector de
 * cantidad por página.
 * :empty lo oculta cuando hay una sola página (PHP/JS no imprimen
 * .nav-links en ese caso, pero el contenedor sigue en el DOM) — el
 * selector de cantidad se queda visible igual, es independiente de cuántas
 * páginas haya.
 */
.mvam-search-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 3.25rem 0 0;
}

#mvam-search-pagination:empty {
  display: none;
}

/*
 * Selector de cantidad por página — no existe en producción (ver
 * render_perpage_widget()), reusa el mismo widget/CSS que "Ordenar"
 * (.wpte-trip__adv-field.wpte__select-field) para quedar consistente con
 * el resto del buscador.
 */
.mvam-per-page {
  display: flex;
  align-items: center;
}

.mvam-per-page > span {
  font-size: 14px;
  color: #000;
  opacity: 0.5;
  margin-right: 8px;
}

/*
 * Íconos de destino/duración en las tarjetas: dos bugs reales, mismo
 * patrón de "el CSS ganador apunta al elemento equivocado" que el resto
 * de esta spec.
 * 1) El <path> real ya trae fill="currentColor" (mismo markup que
 *    producción) — la única regla portada (style.css, .category-main-wrap
 *    .category-trip-loc/dur i svg{fill:var(--primary-color)}) apunta al
 *    <svg>, no al <path>, así que no pisa el atributo: el color quedaba
 *    heredado del texto gris en vez del primary-color. La regla real
 *    (wte-public.css, activa en producción) apunta al <path> directo —
 *    se agrega acá igual.
 * 2) `margin-right:8px` entre el ícono y el texto (real, en wte-public.css
 *    vía ".category-trip-desti > [class*='category-trip-'] i") nunca se
 *    portó — quedaba en 0.
 * El tamaño (font-size:18px, controla el 1em del svg) es más grande que
 * el real de producción (14px) a pedido del usuario — ahí sí es una
 * decisión propia, no algo calcado.
 */
.category-trip-loc i,
.category-trip-dur i {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 18px;
  margin-right: 8px;
  line-height: 1;
  vertical-align: middle;
}

.category-trip-loc svg,
.category-trip-dur svg {
  width: 1em;
  height: 1em;
}

.category-trip-loc svg path,
.category-trip-dur svg path {
  fill: var(--primary-color);
}

/*
 * Flechas del carousel de la galería del tour individual — owl-carousel
 * trae el comportamiento (owl.carousel.min.css) pero no este estilo
 * visual, que es de wte-public.css. Valores reales sacados con
 * getComputedStyle en producción (miviajeamendoza.com/index.php/trip/
 * entre-vinos-y-montanas/): círculo blanco de 32px con sombra celeste,
 * chevron en color primario dibujado con mask (no ícono de fuente).
 */
.wpte-trip-feat-img-gallery {
  position: relative;
}

.wpte-trip-feat-img-gallery .owl-nav button {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(33, 131, 223, 0.18), 0 0 2px rgba(33, 131, 223, 0.12), 0 0 1px rgba(0, 0, 0, 0.04);
}

/*
 * background va acá, no en la regla de arriba: owl.carousel.min.css trae
 * `.owl-carousel .owl-nav button.owl-next{background:0 0}` con más
 * especificidad (incluye .owl-next/.owl-prev en el selector) — sin
 * repetir esas clases acá, ganaba esa y los botones quedaban
 * transparentes.
 */
.wpte-trip-feat-img-gallery .owl-nav button.owl-prev {
  left: 16px;
  background: #fff;
}

.wpte-trip-feat-img-gallery .owl-nav button.owl-next {
  right: 16px;
  background: #fff;
}

/*
 * El chevron va como background-image con el color ya adentro del SVG
 * (mismo hex que --primary-color, #6e2e3c — no hay picker de color para
 * este theme, es un valor fijo), no como mask: mask sobre el ::before/
 * ::after de un <button> real no pintaba nada en Chromium en este
 * contexto (probado aislado en un <div> y funcionaba perfecto; sobre el
 * <button> del carousel, con las mismas reglas, el mask no se aplicaba —
 * quirk puntual del elemento, no vale la pena perseguirlo). Mismo
 * resultado visual, técnica más simple y sin el riesgo.
 */
.wpte-trip-feat-img-gallery .owl-nav button::before,
.wpte-trip-feat-img-gallery .owl-nav button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  background: none;
}

.wpte-trip-feat-img-gallery .owl-nav button.owl-prev::before {
  background: url("data:image/svg+xml,%3Csvg width='9' height='15' viewBox='0 0 9 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.7998 13.5996L1.7998 7.59961L7.7998 1.59961' stroke='%236e2e3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center / auto 60% no-repeat;
}

.wpte-trip-feat-img-gallery .owl-nav button.owl-next::after {
  background: url("data:image/svg+xml,%3Csvg width='9' height='15' viewBox='0 0 9 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.20019 1.40039L7.20019 7.40039L1.2002 13.4004' stroke='%236e2e3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center / auto 60% no-repeat;
}

.wpte-trip-feat-img-gallery .item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/*
 * Botonera flotante "Gallery"/"Video" abajo-izquierda de la imagen — clases
 * y valores calcados de producción (getComputedStyle en
 * miviajeamendoza.com/index.php/trip/maipu-vinos-alfajores/, único ejemplo
 * con ambos botones a la vez). El ícono va con mask (no background-image
 * baked-in como en las flechas del carousel): acá es sobre un <a>, no un
 * <button> — el quirk de mask que sí afectaba a los botones del carousel
 * (ver arriba) no aplica.
 */
.wpte-gallery-wrapper {
  position: relative;
}

.wpte-gallery-wrapper .wpte-gallery-container {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 11;
  padding: 22px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.wpte-gallery-wrapper .wte-trip-vidgal-popup-trigger,
.wpte-gallery-wrapper .wte-trip-image-gal-popup-trigger {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 16px;
  background-color: #fff;
  border-radius: 50px;
  text-decoration: none;
  color: rgba(6, 22, 38, 0.8);
  font-weight: 500;
  transition: 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 2px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
}

.wpte-gallery-wrapper .wte-trip-vidgal-popup-trigger:hover,
.wpte-gallery-wrapper .wte-trip-image-gal-popup-trigger:hover {
  background-color: var(--primary-color);
  color: #fff;
}

.wpte-gallery-wrapper .wte-trip-vidgal-popup-trigger::before,
.wpte-gallery-wrapper .wte-trip-image-gal-popup-trigger::before {
  content: '';
  width: 1em;
  height: 1em;
  margin-right: 8px;
  background-color: currentcolor;
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.1475 5.3625C16.0335 5.29667 15.9042 5.26202 15.7725 5.26202C15.6408 5.26202 15.5115 5.29667 15.3975 5.3625L12.75 6.6675C12.7286 6.08518 12.4822 5.53385 12.0625 5.12958C11.6429 4.7253 11.0827 4.49961 10.5 4.5H3.75C3.15326 4.5 2.58097 4.73705 2.15901 5.15901C1.73705 5.58097 1.5 6.15326 1.5 6.75V11.25C1.5 11.8467 1.73705 12.419 2.15901 12.841C2.58097 13.2629 3.15326 13.5 3.75 13.5H10.5C11.0827 13.5004 11.6429 13.2747 12.0625 12.8704C12.4822 12.4661 12.7286 11.9148 12.75 11.3325L15.42 12.6675C15.5222 12.7199 15.6351 12.7481 15.75 12.75C15.8904 12.7505 16.0281 12.7115 16.1475 12.6375C16.2556 12.5699 16.3447 12.476 16.4063 12.3644C16.468 12.2529 16.5003 12.1275 16.5 12V6C16.5003 5.87254 16.468 5.74712 16.4063 5.63558C16.3447 5.52404 16.2556 5.43005 16.1475 5.3625ZM11.25 11.25C11.25 11.4489 11.171 11.6397 11.0303 11.7803C10.8897 11.921 10.6989 12 10.5 12H3.75C3.55109 12 3.36032 11.921 3.21967 11.7803C3.07902 11.6397 3 11.4489 3 11.25V6.75C3 6.55109 3.07902 6.36032 3.21967 6.21967C3.36032 6.07902 3.55109 6 3.75 6H10.5C10.6989 6 10.8897 6.07902 11.0303 6.21967C11.171 6.36032 11.25 6.55109 11.25 6.75V11.25ZM15 10.785L12.75 9.66V8.34L15 7.215V10.785Z' fill='%23061626'/%3E%3C/svg%3E") center center / 100% 100% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.1475 5.3625C16.0335 5.29667 15.9042 5.26202 15.7725 5.26202C15.6408 5.26202 15.5115 5.29667 15.3975 5.3625L12.75 6.6675C12.7286 6.08518 12.4822 5.53385 12.0625 5.12958C11.6429 4.7253 11.0827 4.49961 10.5 4.5H3.75C3.15326 4.5 2.58097 4.73705 2.15901 5.15901C1.73705 5.58097 1.5 6.15326 1.5 6.75V11.25C1.5 11.8467 1.73705 12.419 2.15901 12.841C2.58097 13.2629 3.15326 13.5 3.75 13.5H10.5C11.0827 13.5004 11.6429 13.2747 12.0625 12.8704C12.4822 12.4661 12.7286 11.9148 12.75 11.3325L15.42 12.6675C15.5222 12.7199 15.6351 12.7481 15.75 12.75C15.8904 12.7505 16.0281 12.7115 16.1475 12.6375C16.2556 12.5699 16.3447 12.476 16.4063 12.3644C16.468 12.2529 16.5003 12.1275 16.5 12V6C16.5003 5.87254 16.468 5.74712 16.4063 5.63558C16.3447 5.52404 16.2556 5.43005 16.1475 5.3625ZM11.25 11.25C11.25 11.4489 11.171 11.6397 11.0303 11.7803C10.8897 11.921 10.6989 12 10.5 12H3.75C3.55109 12 3.36032 11.921 3.21967 11.7803C3.07902 11.6397 3 11.4489 3 11.25V6.75C3 6.55109 3.07902 6.36032 3.21967 6.21967C3.36032 6.07902 3.55109 6 3.75 6H10.5C10.6989 6 10.8897 6.07902 11.0303 6.21967C11.171 6.36032 11.25 6.55109 11.25 6.75V11.25ZM15 10.785L12.75 9.66V8.34L15 7.215V10.785Z' fill='%23061626'/%3E%3C/svg%3E") center center / 100% 100% no-repeat;
}

.wpte-gallery-wrapper .wp-travel-engine-image-gal-popup {
  margin-right: 16px;
}

.wpte-gallery-wrapper .wp-travel-engine-image-gal-popup .wte-trip-image-gal-popup-trigger::before {
  mask: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.25 0H2.75C2.15326 0 1.58097 0.237053 1.15901 0.65901C0.737053 1.08097 0.5 1.65326 0.5 2.25V9.75C0.5 10.3467 0.737053 10.919 1.15901 11.341C1.58097 11.7629 2.15326 12 2.75 12H13.25C13.8467 12 14.419 11.7629 14.841 11.341C15.2629 10.919 15.5 10.3467 15.5 9.75V2.25C15.5 1.65326 15.2629 1.08097 14.841 0.65901C14.419 0.237053 13.8467 0 13.25 0ZM2.75 10.5C2.55109 10.5 2.36032 10.421 2.21967 10.2803C2.07902 10.1397 2 9.94891 2 9.75V7.935L4.475 5.4675C4.6152 5.33008 4.80369 5.25311 5 5.25311C5.19631 5.25311 5.3848 5.33008 5.525 5.4675L10.5575 10.5H2.75ZM14 9.75C14 9.94891 13.921 10.1397 13.7803 10.2803C13.6397 10.421 13.4489 10.5 13.25 10.5H12.6725L9.815 7.6275L10.475 6.9675C10.6152 6.83008 10.8037 6.75311 11 6.75311C11.1963 6.75311 11.3848 6.83008 11.525 6.9675L14 9.435V9.75ZM14 7.32L12.59 5.9175C12.1625 5.50682 11.5928 5.27747 11 5.27747C10.4072 5.27747 9.83746 5.50682 9.41 5.9175L8.75 6.5775L6.59 4.4175C6.16254 4.00682 5.59277 3.77747 5 3.77747C4.40723 3.77747 3.83746 4.00682 3.41 4.4175L2 5.82V2.25C2 2.05109 2.07902 1.86032 2.21967 1.71967C2.36032 1.57902 2.55109 1.5 2.75 1.5H13.25C13.4489 1.5 13.6397 1.57902 13.7803 1.71967C13.921 1.86032 14 2.05109 14 2.25V7.32Z' fill='%23061626'/%3E%3C/svg%3E") center center / 100% 100% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.25 0H2.75C2.15326 0 1.58097 0.237053 1.15901 0.65901C0.737053 1.08097 0.5 1.65326 0.5 2.25V9.75C0.5 10.3467 0.737053 10.919 1.15901 11.341C1.58097 11.7629 2.15326 12 2.75 12H13.25C13.8467 12 14.419 11.7629 14.841 11.341C15.2629 10.919 15.5 10.3467 15.5 9.75V2.25C15.5 1.65326 15.2629 1.08097 14.841 0.65901C14.419 0.237053 13.8467 0 13.25 0ZM2.75 10.5C2.55109 10.5 2.36032 10.421 2.21967 10.2803C2.07902 10.1397 2 9.94891 2 9.75V7.935L4.475 5.4675C4.6152 5.33008 4.80369 5.25311 5 5.25311C5.19631 5.25311 5.3848 5.33008 5.525 5.4675L10.5575 10.5H2.75ZM14 9.75C14 9.94891 13.921 10.1397 13.7803 10.2803C13.6397 10.421 13.4489 10.5 13.25 10.5H12.6725L9.815 7.6275L10.475 6.9675C10.6152 6.83008 10.8037 6.75311 11 6.75311C11.1963 6.75311 11.3848 6.83008 11.525 6.9675L14 9.435V9.75ZM14 7.32L12.59 5.9175C12.1625 5.50682 11.5928 5.27747 11 5.27747C10.4072 5.27747 9.83746 5.50682 9.41 5.9175L8.75 6.5775L6.59 4.4175C6.16254 4.00682 5.59277 3.77747 5 3.77747C4.40723 3.77747 3.83746 4.00682 3.41 4.4175L2 5.82V2.25C2 2.05109 2.07902 1.86032 2.21967 1.71967C2.36032 1.57902 2.55109 1.5 2.75 1.5H13.25C13.4489 1.5 13.6397 1.57902 13.7803 1.71967C13.921 1.86032 14 2.05109 14 2.25V7.32Z' fill='%23061626'/%3E%3C/svg%3E") center center / 100% 100% no-repeat;
}

/*
 * Tabs Overview/Itinerario/Costos/Mapa del tour individual — el grueso del
 * CSS ya estaba portado en style.css (#tabs-container, .nav-tab-wrapper,
 * .tab-content, .itinerary-row, #include-result/#exclude-result), pero
 * algunas reglas quedaron incompletas al portarlas. Valores reales
 * sacados de wte-public.css (variante simple, no la del acordeón v2 —
 * ver plan de reconstrucción del tour individual, esa queda para después).
 */

/* .itinerary-row:before ya tenía counter-increment/content/background
   portados (style.css) pero sin tamaño ni posición — sin esto el número
   no se veía como círculo. */
.itinerary-row:before {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  left: -20px;
  top: -4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #fff;
}

.itinerary .itinerary-content .title {
  float: none;
  display: block;
  font-weight: 700;
  margin: 0 0 10px;
}

/* #include-result/#exclude-result tenían margin portado pero no
   list-style/padding, y les faltaba el ícono de check/cruz por línea. */
#include-result,
#exclude-result {
  list-style: none;
  padding: 0;
}

#include-result li,
#exclude-result li {
  padding-left: 32px;
  position: relative;
  line-height: 2;
}

#include-result li:before {
  position: absolute;
  top: 7px;
  left: 0;
  content: '';
  width: 15px;
  height: 20px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2343a32d' viewBox='0 0 448 512'%3E%3Cpath d='M413.505 91.951L133.49 371.966l-98.995-98.995c-4.686-4.686-12.284-4.686-16.971 0L6.211 284.284c-4.686 4.686-4.686 12.284 0 16.971l118.794 118.794c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-11.314-11.314c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E") center center no-repeat;
}

#exclude-result li:before {
  position: absolute;
  top: 7px;
  left: 0;
  content: '';
  width: 15px;
  height: 20px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d80808' viewBox='0 0 320 512'%3E%3Cpath d='M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z'/%3E%3C/svg%3E") center center no-repeat;
}

.post-data.cost .content:first-child h3 {
  margin-top: 0;
}

#tabs-container .content iframe {
  width: 100%;
  height: 450px;
  border: 0;
}

/*
 * Tab FAQs — el CSS del acordeón (.faq-row/.accordion-tabs-toggle/
 * .faq-content, con el ícono de flecha por background-image, no dashicons)
 * ya estaba portado byte a byte en style.css desde antes de esta
 * reconstrucción (nadie lo había usado porque no existía ninguna tab de
 * FAQs todavía). Lo único que faltaba, otra vez el mismo patrón de esta
 * migración: `.accordion-tabs-toggle` necesita `position:relative` (ancla
 * al ícono absoluto) y `display:block`, que en producción vienen del
 * propio plugin WP Travel Engine (wte-public.css), nunca del theme.
 */
.accordion-tabs-toggle {
  position: relative;
  display: block;
  text-decoration: none;
}

/*
 * Layout general del tour individual (single-mvam_tour.php) — la plantilla
 * era "mínimo funcional, sin diseño propio todavía" (así lo dice su propio
 * comentario original): sin esto, título/meta/tabs/formulario quedaban
 * todos pegados sin separación, con tamaños/colores heredados del reset
 * genérico del theme en vez de coherentes con el resto del sitio. Reusa
 * .page-title (mismo H1 con línea inferior que ya usan taxonomy.php y el
 * buscador) sin CSS nuevo para el título en sí.
 */
/*
 * Insignia de duración (título arriba-izquierda, duración arriba-derecha
 * en la misma fila) — clases y valores calcados 1:1 de producción
 * (.wte-title-duration/.duration/.days), que en producción vienen del
 * propio plugin WP Travel Engine (wte-public.css), nunca del theme. Antes
 * mostrábamos esto abajo del título junto con la destinación
 * (.mvam-tour-meta, ya eliminado) — maquetación inventada nuestra, no
 * calcada de nada real.
 */
.mvam-tour-single .page-header {
  margin-top: 24px;
  position: relative;
  padding-right: 100px;
  padding-bottom: 24px;
}

.mvam-tour-single .page-header .page-title {
  font-size: 32px;
}

.wte-title-duration {
  width: 70px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 2px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
  position: absolute;
  top: 0;
  right: 0;
}

.wte-title-duration .duration {
  font-size: 32px;
  font-weight: 500;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  color: #fff;
}

.wte-title-duration .days {
  height: 30px;
  font-size: 14px;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
}

#tabs-container {
  margin-bottom: 40px;
}

.mvam-tour-content {
  margin: 0 0 40px;
}

.mvam-tour-booking,
.mvam-tour-enquiry {
  max-width: 480px;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mvam-tour-booking h2,
.mvam-tour-enquiry h2 {
  font-size: 22px;
  font-weight: 500;
  font-family: var(--secondary-font);
  color: var(--heading-font-color);
  margin: 0 0 20px;
}

/* .mvam-booking-form ya tenía look de card (border/padding/radius) desde
   la pasada "mínimo funcional" — se repite acá para el de consulta, así
   quedan consistentes entre sí (son mutuamente excluyentes, nunca se ven
   los dos juntos, pero cualquiera de los dos debe verse igual de cuidado). */
.mvam-enquiry-form {
  max-width: 360px;
  padding: 1.5rem;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

.mvam-booking-form p,
.mvam-enquiry-form p {
  margin: 0 0 16px;
}

.mvam-booking-form label,
.mvam-enquiry-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-font-color);
  margin-bottom: 6px;
}

.mvam-booking-form input[type="text"],
.mvam-booking-form input[type="date"],
.mvam-booking-form input[type="number"],
.mvam-booking-form select,
.mvam-enquiry-form input[type="text"],
.mvam-enquiry-form input[type="email"],
.mvam-enquiry-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
}

.mvam-booking-form .mvam-booking-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-color);
}

.mvam-booking-form .mvam-booking-error,
.mvam-enquiry-form .mvam-enquiry-error {
  color: #d80808;
  font-weight: 500;
}

.mvam-enquiry-form .mvam-enquiry-sent {
  color: #1e6b2e;
  font-weight: 500;
}

/*
 * Bug real encontrado auditando contra producción: la tab activa (con
 * fondo/esquinas redondeadas/flecha/scale) y el reset ".wptravelengine_css_v2
 * #tabs-container..." SÍ estaban bien portados en style.css (calzan
 * byte a byte con lo real) — lo que faltaba es la regla BASE de
 * `.nav-tab` (display:flex;flex-direction:column;align-items:center;
 * text-align:center;color;text-decoration) que en producción viene del
 * propio plugin WP Travel Engine (wte-public.css), que nosotros no
 * tenemos cargado — solo se portaron fragmentos sueltos a style.css, y
 * este en particular nunca se copió. Sin flex-direction:column ni
 * align-items/text-align:center, el texto de cada tab (sobre todo las
 * inactivas) quedaba sin centrar y con una altura/alineación
 * inconsistente entre sí y contra la fila — exactamente lo reportado
 * ("el alto o el fondo no siguen la línea de abajo").
 */
.nav-tab-wrapper .tab-anchor-wrapper .nav-tab {
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #666;
}

.nav-tab-wrapper .tab-anchor-wrapper .nav-tab:hover {
  color: var(--primary-color);
}

/*
 * Segunda vuelta del mismo bug: con la regla de arriba ya puesta, la tab
 * inactiva seguía viéndose más alta que la activa (~20px de más). Causa
 * real: `.wte-tab-title` (el <h2> que envuelve el <a class="nav-tab">)
 * tampoco estaba portado — sin su `margin:0`, hereda el margen por
 * defecto de los <h2> (~20px), y como .nav-tab tiene `height:100%`, ese
 * <h2> más alto de lo debido empuja a la tab activa hacia abajo respecto
 * a las inactivas en vez de quedar todas alineadas contra el borde
 * inferior de la fila. En producción esto también vive solo en el CSS
 * del plugin WP Travel Engine (wte-public.css), nunca en el theme.
 */
.nav-tab-wrapper .tab-anchor-wrapper .wte-tab-title {
  margin: 0;
  font-size: 1em;
  font-weight: normal;
  height: 100%;
}

/*
 * Home: secciones "Tours (populares)" y "Tours (destacados)" — portado
 * de travel-agency-companion/public/css/travel-agency-companion-public.css
 * (bloques .popular-destination / .featured-trip), no reinventado. El
 * plugin sigue activo hoy, pero su PHP (public/sections/*.php) ya no se
 * usa — MVAM_Theme_Customizer_Popular/Featured (inc/classes/customizer/)
 * lo reemplazaron con su propio render(), más simple (sin owl-carousel,
 * sin precio/duración, esos datos no existen en mvam_tour todavía) — el
 * CSS nunca se había portado junto con eso, así que sin el plugin activo
 * `.grid` quedaba sin layout (display:block en vez de flex/float),
 * confirmado apagando el plugin y comparando. Achicado a solo las reglas
 * que el markup actual usa (sin .price-holder/.meta-info/#destination-slider,
 * el theme no genera esos elementos) y sin el `.col:first-child{width:50%}`
 * original (pensado para el slider viejo, el grid nuevo es simétrico).
 */
.popular-destination {
  padding: 80px 0;
  background: #f6f6f6;
}

.popular-destination .section-header {
  max-width: 660px;
  margin: 0 auto 60px;
  text-align: center;
}

.popular-destination .section-header .section-title {
  font-family: var(--tac-secondary-font);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.25em;
  margin: 0 0 16px;
  padding-bottom: 10px;
  position: relative;
  color: var(--tac-heading-font-color);
}

.popular-destination .section-header .section-title:after {
  background: var(--tac-primary-color);
  content: '';
  height: 3px;
  left: 50%;
  position: absolute;
  top: 100%;
  width: 90px;
  transform: translateX(-50%);
}

.popular-destination .grid {
  margin: 0 -15px 50px;
}

.popular-destination .grid:after {
  content: '';
  display: block;
  clear: both;
}

.popular-destination .grid .col {
  float: left;
  width: 25%;
  padding: 0 15px;
  margin: 0 0 30px;
}

.popular-destination .grid .col .img-holder {
  position: relative;
}

.popular-destination .grid .col .img-holder img {
  vertical-align: top;
  border-radius: 5px;
}

.popular-destination .grid .col .text-holder {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 3em 20px 20px;
  color: #fff;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.popular-destination .grid .col .text-holder .title {
  font-size: 18px;
  line-height: 1.44em;
  font-weight: 500;
  font-family: var(--tac-secondary-font);
  margin: 0;
}

.popular-destination .grid .col .text-holder .title a {
  color: #fff;
  transition: linear 0.2s;
}

.popular-destination .grid .col .text-holder .title a:hover,
.popular-destination .grid .col .text-holder .title a:focus {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
}

.popular-destination .btn-holder {
  text-align: center;
}

.popular-destination .btn-holder .btn-more {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  display: inline-block;
  border: 2px solid var(--tac-primary-color);
  border-radius: 5px;
  text-transform: uppercase;
  padding: 6px 29px;
  font-family: var(--tac-secondary-font);
  transition: linear 0.2s;
}

.popular-destination .btn-holder .btn-more:hover,
.popular-destination .btn-holder .btn-more:focus {
  text-decoration: none;
  background: var(--tac-primary-color);
  color: #fff;
}

.featured-trip {
  padding: 80px 0;
  background: #f6f6f6;
}

.featured-trip .section-header {
  max-width: 660px;
  margin: 0 auto 60px;
  text-align: center;
}

.featured-trip .section-header .section-title {
  font-family: var(--tac-secondary-font);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.25em;
  margin: 0 0 16px;
  padding-bottom: 10px;
  position: relative;
  color: var(--tac-heading-font-color);
}

.featured-trip .section-header .section-title:after {
  background: var(--tac-primary-color);
  content: '';
  height: 3px;
  left: 50%;
  position: absolute;
  top: 100%;
  width: 90px;
  transform: translateX(-50%);
}

.featured-trip .grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -15px;
  margin-bottom: 50px;
}

.featured-trip .grid .col {
  padding: 0 15px;
  width: 33.333%;
  margin: 0 0 30px;
}

.featured-trip .grid .col .holder {
  height: 100%;
  border: 1px solid #dcdcdc;
  background: #fff;
  border-radius: 5px;
  transition: linear 0.2s;
}

.featured-trip .grid .col:hover .holder {
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.15);
}

.featured-trip .grid .img-holder {
  position: relative;
}

.featured-trip .grid .img-holder img {
  vertical-align: top;
  border-radius: 5px 5px 0 0;
}

.featured-trip .grid .text-holder {
  background: #fff;
  padding: 40px 0 14px;
  border-radius: 0 0 5px 5px;
}

.featured-trip .grid .text-holder .title {
  font-size: 18px;
  font-weight: 500;
  font-family: var(--tac-secondary-font);
  padding: 0 20px;
  margin: 0 0 7px;
}

.featured-trip .grid .text-holder .title a {
  color: var(--tac-heading-font-color);
  transition: linear 0.2s;
}

.featured-trip .grid .text-holder .title a:hover,
.featured-trip .grid .text-holder .title a:focus {
  text-decoration: none;
  color: var(--tac-primary-color);
}

.featured-trip .grid .text-holder .btn-holder {
  padding-top: 15px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
}

.featured-trip .grid .text-holder .btn-more {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  display: inline-block;
  border: 2px solid var(--tac-primary-color);
  border-radius: 20px;
  text-transform: uppercase;
  padding: 2px 30px;
  font-family: var(--tac-secondary-font);
  transition: linear 0.2s;
}

.featured-trip .grid .text-holder .btn-more:hover,
.featured-trip .grid .text-holder .btn-more:focus {
  text-decoration: none;
  background: var(--tac-primary-color);
  color: #fff;
}

.featured-trip .btn-holder {
  text-align: center;
}

.featured-trip .btn-holder .btn-more {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  display: inline-block;
  border: 2px solid var(--tac-primary-color);
  border-radius: 5px;
  text-transform: uppercase;
  padding: 6px 29px;
  font-family: var(--tac-secondary-font);
  transition: linear 0.2s;
}

.featured-trip .btn-holder .btn-more:hover,
.featured-trip .btn-holder .btn-more:focus {
  text-decoration: none;
  background: var(--tac-primary-color);
  color: #fff;
}

/*
 * Home: sección "¿Por qué elegirnos?" — portado de
 * travel-agency-companion-public.css (.our-features), mismo criterio que
 * .popular-destination/.featured-trip arriba: el theme reimplementó el PHP
 * (MVAM_Theme_Customizer_Why_Us) con las mismas clases pero nunca portó
 * este CSS — sin esto la sección colapsa casi a 0 de alto (el fondo con
 * imagen no tiene min-height ni el layout de 2 columnas), y la sección de
 * abajo queda pisándola. Encontrado apagando travel-agency-companion.
 */
.our-features {
  background-size: cover !important;
  background-attachment: fixed !important;
  position: relative;
  min-height: 245px;
}

.our-features:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: rgba(0, 0, 0, 0.5);
}

.our-features:after {
  content: '';
  display: block;
  clear: both;
}

.our-features .section-header {
  width: 40%;
  text-align: center;
  position: absolute;
  top: 50%;
  padding: 0 4em;
  transform: translateY(-50%);
  color: #fff;
}

.our-features .section-header .section-title {
  font-size: 36px;
  line-height: 1.25em;
  font-weight: 500;
  font-family: var(--tac-secondary-font);
  position: relative;
  padding-bottom: 10px;
  margin: 0 0 16px;
}

.our-features .section-header .section-title:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 90px;
  height: 3px;
  background: var(--tac-primary-color);
  transform: translateX(-50%);
}

.our-features .features-holder {
  float: right;
  width: 60%;
  background: #fff;
  padding: 80px;
  position: relative;
  z-index: 1;
  min-height: 245px;
}

.our-features .features-holder .grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.our-features .features-holder .col {
  width: 50%;
  padding: 0 15px;
  margin: 0 0 10px;
}

.our-features .features-holder .col:after {
  content: '';
  display: block;
  clear: both;
}

.our-features .features-holder .col .icon-holder {
  float: left;
  width: 60px;
  height: 60px;
  text-align: center;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  font-size: 24px;
  line-height: 60px;
  color: var(--tac-primary-color);
  margin-right: 20px;
  position: relative;
}

.our-features .features-holder .col .icon-holder svg:last-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.our-features .features-holder .col .icon-holder circle {
  fill: transparent;
  stroke-dasharray: 320;
  stroke-width: 1;
  transition: stroke-dashoffset 1s;
  stroke-dashoffset: 100;
}

.our-features .features-holder .col .icon-holder svg {
  position: absolute;
  top: -1px;
  left: 0;
}

.our-features .features-holder .col .text-holder {
  overflow: hidden;
}

.our-features .features-holder .col .text-holder .title {
  font-size: 22px;
  margin: 0 0 7px;
  font-weight: 500;
  font-family: var(--tac-secondary-font);
  color: #111;
}

.our-features .features-holder .col .text-holder .title a {
  color: var(--tac-heading-font-color);
  transition: linear 0.2s;
}

.our-features .features-holder .col .text-holder .title a:hover,
.our-features .features-holder .col .text-holder .title a:focus {
  text-decoration: none;
  color: var(--tac-primary-color);
}

/*
 * Home: sección "Llamado a la acción" — portado de .cta
 * (travel-agency-companion-public.css), mismo motivo que arriba.
 */
.cta {
  padding: 80px 0;
  position: relative;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.cta:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: rgba(0, 0, 0, 0.5);
}

.cta .container {
  position: relative;
  z-index: 1;
}

.cta .text {
  max-width: 645px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 20px;
  line-height: 1.6em;
}

.cta .text .title {
  font-size: 58px;
  line-height: 1.241em;
  font-weight: 500;
  font-family: var(--tac-secondary-font);
  margin: 0 0 15px;
}

.cta .text .btn-more {
  border: 2px solid var(--tac-primary-color);
  background: var(--tac-primary-color);
  border-radius: 5px;
  display: inline-block;
  font-family: var(--tac-secondary-font);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 30px;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  transition: linear 0.2s;
}

.cta .text .btn-more:hover,
.cta .text .btn-more:focus {
  text-decoration: none;
  background: none;
}

/*
 * Home: sección "Contadores" — portado de .stats
 * (travel-agency-companion-public.css). No hay contenido cargado en el
 * customizer todavía (ver MVAM_Theme_Customizer_Counter::render(), sale
 * temprano sin items), pero se porta igual para que no vuelva a faltar
 * el día que alguien la use.
 */
.stats {
  padding: 80px 0;
  position: relative;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.stats:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  content: '';
}

.stats .container {
  position: relative;
  z-index: 1;
}

.stats .section-header {
  max-width: 660px;
  margin: 0 auto 68px;
  text-align: center;
  position: relative;
  color: #fff;
}

.stats .section-header .section-title {
  font-size: 36px;
  line-height: 1.25em;
  font-weight: 500;
  font-family: var(--tac-secondary-font);
  position: relative;
  padding-bottom: 10px;
  margin: 0 0 16px;
}

.stats .section-header .section-title:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 90px;
  height: 3px;
  background: var(--tac-primary-color);
  transform: translateX(-50%);
}

.stats .grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.stats .grid .col {
  text-align: center;
  color: #fff;
  padding: 0 15px;
  width: 25%;
}

.stats .grid .col .raratheme-sc-holder {
  border: 5px solid rgba(253, 253, 253, 0.5);
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stats .grid .col .raratheme-sc-holder .icon-holder {
  font-size: 48px;
  margin: 0 0 15px;
  order: 1;
}

.stats .grid .col .raratheme-sc-holder .hs-counter {
  font-size: 60px;
  line-height: 1.1em;
  font-family: var(--tac-secondary-font);
  padding-bottom: 10px;
  margin-bottom: 15px;
  position: relative;
  order: 2;
}

.stats .grid .col .raratheme-sc-holder .hs-counter:after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 60px;
  height: 3px;
  background: var(--tac-primary-color);
  content: '';
  transform: translateX(-50%);
}

.stats .grid .col .raratheme-sc-holder .title {
  font-size: 16px;
  font-weight: 400;
  order: 3;
}

/*
 * Home: sección "Sobre nosotros" — portado de .about
 * (travel-agency-companion-public.css). Encontrado comparando contra
 * producción (miviajeamendoza.com) a pedido del usuario, no apagando el
 * plugin: esta sección nunca dependió de travel-agency-companion estando
 * activo/inactivo acá (el theme la reimplementa igual en los dos casos),
 * pero JAMÁS se había portado su CSS real — solo existía un
 * `.about .text-holder .title { margin-top: 20px }` suelto en style.css
 * (línea 348), el resto (línea de acento bajo el título, tipografía real,
 * botón con borde en vez de link plano, columnas 60/40) nunca estuvo.
 * Buena lección: verificar contra producción, no solo contra "cómo se
 * veía antes de mi cambio" en este mismo entorno.
 */
.about {
  padding: 18px 0 78px;
}

.about .container {
  max-width: 1100px;
}

.about .text-holder {
  float: left;
  padding: 0 15px;
  width: 60%;
}

.about .text-holder.no-code {
  width: 100%;
}

.about .text-holder .title {
  font-size: 36px;
  line-height: 1.25em;
  font-weight: 500;
  color: var(--tac-heading-font-color);
  margin: 0 0 46px;
  font-family: var(--tac-secondary-font);
  position: relative;
  padding: 0 0 10px;
}

.about .text-holder .title:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 90px;
  height: 3px;
  background: var(--tac-primary-color);
}

.about .text-holder .btn-more {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  display: inline-block;
  border: 2px solid var(--tac-primary-color);
  border-radius: 5px;
  text-transform: uppercase;
  padding: 6px 29px;
  font-family: var(--tac-secondary-font);
  transition: linear 0.2s;
}

.about .text-holder .btn-more:hover,
.about .text-holder .btn-more:focus {
  text-decoration: none;
  background: var(--tac-primary-color);
  color: #fff;
}

.about .img-holder {
  float: left;
  width: 40%;
  padding: 0 15px;
  margin-top: 25px;
}

/*
 * .featured-trip: badge "Destacado" (ribbon), destino con pin y duración
 * con reloj por card — comparado contra producción real
 * (miviajeamendoza.com), el render() del theme no emitía este markup y
 * como consecuencia esta CSS (real de
 * travel-agency-companion-public.css:1752-1900, misma que trae style.css
 * ya portada para .category-trips-single de los archivos de taxonomía,
 * pero acá con el selector .featured-trip/.our-deals que faltaba) nunca
 * se necesitó ni se portó hasta ahora. Sin .star-holder/.review-wrap/
 * .next-trip-info (reseñas/próximas salidas de WPTE, no aplican al
 * markup simplificado actual).
 */
.featured-trip .grid-latest .img-holder .category-feat-ribbon,
.our-deals .grid-latest .img-holder .category-feat-ribbon {
  display: block;
  position: absolute;
  text-align: right;
  top: 37px;
  right: -5px;
  /* Mismo bug que .category-feat-ribbon-txt de más abajo: la regla
     vieja de línea ~523 (.category-feat-ribbon sola) mete
     left/margin/z-index que esta regla, de mayor especificidad, nunca
     pisó — el real de travel-agency-companion-public.css no los tiene
     (solo display/position/text-align/top/right). Sin este reset, el
     wrapper terminaba con left:0 + margin:8px de la regla vieja
     encima del top/right de esta, corriendo el ribete de su lugar
     real. */
  left: auto;
  margin: 0;
  z-index: 11;
}

.featured-trip .grid-latest .img-holder .category-feat-ribbon .cat-feat-shadow,
.our-deals .grid-latest .img-holder .category-feat-ribbon .cat-feat-shadow {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 6px 0 0;
  border-color: #9a1e12 transparent transparent transparent;
}

.featured-trip .grid-latest .img-holder .category-feat-ribbon .category-feat-ribbon-txt,
.our-deals .grid-latest .img-holder .category-feat-ribbon .category-feat-ribbon-txt {
  display: block;
  background: #f57f01;
  color: #fff;
  font-size: 0.778em;
  font-style: italic;
  font-weight: 500;
  padding: 0;
  margin: 0;
  height: 23px;
  line-height: 23px;
  width: 70px;
  text-align: center;
  position: relative;
  float: right;
  /* Bug real reportado por el usuario ("el ribete es distinto al de
     prod"): la regla vieja de línea ~546 (.category-feat-ribbon-txt
     sola, portada del contexto equivocado de WPTE — la variante
     "pill" de página de tour individual, no la de home) define
     border-radius:15px. Esta regla de acá gana casi todas las
     propiedades por especificidad (5 clases contra 1), pero nunca
     declaró border-radius — así que ese 15px viejo se filtraba igual
     y redondeaba las puntas de lo que tiene que ser un banderín con
     esquinas rectas. Ver también align-items en esa regla vieja, sin
     efecto acá (no aplica a un display:block, no hace falta pisarlo). */
  border-radius: 0;
}

.featured-trip .grid-latest .img-holder .category-feat-ribbon .category-feat-ribbon-txt:before,
.our-deals .grid-latest .img-holder .category-feat-ribbon .category-feat-ribbon-txt:before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 11px 0;
  border-color: transparent #f57f01 transparent transparent;
  /* Bug real reportado por el usuario ("el lado izquierdo no quedó
     bien"): la regla vieja de línea ~563 (.category-feat-ribbon-txt::before
     sola, el ícono SVG del contexto equivocado de WPTE) define
     margin-right:6px — esta regla gana content/position/border por
     especificidad, pero nunca pisó margin, así que ese 6px seguía
     corriendo la punta izquierda del banderín lejos del cuerpo
     naranja, separándola en vez de pegarla. display no hace falta
     resetearlo: position:absolute ya fuerza el display computado a
     block sin importar qué diga la regla vieja (blockification, CSS
     Display spec). */
  margin: 0;
}

.featured-trip .grid-latest .img-holder .category-feat-ribbon .category-feat-ribbon-txt:after,
.our-deals .grid-latest .img-holder .category-feat-ribbon .category-feat-ribbon-txt:after {
  content: '';
  position: absolute;
  right: 100%;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 11px 7px;
  border-color: transparent transparent #f57f01 transparent;
}

.featured-trip .grid-latest .text-holder .category-trip-desti,
.our-deals .grid-latest .text-holder .category-trip-desti {
  padding: 0 35px;
}

.featured-trip .grid-latest .text-holder .category-trip-desti .meta-info,
.our-deals .grid-latest .text-holder .category-trip-desti .meta-info {
  padding: 0;
  display: inline-block;
  margin-left: 15px;
}

.featured-trip .grid-latest .text-holder .category-trip-loc svg,
.our-deals .grid-latest .text-holder .category-trip-loc svg {
  fill: var(--tac-primary-color);
}

.featured-trip .grid-latest .text-holder .category-trip-loc span,
.our-deals .grid-latest .text-holder .category-trip-loc span {
  color: var(--tac-primary-font-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
}

.featured-trip .grid-latest .text-holder .category-trip-loc span a,
.our-deals .grid-latest .text-holder .category-trip-loc span a {
  color: var(--tac-primary-font-color);
  text-decoration: none;
  transition: all ease 0.3s;
}

.featured-trip .grid-latest .text-holder .category-trip-loc span a:hover,
.our-deals .grid-latest .text-holder .category-trip-loc span a:hover {
  color: var(--tac-primary-color);
}

.featured-trip .grid-latest .text-holder .meta-info svg,
.our-deals .grid-latest .text-holder .meta-info svg {
  fill: var(--tac-primary-color);
}

.featured-trip .grid-latest .text-holder .category-trip-desti span,
.our-deals .grid-latest .text-holder .category-trip-desti span,
.featured-trip .grid .text-holder .meta-info span {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

.featured-trip .grid-latest .text-holder .category-trip-desti span i,
.our-deals .grid-latest .text-holder .category-trip-desti span i,
.featured-trip .grid .text-holder .meta-info span i {
  line-height: 1;
  margin-right: 5px;
}

/*
 * Ícono de carrito + contador en la barra de navegación (fondo blanco,
 * `.nav-holder`, junto al menú principal) — pedido real del usuario,
 * corregido de una primera versión que lo puso en la franja bordó de
 * arriba (`.header-t`) por error. float:right como el resto de los
 * elementos de esta franja (`.home-link`/`#primary-toggle-button`), con
 * el mismo padding vertical que usa `.main-navigation ul li a` (ver
 * style.css línea ~663) para que quede a la misma altura que el texto
 * del menú, no flotando más arriba/abajo.
 */
.nav-holder .mvam-cart-link {
  float: right;
  position: relative;
  display: block;
  padding: 19px 0 21px;
  color: var(--heading-font-color);
  font-size: 18px;
  line-height: 1;
  transition: linear 0.2s;
}

.nav-holder .mvam-cart-link:hover {
  color: var(--primary-color);
}

.nav-holder .mvam-cart-count {
  position: absolute;
  top: 12px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--secondary-color);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}