/* =====================================================================
   ePrilux · Buscador (módulo buscador, 26/10/2026, C4)
   1. Desplegable de sugerencias (diseño aprobado por Karen, estilo IKEA):
      búsquedas, estancias y categorías, guías y ayuda, productos.
   2. Página de resultados (plantilla 2938): cabecera, atajos y guías.
   ===================================================================== */

:root {
  --epx-b-navy: #06163d;
  --epx-b-blue: #23a7d6;
  --epx-b-borde: #e4e6e9;
  --epx-b-claro: #f7f7f5;
  --epx-b-gris: #697183;
  --epx-b-in: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 1. Desplegable ---------- */

/* Ordenador: el contenedor de resultados del widget de Elementor, debajo del campo. */
.epr-advanced-search .e-search-input-wrapper { position: relative; }
.epr-advanced-search .e-search-results { display: none !important; }
.epr-advanced-search .e-search-results-container.epx-busca__contenedor {
  display: block !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: auto !important;
  left: 0 !important;
  width: min(560px, calc(100vw - 24px)) !important;
  max-height: min(560px, calc(100dvh - 96px));
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--epx-b-borde);
  border-radius: 2px;
  box-shadow: 0 14px 26px -20px rgba(6, 22, 61, .45);
  z-index: 999980;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s var(--epx-b-in), transform .2s var(--epx-b-in), visibility 0s linear .2s;
}
.epr-advanced-search.epx-busca-abierto .e-search-results-container.epx-busca__contenedor {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

/* Móvil: dentro de la capa del buscador, a todo el ancho. */
.epx-busca__contenedor--movil { margin-top: 10px; overflow-y: auto; }
/* 2/11/2026 (revisión de Karen, n.º 1): la capa del móvil llena toda la pantalla visible (el JS la ajusta al teclado)
   y las sugerencias ocupan todo el alto que queda, con su propio desplazamiento. Antes se cortaban a media pantalla. */
.epx-bm__panel { bottom: 0; display: flex; flex-direction: column; overflow: hidden; }
.epx-bm__panel > .epx-bm__form { flex: none; }
.epx-busca__contenedor--movil { flex: 1 1 auto; min-height: 0; max-height: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.epx-busca { font-family: 'Montserrat', system-ui, sans-serif; color: var(--epx-b-navy); }
.epx-busca[hidden] { display: none !important; }

.epx-busca__bloque { padding: 6px 0 8px; }
.epx-busca__bloque + .epx-busca__bloque { border-top: 1px solid var(--epx-b-borde); }
.epx-busca__titulo {
  margin: 0 !important;
  padding: 12px 20px 6px !important;
  font: 500 10.5px/1.4 'Montserrat', system-ui, sans-serif !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--epx-b-gris) !important;
}

.epx-busca__op {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 9px 20px !important;
  color: var(--epx-b-navy) !important;
  font: 300 14px/1.45 'Montserrat', system-ui, sans-serif !important;
  text-decoration: none !important;
  transition: background .12s linear;
}
.epx-busca__op:hover, .epx-busca__op.is-active { background: var(--epx-b-claro); }
.epx-busca__op:focus-visible { outline: 2px solid var(--epx-b-blue); outline-offset: -2px; }
.epx-busca__op b { font-weight: 600; }

.epx-busca__icono { flex: 0 0 18px; width: 18px; height: 18px; color: var(--epx-b-gris); }
.epx-busca__icono svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.epx-busca__texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.epx-busca__dato { flex: 0 0 auto; margin-left: auto; color: var(--epx-b-gris); font-size: 12.5px; white-space: nowrap; }

.epx-busca__producto { padding-top: 7px !important; padding-bottom: 7px !important; }
.epx-busca__foto {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--epx-b-borde);
  border-radius: 2px;
  background: #fff;
  overflow: hidden;
}
.epx-busca__foto img { display: block; width: 100%; height: 100%; object-fit: contain; }

.epx-busca__todos {
  border-top: 1px solid var(--epx-b-borde);
  padding: 13px 20px !important;
  font-weight: 400 !important;
  font-size: 13.5px !important;
}

.epx-busca__estado { margin: 0 !important; padding: 14px 20px 6px !important; color: var(--epx-b-gris); font: 300 13.5px/1.55 'Montserrat', system-ui, sans-serif; }

