/* KinesPrime · Buscador del inicio (plano, un acento, efectos suaves) */
#desktopSearchBar.search-bar-capsule {
  display: flex !important; align-items: center !important; gap: 6px !important;
  padding: 8px !important; border-radius: 22px !important;
  background: #FFFFFF !important;
  border: 1px solid #ECE7EC !important;
  box-shadow: 0 18px 40px -24px rgba(20, 8, 24, .35) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: border-color .25s, transform .25s !important;
}
#desktopSearchBar.search-bar-capsule:focus-within { border-color: #F3C4CF !important; }

#desktopSearchBar .capsule-segment {
  flex-direction: row !important; align-items: center !important; gap: 12px !important;
  padding: 10px 12px !important; border-radius: 16px !important;
  background: transparent !important; cursor: text;
  transition: background .2s !important;
}
#desktopSearchBar .capsule-segment:hover { background: #F7F5F8 !important; }
#desktopSearchBar .capsule-segment:focus-within { background: #FFF1F3 !important; }

#desktopSearchBar .ks-ico {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: #F4F1F5; color: #8A8290;
  transition: background .25s, color .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
#desktopSearchBar .capsule-segment:focus-within .ks-ico,
#desktopSearchBar .capsule-segment.has-value .ks-ico { background: #E11D48; color: #fff; }
#desktopSearchBar .capsule-segment:focus-within .ks-ico { transform: scale(1.06) rotate(-6deg); }

#desktopSearchBar .ks-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#desktopSearchBar .capsule-label {
  margin: 0 !important; color: #16121A !important;
  font-size: .72rem !important; font-weight: 700 !important;
  letter-spacing: .04em !important; text-transform: uppercase;
  text-shadow: none !important; animation: none !important;
}
#desktopSearchBar .capsule-segment:focus-within .capsule-label { color: #E11D48 !important; }
#desktopSearchBar .capsule-segment input {
  width: 100%; padding: 0 !important; border: 0 !important; outline: 0 !important;
  background: transparent !important; box-shadow: none !important;
  color: #16121A !important; font-family: inherit !important; font-size: .95rem !important; font-weight: 500 !important;
}
#desktopSearchBar .capsule-segment input::placeholder { color: #A39BA7 !important; opacity: 1; transition: opacity .2s, transform .2s; }
#desktopSearchBar .capsule-segment input:focus::placeholder { opacity: .5; }

#desktopSearchBar .ks-clear {
  flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #EDE9EE; color: #6B6470;
  animation: ksPop .25s cubic-bezier(.3, 1.6, .5, 1);
  transition: background .2s, color .2s;
}
#desktopSearchBar .ks-clear[hidden] { display: none; }
#desktopSearchBar .ks-clear:hover { background: #E11D48; color: #fff; }

#desktopSearchBar .capsule-divider {
  width: 1px !important; height: 34px !important; margin: 0 !important;
  background: #ECE7EC !important; flex: none;
}

#desktopSearchBar .capsule-actions { display: flex !important; gap: 8px !important; margin: 0 !important; flex: none; }
#desktopSearchBar .capsule-filter-btn,
#desktopSearchBar .capsule-search-btn {
  height: 50px !important; border-radius: 16px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  font-family: inherit !important; font-size: .92rem !important; font-weight: 700 !important;
  box-shadow: none !important; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s !important;
}
#desktopSearchBar .capsule-filter-btn {
  padding: 0 16px !important;
  background: #F4F1F5 !important; color: #16121A !important; border: 1.5px solid transparent !important;
}
#desktopSearchBar .capsule-filter-btn:hover { border-color: #F3C4CF !important; color: #E11D48 !important; }
#desktopSearchBar .capsule-filter-btn:hover svg { transform: rotate(90deg); }
#desktopSearchBar .capsule-filter-btn svg { transition: transform .35s ease; }
#desktopSearchBar .capsule-search-btn {
  position: relative; overflow: hidden;
  width: auto !important; padding: 0 22px !important;
  background: #E11D48 !important; color: #fff !important; border: 0 !important;
}
#desktopSearchBar .capsule-search-btn::after {
  content: "Buscar" !important; margin: 0 !important; font-family: inherit !important;
}
#desktopSearchBar .capsule-search-btn svg { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
#desktopSearchBar .capsule-search-btn:hover { background: #BE123C !important; }
#desktopSearchBar .capsule-search-btn:hover svg { transform: scale(1.15) rotate(-10deg); }
#desktopSearchBar .capsule-filter-btn:active,
#desktopSearchBar .capsule-search-btn:active { transform: scale(.96) !important; }
#desktopSearchBar:has(.has-value) .capsule-search-btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: rgba(255, 255, 255, .2); transform: skewX(-20deg);
  animation: ksSweep 2.6s ease-in-out infinite;
}

