/* ============================================================
   WTI Search — Premium Frontend Design (BLINDADO)
   v1.3.0 · 2026-05-28
   - Reset agresivo contra cualquier tema (Hello, Astra, Elementor, etc.)
   - Alta especificidad para no ser pisado por WP Rocket / themes
   - Compatible con theme.json (WTI Core)
   ============================================================ */

/* ============================================================
   0. RESET DURO del wrapper (contra Hello/Elementor/cualquier tema)
   ============================================================ */
.wti-s,
.wti-bar {
  all: initial;
  display: block;
  box-sizing: border-box !important;
  font-family: var(--wti-font, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, system-ui, sans-serif);
  color: var(--wti-fg, #0a0a0a);
  font-size: 14px;
  line-height: 1.5;
  width: 100% !important;
  max-width: 100% !important;
}
.wti-s *,
.wti-bar * {
  box-sizing: border-box !important;
}
.wti-s form,
.wti-bar form { all: unset; display: block; }
.wti-s fieldset,
.wti-bar fieldset {
  all: unset;
  display: block;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wti-s legend,
.wti-bar legend {
  all: unset;
  display: block;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}
.wti-s input,
.wti-s button,
.wti-s select,
.wti-s textarea,
.wti-s a,
.wti-bar input,
.wti-bar button,
.wti-bar select,
.wti-bar textarea,
.wti-bar a {
  font-family: inherit;
  color: inherit;
}
.wti-s ul,
.wti-bar ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wti-s img,
.wti-bar img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   1. Tokens (light)
   ============================================================ */
.wti-s,
.wti-bar {
  --wti-bg:        var(--wti-color-surface,    #ffffff);
  --wti-bg-soft:   var(--wti-color-surface-2,  #fafafa);
  --wti-fg:        var(--wti-color-text,       #0a0a0a);
  --wti-fg-soft:   var(--wti-color-text-soft,  #525252);
  --wti-muted:     var(--wti-color-muted,      #8a8a8b);
  --wti-accent:    var(--wti-color-accent,     #d3661f);
  --wti-accent-fg: var(--wti-color-accent-fg,  #ffffff);
  --wti-border:    rgba(10,10,10,.08);
  --wti-border-2:  rgba(10,10,10,.14);
  --wti-radius:    14px;
  --wti-radius-sm: 10px;
  --wti-radius-xs: 8px;
  --wti-shadow-1:  0 1px 2px rgba(10,10,10,.04), 0 1px 1px rgba(10,10,10,.03);
  --wti-shadow-2:  0 6px 24px -8px rgba(10,10,10,.12), 0 2px 6px -2px rgba(10,10,10,.06);
  --wti-shadow-3:  0 24px 60px -20px rgba(10,10,10,.18), 0 8px 24px -8px rgba(10,10,10,.10);
  --wti-ring:      0 0 0 4px rgba(211,102,31,.18);
  --wti-font:      -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --wti-ease:      cubic-bezier(.16,1,.3,1);
  --wti-fast:      120ms;
  --wti-slow:      280ms;
}

/* Dark mode */
.wti-s.wti-s--theme-dark,
.wti-bar .wti-s--theme-dark {
  --wti-bg:        #0e0e10;
  --wti-bg-soft:   #18181b;
  --wti-fg:        #fafafa;
  --wti-fg-soft:   #c4c4c5;
  --wti-muted:     #8a8a8b;
  --wti-border:    rgba(255,255,255,.10);
  --wti-border-2:  rgba(255,255,255,.18);
  --wti-shadow-1:  0 1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.3);
  --wti-shadow-2:  0 6px 24px -8px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.4);
  --wti-shadow-3:  0 24px 60px -20px rgba(0,0,0,.7),  0 8px 24px -8px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  .wti-s.wti-s--theme-auto,
  .wti-bar .wti-s--theme-auto {
    --wti-bg:        #0e0e10;
    --wti-bg-soft:   #18181b;
    --wti-fg:        #fafafa;
    --wti-fg-soft:   #c4c4c5;
    --wti-muted:     #8a8a8b;
    --wti-border:    rgba(255,255,255,.10);
    --wti-border-2:  rgba(255,255,255,.18);
  }
}

/* ============================================================
   2. CAJA DE BÚSQUEDA
   ============================================================ */
.wti-s .wti-s__form {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 8px 6px 14px !important;
  background: var(--wti-bg) !important;
  border: 1px solid var(--wti-border) !important;
  border-radius: var(--wti-radius) !important;
  box-shadow: var(--wti-shadow-1) !important;
  transition: box-shadow var(--wti-fast) var(--wti-ease),
              border-color var(--wti-fast) var(--wti-ease) !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Tamaños: sm para header (compacto), md por defecto, lg para hero */
.wti-s--size-sm .wti-s__form {
  padding: 0 6px 0 10px !important;
  border-radius: 999px !important;
  gap: 4px !important;
  min-height: 32px !important;
}
.wti-s--size-sm .wti-s__input {
  font-size: 13px !important;
  padding: 4px 2px !important;
  line-height: 1.2 !important;
}
.wti-s--size-sm .wti-s__icon svg { width: 13px !important; height: 13px !important; }
.wti-s--size-sm .wti-s__kbd { padding: 1px 5px !important; font-size: 10px !important; }
.wti-s--size-sm .wti-s__clear { width: 20px !important; height: 20px !important; }

.wti-s--size-lg .wti-s__form {
  padding: 10px 12px 10px 18px !important;
}
.wti-s--size-lg .wti-s__input {
  font-size: 17px !important;
  padding: 12px 4px !important;
}
.wti-s--size-lg .wti-s__icon svg { width: 22px !important; height: 22px !important; }
.wti-s .wti-s__form:hover {
  border-color: var(--wti-border-2) !important;
  box-shadow: var(--wti-shadow-2) !important;
}
.wti-s .wti-s__form:focus-within {
  border-color: var(--wti-accent) !important;
  box-shadow: var(--wti-shadow-2), var(--wti-ring) !important;
}

.wti-s .wti-s__icon {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--wti-fg-soft) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
.wti-s .wti-s__icon svg { display: block; }
.wti-s .wti-s__form:focus-within .wti-s__icon { color: var(--wti-accent) !important; }

.wti-s .wti-s__sr {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.wti-s .wti-s__input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--wti-fg) !important;
  font: 500 15px/1.4 var(--wti-font) !important;
  padding: 10px 4px !important;
  margin: 0 !important;
  letter-spacing: -0.005em !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
}
.wti-s .wti-s__input::placeholder {
  color: var(--wti-muted) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
.wti-s .wti-s__input::-webkit-search-cancel-button { display: none !important; }
.wti-s .wti-s__input::-webkit-search-decoration  { display: none !important; }

.wti-s .wti-s__clear {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important; height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--wti-bg-soft) !important;
  color: var(--wti-fg-soft) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all var(--wti-fast) var(--wti-ease) !important;
  box-shadow: none !important;
}
.wti-s .wti-s__clear:hover {
  background: var(--wti-accent) !important;
  color: var(--wti-accent-fg) !important;
  transform: scale(1.08);
}
.wti-s .wti-s__clear[hidden] { display: none !important; }

.wti-s .wti-s__kbd {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 7px !important;
  font: 600 11px/1 var(--wti-font) !important;
  color: var(--wti-muted) !important;
  background: var(--wti-bg-soft) !important;
  border: 1px solid var(--wti-border) !important;
  border-radius: 6px !important;
  user-select: none;
  flex-shrink: 0 !important;
  font-style: normal !important;
}
@media (max-width: 640px) {
  .wti-s .wti-s__kbd { display: none !important; }
}

/* ============================================================
   3. AUTOCOMPLETAR
   ============================================================ */
.wti-s .wti-s__suggest {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  background: var(--wti-bg) !important;
  border: 1px solid var(--wti-border) !important;
  border-radius: var(--wti-radius) !important;
  box-shadow: var(--wti-shadow-3) !important;
  max-height: 60vh;
  overflow: auto !important;
  z-index: 9999 !important;
  list-style: none !important;
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  animation: wti-pop var(--wti-fast) var(--wti-ease);
}
.wti-s .wti-s__suggest[hidden] { display: none !important; }
@keyframes wti-pop {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wti-s .wti-s__suggest li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.wti-s .wti-s__suggest li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border-radius: var(--wti-radius-xs) !important;
  color: var(--wti-fg) !important;
  text-decoration: none !important;
  transition: background var(--wti-fast) var(--wti-ease);
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.wti-s .wti-s__suggest li.is-active a,
.wti-s .wti-s__suggest li a:hover {
  background: rgba(211,102,31,.08) !important;
  color: var(--wti-fg) !important;
}
.wti-s .wti-s__suggest img {
  width: 56px !important;
  height: 28px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.wti-s .wti-s__suggest__title {
  flex: 1 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -.005em;
  color: var(--wti-fg) !important;
}
.wti-s .wti-s__suggest__type {
  color: var(--wti-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600 !important;
}

/* ============================================================
   4. FILTROS
   ============================================================ */
.wti-s .wti-f {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  padding: 22px !important;
  margin: 0 !important;
  background: var(--wti-bg) !important;
  border: 1px solid var(--wti-border) !important;
  border-radius: var(--wti-radius) !important;
  box-shadow: var(--wti-shadow-1) !important;
}
.wti-s .wti-f__group {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
.wti-s .wti-f__legend {
  display: block !important;
  font: 700 12px/1 var(--wti-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--wti-fg-soft) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}
.wti-s .wti-f__opts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* Pills */
.wti-s .wti-f--pills .wti-f__opt {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  margin: 0 !important;
  background: var(--wti-bg-soft) !important;
  border: 1px solid var(--wti-border) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font: 500 13px/1 var(--wti-font) !important;
  color: var(--wti-fg) !important;
  user-select: none;
  line-height: 1 !important;
  transition: all var(--wti-fast) var(--wti-ease);
  box-shadow: none !important;
}
.wti-s .wti-f--pills .wti-f__opt:hover {
  border-color: var(--wti-border-2) !important;
  transform: translateY(-1px);
  box-shadow: var(--wti-shadow-1) !important;
}
.wti-s .wti-f--pills .wti-f__opt:has(input:checked) {
  background: var(--wti-accent) !important;
  color: var(--wti-accent-fg) !important;
  border-color: var(--wti-accent) !important;
  box-shadow: var(--wti-shadow-2) !important;
}
.wti-s .wti-f--pills .wti-f__opt input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.wti-s .wti-f__count {
  font-size: 11px !important;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

/* Checkboxes premium horizontales */
.wti-s .wti-f__opts--checkboxes,
.wti-s .wti-f--checkboxes .wti-f__opts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  align-items: center !important;
}
.wti-s .wti-f__opts--checkboxes .wti-f__opt,
.wti-s .wti-f--checkboxes .wti-f__opt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all var(--wti-fast) var(--wti-ease) !important;
  font: 500 13.5px/1.1 var(--wti-font) !important;
  background: var(--wti-bg) !important;
  border: 1.5px solid var(--wti-border-2) !important;
  color: var(--wti-fg) !important;
  box-shadow: 0 1px 2px rgba(10,10,10,.03) !important;
  user-select: none;
}
.wti-s .wti-f__opts--checkboxes .wti-f__opt:hover,
.wti-s .wti-f--checkboxes .wti-f__opt:hover {
  border-color: var(--wti-accent) !important;
  background: var(--wti-bg-soft) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(211,102,31,.08) !important;
}
/* Estilo LIST: minimal, sin chip ni borde — solo texto + check sutil */
.wti-s .wti-f__group--list .wti-f__opts {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.wti-s .wti-f__group--list .wti-f__opt {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wti-border) !important;
  border-radius: 0 !important;
  font: 500 14px/1.3 var(--wti-font) !important;
  color: var(--wti-fg) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: color var(--wti-fast) var(--wti-ease) !important;
}
.wti-s .wti-f__group--list .wti-f__opt:last-child {
  border-bottom: 0 !important;
}
.wti-s .wti-f__group--list .wti-f__opt:hover {
  color: var(--wti-accent) !important;
  transform: none !important;
  background: transparent !important;
  border-color: var(--wti-border) !important;
  box-shadow: none !important;
}
.wti-s .wti-f__group--list .wti-f__opt input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 1.5px solid var(--wti-border-2) !important;
  border-radius: 4px !important;
  background: var(--wti-bg) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: all var(--wti-fast) var(--wti-ease) !important;
}
.wti-s .wti-f__group--list .wti-f__opt input[type="checkbox"]:checked {
  border-color: var(--wti-accent) !important;
  background: var(--wti-accent) !important;
}
.wti-s .wti-f__group--list .wti-f__opt input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  inset: 1px 0 0 5px !important;
  width: 5px !important;
  height: 10px !important;
  border-right: 2.5px solid #fff !important;
  border-bottom: 2.5px solid #fff !important;
  transform: rotate(45deg) !important;
}
.wti-s .wti-f__group--list .wti-f__opt:has(input:checked) {
  color: var(--wti-accent) !important;
  font-weight: 600 !important;
  background: transparent !important;
  border-color: var(--wti-border) !important;
}
.wti-s .wti-f__group--list .wti-f__opt-label {
  flex: 1 !important;
}

/* Custom checkbox circular */
.wti-s .wti-f__opts--checkboxes .wti-f__opt input[type="checkbox"],
.wti-s .wti-f--checkboxes .wti-f__opt input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 2px solid var(--wti-border-2) !important;
  border-radius: 50% !important;
  background: var(--wti-bg) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: all var(--wti-fast) var(--wti-ease) !important;
}
.wti-s .wti-f__opts--checkboxes .wti-f__opt input[type="checkbox"]:checked,
.wti-s .wti-f--checkboxes .wti-f__opt input[type="checkbox"]:checked {
  border-color: var(--wti-accent) !important;
  background: var(--wti-accent) !important;
}
.wti-s .wti-f__opts--checkboxes .wti-f__opt input[type="checkbox"]:checked::after,
.wti-s .wti-f--checkboxes .wti-f__opt input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  inset: 2px 0 0 4px !important;
  width: 6px !important;
  height: 10px !important;
  border-right: 2.5px solid #fff !important;
  border-bottom: 2.5px solid #fff !important;
  transform: rotate(45deg) !important;
}
/* Opción seleccionada destaca */
.wti-s .wti-f__opts--checkboxes .wti-f__opt:has(input:checked),
.wti-s .wti-f--checkboxes .wti-f__opt:has(input:checked) {
  background: var(--wti-accent-soft, color-mix(in srgb, var(--wti-accent) 8%, transparent)) !important;
  border-color: var(--wti-accent) !important;
  color: var(--wti-fg) !important;
}
.wti-s .wti-f__opts--checkboxes .wti-f__opt-label,
.wti-s .wti-f--checkboxes .wti-f__opt-label {
  flex: 0 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Select premium */
.wti-s .wti-f__select {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: 100% !important;
  padding: 11px 38px 11px 14px !important;
  background: var(--wti-bg) !important;
  color: var(--wti-fg) !important;
  border: 1.5px solid var(--wti-border-2) !important;
  border-radius: 12px !important;
  font: 500 14px/1.3 var(--wti-font) !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(10,10,10,.04) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  transition: all var(--wti-fast) var(--wti-ease) !important;
}
.wti-s .wti-f__select:hover {
  border-color: var(--wti-accent) !important;
  box-shadow: 0 4px 12px rgba(211,102,31,.08) !important;
  transform: translateY(-1px);
}
.wti-s .wti-f__select:focus {
  border-color: var(--wti-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(211,102,31,.15) !important;
}
.wti-s .wti-f__select:not([value=""]):not(:placeholder-shown),
.wti-s .wti-f__select:valid:not(:has(option[value=""]:checked)) {
  border-color: var(--wti-accent) !important;
  background-color: color-mix(in srgb, var(--wti-accent) 5%, transparent) !important;
  font-weight: 600 !important;
}

.wti-s .wti-f__actions {
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 8px !important;
  margin: 0 !important;
  border-top: 1px dashed var(--wti-border) !important;
}
.wti-s .wti-f__reset {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  border: 1px solid var(--wti-border) !important;
  border-radius: var(--wti-radius-sm) !important;
  color: var(--wti-fg-soft) !important;
  cursor: pointer !important;
  font: 500 13px/1 var(--wti-font) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all var(--wti-fast) var(--wti-ease);
}
.wti-s .wti-f__reset:hover {
  border-color: var(--wti-border-2) !important;
  color: var(--wti-fg) !important;
  background: var(--wti-bg-soft) !important;
}

/* ============================================================
   5. RESULTADOS
   ============================================================ */
.wti-s .wti-r,
.wti-bar .wti-r {
  position: relative !important;
  min-height: 60px;
  transition: opacity var(--wti-fast) var(--wti-ease);
}
.wti-r[aria-busy="true"],
.wti-r.is-loading { opacity: .5 !important; pointer-events: none; }

.wti-r .wti-grid--grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}
/* Columnas fijas por preset */
.wti-r .wti-grid--cols-1 { grid-template-columns: 1fr !important; }
.wti-r .wti-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.wti-r .wti-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.wti-r .wti-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.wti-r .wti-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.wti-r .wti-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) {
  .wti-r .wti-grid--cols-5,
  .wti-r .wti-grid--cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .wti-r .wti-grid--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .wti-r .wti-grid--cols-3,
  .wti-r .wti-grid--cols-4,
  .wti-r .wti-grid--cols-5,
  .wti-r .wti-grid--cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  .wti-r [class*="wti-grid--cols-"] { grid-template-columns: 1fr !important; }
}
.wti-r .wti-grid--list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.wti-r .wti-grid--compact {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 8px !important;
}

/* ============================================================
   6. CARD
   ============================================================ */
.wti-r .wti-card {
  position: relative !important;
  background: var(--wti-bg) !important;
  border: 1px solid var(--wti-border) !important;
  border-radius: var(--wti-radius) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform var(--wti-slow) var(--wti-ease),
              box-shadow var(--wti-slow) var(--wti-ease),
              border-color var(--wti-fast) var(--wti-ease);
  box-shadow: var(--wti-shadow-1) !important;
}
.wti-r .wti-card:hover {
  transform: translateY(-3px);
  border-color: var(--wti-border-2) !important;
  box-shadow: var(--wti-shadow-3) !important;
}
.wti-r .wti-card__link {
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
  height: 100% !important;
  background: transparent !important;
}
.wti-r .wti-card__media {
  position: relative !important;
  overflow: hidden;
  background: var(--wti-bg-soft) !important;
  margin: 0 !important;
}
.wti-r .wti-card__media img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 2 / 1 !important;
  object-fit: cover !important;
  margin: 0 !important;
  transition: transform 600ms var(--wti-ease);
}
.wti-r .wti-card:hover .wti-card__media img { transform: scale(1.04); }

.wti-r .wti-card__body {
  padding: 14px 16px 16px !important;
  background: transparent !important;
}
.wti-r .wti-card__meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
}
.wti-r .wti-card__tag {
  display: inline-block !important;
  font: 600 10px/1 var(--wti-font) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wti-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wti-r .wti-card__date {
  display: inline-block !important;
  font: 500 11px/1 var(--wti-font) !important;
  color: var(--wti-muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}
.wti-r .wti-card__title {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font: 600 16px/1.3 var(--wti-font) !important;
  letter-spacing: -.012em !important;
  color: var(--wti-fg) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wti-r .wti-card__excerpt {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--wti-fg-soft) !important;
  font: 400 13px/1.5 var(--wti-font) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Layout list */
.wti-r .wti-grid--list .wti-card { display: flex !important; }
.wti-r .wti-grid--list .wti-card__link { display: flex !important; width: 100% !important; }
.wti-r .wti-grid--list .wti-card__media { flex: 0 0 200px; }
.wti-r .wti-grid--list .wti-card__media img { height: 100% !important; aspect-ratio: auto !important; }
.wti-r .wti-grid--list .wti-card__body { flex: 1 !important; padding: 16px 20px !important; }

/* Layout compact */
.wti-r .wti-grid--compact .wti-card__media { display: none !important; }
.wti-r .wti-grid--compact .wti-card__body { padding: 12px 14px !important; }
.wti-r .wti-grid--compact .wti-card__title { font-size: 14px !important; -webkit-line-clamp: 1; }
.wti-r .wti-grid--compact .wti-card__excerpt { display: none !important; }

/* Density */
.wti-r--compact  .wti-card__body { padding: 10px 12px 12px !important; }
.wti-r--compact  .wti-card__title { font-size: 14px !important; }
.wti-r--spacious .wti-card__body { padding: 20px 22px 24px !important; }

/* ============================================================
   7. ESTADOS
   ============================================================ */
.wti-r .wti-empty,
.wti-r .wti-error {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 56px 24px !important;
  text-align: center !important;
  color: var(--wti-muted) !important;
  background: var(--wti-bg-soft) !important;
  border: 1px dashed var(--wti-border-2) !important;
  border-radius: var(--wti-radius) !important;
  margin: 0 !important;
}
.wti-r .wti-empty svg, .wti-r .wti-error svg {
  color: var(--wti-muted) !important;
  opacity: .55;
}
.wti-r .wti-empty p, .wti-r .wti-error p {
  margin: 0 !important;
  font-size: 14px !important;
  color: inherit !important;
}

/* ============================================================
   8. SEARCHBAR (wrapper)
   ============================================================ */
.wti-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Layout sidebar: filtros a la izquierda + resultados a la derecha */
.wti-bar.wti-bar--sidebar {
  --wti-sidebar-width: 260px;
  display: grid !important;
  grid-template-columns: var(--wti-sidebar-width) 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}
.wti-bar.wti-bar--sidebar .wti-bar__side {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  position: sticky !important;
  top: 16px !important;
  min-width: 0 !important;
}
.wti-bar.wti-bar--sidebar .wti-bar__main {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-width: 0 !important;
}
/* Botón Filtros + cerrar drawer: ocultos en desktop */
.wti-bar .wti-bar__filter-toggle,
.wti-bar .wti-bar__drawer-close,
.wti-bar .wti-drawer__header,
.wti-bar .wti-drawer__footer,
.wti-bar .wti-bar__backdrop {
  display: none !important;
}
/* En desktop, dentro de wti-page, los filtros dinámicos se ven normales */
.wti-page .wti-page__dynamic-filters {
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-height: none !important;
  transform: none !important;
  z-index: auto !important;
  border-radius: 0 !important;
  overflow: visible !important;
  width: 100% !important;
}
.wti-page .wti-page__dynamic-filters .wti-drawer__body {
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}

/* ============================================================
   Móvil: sidebar → bottom-sheet drawer (estilo Airbnb)
   ============================================================ */
@media (max-width: 860px) {
  /* Layout colapsa a 1 columna */
  .wti-bar.wti-bar--sidebar {
    grid-template-columns: 1fr !important;
  }

  /* Botón "Filtros" sticky arriba */
  .wti-bar .wti-bar__filter-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    margin: 0 0 12px !important;
    background: var(--wti-bg) !important;
    border: 1px solid var(--wti-border-2) !important;
    border-radius: 999px !important;
    font: 600 14px/1 var(--wti-font) !important;
    color: var(--wti-fg) !important;
    cursor: pointer !important;
    box-shadow: var(--wti-shadow-2) !important;
    align-self: flex-start !important;
    transition: all var(--wti-fast) var(--wti-ease) !important;
  }
  .wti-bar .wti-bar__filter-toggle:hover {
    background: var(--wti-bg-soft) !important;
  }
  .wti-bar .wti-bar__filter-toggle::after {
    content: attr(data-count);
    background: var(--wti-accent);
    color: var(--wti-accent-fg);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
  }
  .wti-bar .wti-bar__filter-toggle[data-count="0"]::after,
  .wti-bar .wti-bar__filter-toggle:not([data-count])::after {
    display: none;
  }

  /* En la página /buscar/ los radios de tipo siempre visibles arriba (no van al drawer) */
  /* Sidebar → bottom-sheet (oculto por defecto) */
  .wti-bar.wti-bar--sidebar .wti-bar__side,
  .wti-bar.wti-bar--panel .wti-bar__panel-side,
  .wti-bar.wti-page .wti-page__dynamic-filters {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    max-height: 90vh !important;
    z-index: 999999 !important;
    background: var(--wti-bg) !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -10px 50px rgba(0,0,0,0.25) !important;
    overflow: hidden !important;
    padding: 0 !important;
    transform: translateY(100%) !important;
    transition: transform 280ms cubic-bezier(.16,1,.3,1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .wti-bar.is-drawer-open .wti-bar__side,
  .wti-bar.is-drawer-open .wti-bar__panel-side,
  .wti-bar.is-drawer-open .wti-page__dynamic-filters {
    transform: translateY(0) !important;
  }

  /* Header del drawer: sticky con título + botón cerrar */
  .wti-bar .wti-drawer__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--wti-border) !important;
    background: var(--wti-bg) !important;
    flex-shrink: 0 !important;
  }
  .wti-bar .wti-drawer__title {
    margin: 0 !important;
    font: 600 17px/1 var(--wti-font) !important;
    color: var(--wti-fg) !important;
  }
  .wti-bar .wti-bar__drawer-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: var(--wti-bg-soft) !important;
    border: 0 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    color: var(--wti-fg) !important;
    padding: 0 !important;
  }
  .wti-bar .wti-bar__drawer-close:hover {
    background: var(--wti-border-2) !important;
  }

  /* Body scrolleable */
  .wti-bar .wti-drawer__body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: 0 !important;
  }
  /* En searchpanel ocultamos el buscador del drawer (queda fuera siempre visible) */
  .wti-bar--panel .wti-drawer__body > .wti-s:not(.wti-f):first-child {
    display: none !important;
  }

  /* Footer sticky abajo con Limpiar + Ver resultados */
  .wti-bar .wti-drawer__footer {
    display: flex !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    border-top: 1px solid var(--wti-border) !important;
    background: var(--wti-bg) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05) !important;
  }
  .wti-bar .wti-drawer__clear {
    flex: 0 0 auto !important;
    padding: 12px 18px !important;
    background: transparent !important;
    border: 1px solid var(--wti-border-2) !important;
    border-radius: var(--wti-radius-sm) !important;
    color: var(--wti-fg) !important;
    font: 500 14px/1 var(--wti-font) !important;
    cursor: pointer !important;
  }
  .wti-bar .wti-drawer__apply {
    flex: 1 1 auto !important;
    padding: 12px 20px !important;
    background: var(--wti-accent) !important;
    color: var(--wti-accent-fg) !important;
    border: 0 !important;
    border-radius: var(--wti-radius-sm) !important;
    font: 600 14px/1 var(--wti-font) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px -2px rgba(211,102,31,.35) !important;
  }
  .wti-bar .wti-drawer__apply:hover { opacity: .95 !important; }
  .wti-bar .wti-drawer__apply:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
  }

  /* Backdrop oscuro detrás del drawer */
  .wti-bar .wti-bar__backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 999998 !important;
    opacity: 0;
    transition: opacity 280ms var(--wti-ease) !important;
  }
  .wti-bar.is-drawer-open .wti-bar__backdrop {
    display: block !important;
    opacity: 1;
  }

  /* Body sin scroll cuando drawer abierto */
  body.wti-drawer-open {
    overflow: hidden !important;
  }
}

/* ============================================================
   9. PÁGINA DE RESULTADOS (wti-page) — layout horizontal
   ============================================================ */
.wti-s.wti-page {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
}
.wti-s .wti-page__search {
  width: 100% !important;
  margin: 0 !important;
}
.wti-s .wti-page__types {
  width: 100% !important;
}

/* ============================================================
   9b. FILTRO TIPO RADIO (horizontal estilo Ajax Search Pro)
   ============================================================ */
.wti-s .wti-f--radio {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.wti-s .wti-f--radio .wti-f__opts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 28px !important;
  justify-content: flex-start !important;
}
.wti-s .wti-f--align-center .wti-f__opts {
  justify-content: center !important;
}
.wti-s .wti-f--radio .wti-f__opt {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 4px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  font: 500 14px/1 var(--wti-font) !important;
  color: var(--wti-fg-soft) !important;
  user-select: none;
  transition: color var(--wti-fast) var(--wti-ease) !important;
  box-shadow: none !important;
}
.wti-s .wti-f--radio .wti-f__opt:hover {
  color: var(--wti-fg) !important;
  transform: none !important;
}
.wti-s .wti-f--radio .wti-f__opt input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border: 2px solid var(--wti-border-2) !important;
  border-radius: 50% !important;
  background: var(--wti-bg) !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: all var(--wti-fast) var(--wti-ease) !important;
}
.wti-s .wti-f--radio .wti-f__opt input[type="radio"]:checked {
  border-color: var(--wti-accent) !important;
  background: var(--wti-bg) !important;
}
.wti-s .wti-f--radio .wti-f__opt input[type="radio"]:checked::after {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  border-radius: 50% !important;
  background: var(--wti-accent) !important;
}
.wti-s .wti-f--radio .wti-f__opt:has(input:checked) {
  color: var(--wti-fg) !important;
  font-weight: 600 !important;
}
.wti-s .wti-f--radio .wti-f__opt-label {
  display: inline !important;
  flex: 0 1 auto !important;
}

