/* ============================================================
   SUPERBOLETOS · BÚSQUEDA
   Cabecera reducida (sólo logo, cuenta e idioma), un campo ancho
   con el selector de ámbito, la tira de categorías con flechas y
   una rejilla de resultados de tres columnas.
   Se carga después de base.css e inicio.css: reusa .contenedor,
   .arte, .insignia y el pie.
   ============================================================ */

/* ============================================================
   CABECERA REDUCIDA
   ============================================================ */
.cabecera--busqueda .cabecera__interior{
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:22px;
}
.cabecera--busqueda .cuenta{ justify-self:center; }

/* ============================================================
   BUSCADOR
   ============================================================ */
.busqueda{ padding:34px 0 60px; }

/* La búsqueda no usa el ancho completo del sitio: el campo, las
   categorías y la rejilla comparten una columna más angosta, que
   es lo que hace que quepan tres tarjetas por fila. */
.busqueda .contenedor{ max-width:1180px; }

.busqueda__titulo{
  font-size:clamp(24px,2.5vw,32px); font-weight:700;
  color:var(--indigo); letter-spacing:-.02em;
  margin-bottom:18px;
}

.campo-busqueda{
  display:grid; grid-template-columns:160px minmax(0,1fr);
  align-items:stretch;
  border:1px solid var(--linea); border-radius:3px;
  background:var(--papel);
  overflow:hidden;
}
.campo-busqueda:focus-within{ border-color:var(--morado-btn); }

.campo-busqueda__ambito{
  display:flex; flex-direction:column; justify-content:center;
  padding:8px 14px;
  border-right:1px solid var(--linea);
}
.campo-busqueda__ambito span{
  font-size:9.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-tenue);
}
.campo-busqueda__ambito select{
  border:0; background:none; padding:2px 0;
  font:inherit; font-size:14px; color:var(--tinta-suave);
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
}
.campo-busqueda__ambito select:focus{ outline:none; }

.campo-busqueda__caja{
  display:flex; align-items:center; gap:12px;
  padding:0 16px;
}
.campo-busqueda__caja svg{ width:20px; height:20px; color:var(--tinta-tenue); flex:none; }
.campo-busqueda__caja input{
  width:100%; min-height:52px;
  border:0; background:none;
  font:inherit; font-size:15px; color:var(--tinta);
}
.campo-busqueda__caja input:focus{ outline:none; }
.campo-busqueda__caja input::placeholder{ color:var(--tinta-tenue); }

/* ============================================================
   TIRA DE CATEGORÍAS
   ============================================================ */
.tira{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:12px;
  margin:22px 0 26px;
}
.tira__pestanas{
  display:flex; gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.tira__pestanas::-webkit-scrollbar{ display:none; }
.tira__pestanas .pestana{ flex:none; white-space:nowrap; }

.tira__flecha{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  background:var(--papel); border:1px solid var(--linea); border-radius:50%;
  color:var(--morado-btn); cursor:pointer;
  transition:box-shadow .15s ease, transform .15s ease;
}
.tira__flecha svg{ width:20px; height:20px; }
.tira__flecha:hover{ transform:translateY(-1px); box-shadow:var(--sombra-baja); }

/* ============================================================
   RESULTADOS
   ============================================================ */
.busqueda__cuenta{
  font-size:clamp(18px,1.8vw,23px); font-weight:600;
  color:var(--indigo-hondo); letter-spacing:-.01em;
  margin-bottom:20px;
}

/* Tres columnas en escritorio, dos en tableta y una en teléfono,
   sin puntos de quiebre: `auto-fill` con un mínimo de 270 px se
   encarga solo. Con la columna de 1180 px caben tres de ~373. */
.resultados{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:20px;
  align-items:start;
}

.resultado{
  display:flex; flex-direction:column; min-width:0;
  background:var(--papel); border-radius:2px; overflow:hidden;
  color:inherit; text-decoration:none;
  box-shadow:var(--sombra-baja);
  transition:transform .18s ease, box-shadow .18s ease;
}
.resultado:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); }

/* Proporción en vez de alto fijo: al encoger la columna la
   imagen se encoge con ella y las tarjetas de una misma fila
   siguen alineadas. */