/* Oscuro */
body.dark-theme #desktopSearchBar.search-bar-capsule { background: #16141B !important; border-color: #26222D !important; }
body.dark-theme #desktopSearchBar.search-bar-capsule:focus-within { border-color: rgba(225, 29, 72, .45) !important; }
body.dark-theme #desktopSearchBar .capsule-segment:hover { background: #1F1C25 !important; }
body.dark-theme #desktopSearchBar .capsule-segment:focus-within { background: rgba(225, 29, 72, .1) !important; }
body.dark-theme #desktopSearchBar .ks-ico { background: #25212B; color: #A29AA8; }
body.dark-theme #desktopSearchBar .capsule-label { color: #F5F2F7 !important; }
body.dark-theme #desktopSearchBar .capsule-segment input { color: #F5F2F7 !important; }
body.dark-theme #desktopSearchBar .capsule-segment input::placeholder { color: #6E6675 !important; }
body.dark-theme #desktopSearchBar .ks-clear { background: #2C2833; color: #A29AA8; }
body.dark-theme #desktopSearchBar .capsule-divider { background: #26222D !important; }
body.dark-theme #desktopSearchBar .capsule-filter-btn { background: #25212B !important; color: #F5F2F7 !important; }

/* Celular: tarjeta apilada */
@media (max-width: 640px) {
  #desktopSearchBar.search-bar-capsule {
    flex-direction: column !important; align-items: stretch !important;
    gap: 4px !important; padding: 10px !important; border-radius: 22px !important;
  }
  #desktopSearchBar .capsule-segment { padding: 10px !important; }
  #desktopSearchBar .capsule-divider { width: auto !important; height: 1px !important; margin: 0 10px !important; }
  #desktopSearchBar .capsule-actions { width: 100% !important; margin-top: 6px !important; }
  #desktopSearchBar .capsule-filter-btn { flex: 0 0 auto !important; padding: 0 18px !important; }
  #desktopSearchBar .capsule-search-btn { flex: 1 !important; }
  #desktopSearchBar .capsule-segment input { font-size: 16px !important; }
}

@keyframes ksPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ksSweep { 0% { left: -60%; } 50%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  #desktopSearchBar *, #desktopSearchBar *::before { animation: none !important; transition: none !important; }
}

/* ── Celular: buscador plegado que se abre al tocar ── */
#desktopSearchBar .ks-trigger { display: none; }
@media (max-width: 640px) {
  #desktopSearchBar.ks-collapsible:not(.ks-open) { padding: 6px !important; gap: 0 !important; }
  #desktopSearchBar.ks-collapsible:not(.ks-open) > :not(.ks-trigger):not(script) { display: none !important; }
  #desktopSearchBar.ks-collapsible:not(.ks-open) .ks-trigger { display: flex; }
  #desktopSearchBar.ks-open > .capsule-segment,
  #desktopSearchBar.ks-open > .capsule-divider,
  #desktopSearchBar.ks-open > .capsule-actions { animation: ksOpen .35s cubic-bezier(.2, .8, .2, 1) both; }
  #desktopSearchBar.ks-open > .capsule-divider { animation-delay: .04s; }
  #desktopSearchBar.ks-open > .capsule-segment:nth-of-type(2) { animation-delay: .06s; }
  #desktopSearchBar.ks-open > .capsule-actions { animation-delay: .1s; }

  #desktopSearchBar .ks-trigger {
    width: 100%; align-items: center; gap: 12px;
    padding: 6px 8px 6px 6px; border: 0; border-radius: 16px;
    background: transparent; color: inherit; font-family: inherit; text-align: left; cursor: pointer;
    animation: ksOpen .3s ease both;
    -webkit-tap-highlight-color: transparent;
  }
  #desktopSearchBar .ks-trigger:active { transform: scale(.98); }
  #desktopSearchBar .ks-trigger-ico {
    flex: none; width: 42px; height: 42px; border-radius: 13px;
    display: grid; place-items: center; background: #E11D48; color: #fff;
  }
  #desktopSearchBar .ks-trigger-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  #desktopSearchBar .ks-trigger-text strong,
  #desktopSearchBar .ks-trigger-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #desktopSearchBar .ks-trigger-text strong { color: #16121A; font-size: .95rem; font-weight: 700; }
  #desktopSearchBar .ks-trigger-text small { color: #8A8290; font-size: .78rem; }
  #desktopSearchBar.ks-has-query .ks-trigger-text small { color: #E11D48; }
  #desktopSearchBar .ks-trigger-go {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; background: #F4F1F5; color: #6B6470;
    animation: ksBob 2.4s ease-in-out infinite 1s;
  }
  body.dark-theme #desktopSearchBar .ks-trigger-text strong { color: #F5F2F7; }
  body.dark-theme #desktopSearchBar .ks-trigger-go { background: #25212B; color: #A29AA8; }
}
@keyframes ksOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes ksBob { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(3px); } 90% { transform: translateY(-1px); } }
/* Espacios del inicio en celular (el título mantiene su tamaño) */
@media (max-width: 640px) {
  .hero-search-section { padding-top: 138px !important; padding-bottom: 18px !important; }
  .hero-search-section .hero-subtitle { margin-bottom: 16px !important; }
  .hero-search-section + .section-heading, .section-heading { padding-top: 8px !important; }
  .photo-rail { padding-top: 8px !important; padding-bottom: 8px !important; }
}