/* Separador inferior tipo barra */
.wti-s .wti-page__types {
  border-bottom: 1px solid var(--wti-border) !important;
  padding-bottom: 4px !important;
}

/* ============================================================
   Loader / spinner
   ============================================================ */
.wti-r {
  position: relative !important;
}
.wti-r .wti-r__loader {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: color-mix(in srgb, var(--wti-bg) 75%, transparent) !important;
  backdrop-filter: blur(2px) saturate(140%);
  -webkit-backdrop-filter: blur(2px) saturate(140%);
  border-radius: var(--wti-radius) !important;
  z-index: 10 !important;
  font: 500 14px/1 var(--wti-font) !important;
  color: var(--wti-fg-soft) !important;
  pointer-events: auto !important;
  animation: wti-fadein 120ms var(--wti-ease);
}
.wti-r .wti-r__loader[hidden] { display: none !important; }
.wti-r .wti-spinner {
  width: 22px !important;
  height: 22px !important;
  border: 2.5px solid var(--wti-border-2) !important;
  border-top-color: var(--wti-accent) !important;
  border-radius: 50% !important;
  animation: wti-spin 700ms linear infinite;
  flex-shrink: 0 !important;
}
@keyframes wti-spin {
  to { transform: rotate(360deg); }
}

/* Mini spinner en el input mientras autocompleta */
.wti-s .wti-s__form.is-loading .wti-s__icon {
  color: transparent !important;
  position: relative;
}
.wti-s .wti-s__form.is-loading .wti-s__icon::after {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border: 2px solid var(--wti-border-2) !important;
  border-top-color: var(--wti-accent) !important;
  border-radius: 50% !important;
  animation: wti-spin 700ms linear infinite;
}