.resultado__arte{
  position:relative; display:block;
  aspect-ratio:16/9; overflow:hidden;
}
.resultado__arte .arte{
  position:absolute; inset:0;
  width:100%; height:100%; aspect-ratio:auto;
  border-radius:0; box-shadow:none;
}
.resultado:hover .arte__foto{ transform:scale(1.03); }

.resultado__pie{ display:block; padding:12px 15px 16px; }
.resultado__lugar{
  display:block;
  font-family:var(--fuente-serif); font-style:italic; font-size:13.5px;
  color:var(--tinta-suave); line-height:1.25;
}
.resultado__lugar span{ display:block; }
.resultado__titulo{
  display:block; margin-top:7px;
  font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--carmin);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.resultado__fecha{
  display:block; margin-top:5px;
  font-family:var(--fuente-serif); font-style:italic; font-weight:600;
  font-size:13.5px; color:var(--tinta);
}

.resultados__vacio{
  grid-column:1 / -1;
  padding:44px 20px; text-align:center;
  font-size:15px; line-height:1.7; color:var(--tinta-suave);
}
.resultados__vacio button{
  background:none; border:0; padding:2px 4px;
  color:var(--morado-btn); font:inherit; cursor:pointer;
  text-decoration:underline;
}

/* ============================================================
   PANTALLAS CHICAS
   ============================================================ */
@media (max-width:640px){
  .campo-busqueda{ grid-template-columns:1fr; }
  .campo-busqueda__ambito{
    border-right:0; border-bottom:1px solid var(--linea);
    flex-direction:row; align-items:center; gap:10px;
  }
  .tira{ grid-template-columns:1fr; }
  .tira__flecha{ display:none; }
  .resultados{ grid-template-columns:1fr; gap:16px; }
}

/* ============================================================
   MÓVIL · ≤768px
   Sólo teléfono. La rejilla de tres columnas de escritorio y su
   `auto-fill` siguen exactamente igual.
   ============================================================ */
@media (max-width: 768px){

  /* Esta vista no lleva buscador en la cabecera, así que no
     necesita la segunda fila que base.css reserva para las demás
     páginas: vuelve a su alto de una sola línea. */
  .cabecera--busqueda{ height:62px; min-height:0; }
  .cabecera--busqueda .cabecera__interior{
    grid-template-columns:auto minmax(0,1fr);
    gap:12px;
  }
  .cabecera--busqueda .cuenta{ justify-self:end; }

  .busqueda{ padding:22px 0 40px; }
  .busqueda__titulo{ margin-bottom:14px; }

  /* ------------------------------------------------------------
     CAMPO DE BÚSQUEDA
     16 px en el input y en el select: por debajo de eso Safari en
     iOS hace zoom al enfocar y deja la página desplazada a la
     derecha, que es una de las causas del scroll horizontal.
     ------------------------------------------------------------ */
  .campo-busqueda{ border-radius:var(--radio-s); }
  .campo-busqueda__ambito{ padding:8px 14px; }
  .campo-busqueda__ambito span{ font-size:11px; }
  .campo-busqueda__ambito select{ font-size:16px; min-height:40px; }
  .campo-busqueda__caja{ padding:0 14px; }
  .campo-busqueda__caja input{ font-size:16px; min-height:52px; }

  /* ------------------------------------------------------------
     TIRA DE CATEGORÍAS
     ------------------------------------------------------------ */
  .tira{ margin:16px 0 18px; }
  .tira__pestanas{ gap:6px; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
  .tira__pestanas .pestana{ min-height:44px; padding:11px 16px; }

  /* ------------------------------------------------------------
     RESULTADOS
     Reserva mientras js/buscador.js arma las tarjetas.
     ------------------------------------------------------------ */
  .busqueda__cuenta{ margin-bottom:16px; }
  #resultados:empty{ display:block; min-height:420px; }

  .resultado__pie{ padding:12px 14px 15px; }
  .resultado__titulo{ font-size:16px; }
  .resultado__lugar, .resultado__fecha{ font-size:14px; }

  .resultados__vacio{ padding:34px 14px; }
  .resultados__vacio button{ min-height:44px; padding:10px 6px; }
}