.epx-busca__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 20px 14px; }
.epx-busca__chip {
  margin: 0 !important;
  padding: 6px 12px !important;
  background: #fff !important;
  border: 1px solid var(--epx-b-borde) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--epx-b-navy) !important;
  font: 400 12.5px/1.4 'Montserrat', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}
.epx-busca__chip:hover, .epx-busca__chip:focus-visible { background: var(--epx-b-claro) !important; border-color: var(--epx-b-navy) !important; }

@media (max-width: 767px) {
  .epr-advanced-search .e-search-results-container.epx-busca__contenedor { position: fixed !important; top: 72px !important; right: 12px !important; left: 12px !important; width: auto !important; max-height: calc(100dvh - 84px); }
  .epx-busca__op { padding: 10px 16px !important; }
  .epx-busca__titulo { padding: 12px 16px 6px !important; }
  .epx-busca__chips { padding: 4px 16px 14px; }
  /* 3/11/2026 (revisión de Karen: «se ve todo muy pegado»): en el móvil el precio iba en una columna a la derecha y el
     nombre ocupaba cuatro líneas. Ahora nombre en dos líneas y el precio debajo, con más aire entre productos. */
  .epx-busca__producto { display: grid !important; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; padding-top: 10px !important; padding-bottom: 10px !important; }
  .epx-busca__producto .epx-busca__foto { grid-row: 1 / span 2; }
  .epx-busca__producto .epx-busca__texto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px !important; line-height: 1.4; }
  .epx-busca__producto .epx-busca__dato { grid-column: 2; margin-left: 0; font-size: 12.5px; font-weight: 500; color: var(--epx-b-navy); }
  .epx-busca__bloque { padding: 8px 0 12px; }
  .epx-busca__titulo { padding-top: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .epr-advanced-search .e-search-results-container.epx-busca__contenedor { transition-duration: .05s; }
}

/* ---------- 2. Página de resultados ---------- */

.epx-res__cabecera, .epx-res__guias { font-family: 'Montserrat', system-ui, sans-serif; color: var(--epx-b-navy); }
.epx-res__cabecera { padding: 8px 0 28px; }
.epx-res__rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #4a5160;
}
.epx-res__rotulo::before { content: ""; width: 28px; height: 1px; background: #FDCF63; }
.epx-res__titulo {
  margin: 0 0 8px !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 200 !important;
  letter-spacing: -.03em;
  line-height: 1.15 !important;
  color: var(--epx-b-navy) !important;
}
.epx-res__titulo b { font-weight: 600; }
.epx-res__numero { margin: 0 !important; font-size: 14px; font-weight: 300; color: var(--epx-b-gris); }
.epx-res__prueba { margin: 18px 0 0 !important; font-size: 14px; font-weight: 300; }

.epx-res__atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.epx-res__atajo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--epx-b-borde);
  border-radius: 2px;
  background: #fff;
  color: var(--epx-b-navy) !important;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none !important;
  transition: border-color .15s linear, background .15s linear;
}
.epx-res__atajo span { color: var(--epx-b-gris); font-size: 12px; }
.epx-res__atajo:hover, .epx-res__atajo:focus-visible { border-color: var(--epx-b-navy); background: var(--epx-b-claro); }

.epx-res__guias { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--epx-b-borde); }
.epx-res__subtitulo { margin: 0 0 24px !important; font-size: clamp(22px, 2.4vw, 30px) !important; font-weight: 200 !important; letter-spacing: -.02em; color: var(--epx-b-navy) !important; }
.epx-res__subtitulo b { font-weight: 600; }
.epx-res__fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.epx-res__guia { display: flex; flex-direction: column; gap: 8px; color: var(--epx-b-navy) !important; text-decoration: none !important; }
.epx-res__marco { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; background: var(--epx-b-claro); }
.epx-res__marco img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--epx-b-in); }
.epx-res__guia:hover .epx-res__marco img { transform: scale(1.03); }
.epx-res__tipo { margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--epx-b-blue); }
.epx-res__nombre { font-size: 15px; font-weight: 500; line-height: 1.4; }
.epx-res__leer { font-size: 13px; font-weight: 400; color: var(--epx-b-blue); }

@media (max-width: 767px) {
  .epx-res__fila { grid-template-columns: 1fr; gap: 28px; }
  .epx-res__guias { margin-top: 40px; padding-top: 28px; }
}