/* Reduced motion: oculta animaciones */
@media (prefers-reduced-motion: reduce) {
  .wti-spinner, .wti-s__form.is-loading .wti-s__icon::after {
    animation: none !important;
  }
}

/* Paginación */
.wti-r .wti-pag {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 24px 0 0 !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--wti-border) !important;
}
.wti-r .wti-pag__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: var(--wti-bg) !important;
  border: 1px solid var(--wti-border-2) !important;
  border-radius: var(--wti-radius-sm) !important;
  color: var(--wti-fg) !important;
  cursor: pointer !important;
  font: 500 13px/1 var(--wti-font) !important;
  transition: all var(--wti-fast) var(--wti-ease) !important;
  box-shadow: none !important;
}
.wti-r .wti-pag__btn:hover:not([disabled]) {
  background: var(--wti-bg-soft) !important;
  border-color: var(--wti-accent) !important;
  color: var(--wti-accent) !important;
}
.wti-r .wti-pag__btn[disabled] {
  opacity: .35 !important;
  cursor: not-allowed !important;
}
.wti-r .wti-pag__info {
  font: 500 14px/1 var(--wti-font) !important;
  color: var(--wti-fg) !important;
}
.wti-r .wti-pag__total {
  color: var(--wti-muted) !important;
  font-weight: 400 !important;
  margin-left: 6px;
}
@media (max-width: 520px) {
  .wti-r .wti-pag { flex-direction: column; }
}

/* Filtros dinámicos por CPT */
.wti-s .wti-df {
  display: block !important;
  width: 100% !important;
}
.wti-s .wti-df__group {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--wti-border) !important;
  animation: wti-fadein 220ms var(--wti-ease);
}
.wti-s .wti-df__group[hidden] { display: none !important; }
.wti-s .wti-df__fieldset {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
@keyframes wti-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   10. MODO MINIMAL (hereda colores del tema)
   ============================================================ */
.wti-s--minimal {
  --wti-bg:        transparent;
  --wti-bg-soft:   rgba(0,0,0,.025);
  --wti-fg:        currentColor;
  --wti-fg-soft:   currentColor;
  --wti-muted:     currentColor;
  --wti-border:    rgba(0,0,0,.10);
  --wti-border-2:  rgba(0,0,0,.18);
  --wti-shadow-1:  none;
  --wti-shadow-2:  none;
  --wti-shadow-3:  0 6px 20px -8px rgba(0,0,0,.15);
  --wti-radius:    8px;
  --wti-radius-sm: 6px;
  --wti-radius-xs: 4px;
}
.wti-s--minimal .wti-s__form,
.wti-s--minimal .wti-f,
.wti-s--minimal .wti-card {
  box-shadow: none !important;
}
.wti-s--minimal .wti-s__form {
  background: var(--wti-bg, #fff) !important;
}
.wti-s--minimal .wti-f {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.wti-s--minimal .wti-card {
  border-radius: var(--wti-radius);
}
.wti-s--minimal .wti-card__title {
  color: inherit !important;
}
.wti-s--minimal .wti-card__excerpt {
  color: inherit !important;
  opacity: .75;
}
.wti-s--minimal .wti-f--pills .wti-f__opt:has(input:checked) {
  /* respeta el acento del tema si está definido */
}

/* ============================================================
   11. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wti-s *, .wti-bar *, .wti-r * {
    transition: none !important;
    animation: none !important;
  }
  .wti-r .wti-card:hover { transform: none !important; }
}