/* ==========================================================================
   Hoteles (app/busqueda/hoteles · plantillas/busqueda/hoteles/) sobre busqueda.css y luz.css
   --------------------------------------------------------------------------
   · Todas las clases empiezan por «hot-»: nada de aquí pisa el buscador común ni otra vertical.
   · Solo fichas de luz.css (color, tipografía --t-*, espacios --e*, radios); las del buscador
     común (--bq-borde-control, --bq-barra) vienen de busqueda.css.
   · Puntos de corte de la casa: 480, 700, 900 y 1060 px. Sin desbordes a 320 px.
   · Foco visible también en los números del plano (un <a> de SVG no pinta la sombra del anillo
     de luz.css: se marca el círculo) y en colores forzados.
   ========================================================================== */

/* ---------- formulario ----------
   Orden de los campos: 1 destino · 2 entrada · 3 salida · 4 habitaciones · 5 adultos · 6 edades · 7 moneda.
   Móvil: uno por fila salvo habitaciones y adultos, que van juntos. Desde 700 px, dos columnas; desde
   900 px, el viaje en una fila (destino, entrada, salida) y los viajeros en otra. */
.bq-campos.hot-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hot-campos > * { grid-column: 1 / -1; }
.hot-campos > :nth-child(4), .hot-campos > :nth-child(5) { grid-column: auto; }
/* «Medir desde un punto concreto»: opcional, al final y a lo ancho en todos los tamaños (su pista es larga). */
.bq-campos.hot-campos > .hot-punto { grid-column: 1 / -1; }
.hot-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); }
.hot-sugerencias { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--e3); font-size: var(--t-s); }
.hot-sugerencias a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: var(--noche); }
/* Con una búsqueda hecha, el formulario va plegable (en el móvil se pliega solo): la tarjeta es el <details>. */
.hot-busqueda { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-g); box-shadow: var(--sombra-1); }
.hot-busqueda > form { display: grid; gap: var(--e4); padding: var(--e4) var(--e5) var(--e5); border-top: 1px solid var(--borde); }
.hot-busqueda-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e3); min-height: 52px; padding: 10px var(--e5);
  cursor: pointer; list-style: none; font-size: var(--t-s); line-height: 1.4; color: var(--texto); }
.hot-busqueda-resumen::-webkit-details-marker { display: none; }
.hot-busqueda-resumen > .ico { flex: none; color: var(--ambar); }
.hot-busqueda-texto { flex: 1 1 16em; min-width: 0; }
.hot-busqueda-texto b { color: var(--noche); }
.hot-busqueda-cambiar { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--t-xs)/1.2 var(--f-texto); color: var(--noche);
  text-transform: uppercase; letter-spacing: .1em; }
.hot-busqueda-cambiar::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg); transition: transform .18s var(--curva); }
.hot-busqueda[open] .hot-busqueda-cambiar::after { transform: translateY(25%) rotate(-135deg); }
.bq .hot-busqueda-resumen:focus-visible { box-shadow: inset 0 0 0 3px var(--noche-suave); border-radius: var(--radio-g); outline-offset: -4px; }
@media (max-width: 480px) {
  .hot-busqueda-resumen { padding: 10px var(--e4); }
  .hot-busqueda > form { padding: var(--e4); }
}
.hot-enviar .bq-pista { max-width: 56ch; }
/* El campo del punto va a lo ancho, pero su pista (larga) se lee a la medida de la casa (60ch, SISTEMA-DE-DISENO). */
.hot-punto .bq-pista { max-width: 60ch; }
@media (min-width: 700px) {
  .hot-campos > :nth-child(n+2) { grid-column: auto; }
}
@media (min-width: 900px) {
  .bq-campos.hot-campos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hot-campos > :nth-child(1), .hot-campos > :nth-child(2), .hot-campos > :nth-child(3),
  .hot-campos > :nth-child(6), .hot-campos > :nth-child(7) { grid-column: span 2; }
}

/* ---------- plano de distancias (plegado: la lista va primero) ---------- */
.hot-plano { margin-top: var(--e4); border: 1px solid var(--borde); border-radius: var(--radio-g); background: var(--superficie); }
.hot-plano-boton { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e2); min-height: 48px; padding: 8px var(--e4);
  cursor: pointer; list-style: none; font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--noche); }
.hot-plano-boton::-webkit-details-marker { display: none; }
.hot-plano-boton::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform .18s var(--curva); }
.hot-plano[open] > .hot-plano-boton::after { transform: translateY(25%) rotate(-135deg); }
.hot-plano-boton .ico { color: var(--ambar); }
.hot-plano-cuantos { font-weight: 500; color: var(--suave); }
.bq .hot-plano-boton:focus-visible { box-shadow: inset 0 0 0 3px var(--noche-suave); border-radius: var(--radio-g); outline-offset: -4px; }
.hot-plano-figura { margin: 0; display: grid; gap: var(--e4); padding: var(--e2) var(--e4) var(--e5); border-top: 1px solid var(--borde); }
.hot-plano-pie { display: grid; gap: var(--e2); align-content: start; }
.hot-plano-pie p { margin: 0; font-size: var(--t-s); color: var(--texto); max-width: 52ch; }
.hot-plano-pie .hot-plano-titulo { font: 650 var(--t-xs)/1.3 var(--f-texto); color: var(--tinta); text-transform: uppercase; letter-spacing: .12em; }
.hot-plano-svg { display: block; width: 100%; max-width: 360px; height: auto; justify-self: center; overflow: visible; }
.hot-plano-eje { stroke: var(--linea); stroke-width: 1; }
.hot-plano-anillo { fill: none; stroke: var(--bq-barra); stroke-width: 1.2; stroke-dasharray: 3 4; }
.hot-plano-medida, .hot-plano-norte { font: 600 var(--t-xs)/1 var(--f-texto); fill: var(--suave); }
.hot-plano-norte { fill: var(--ambar); }
.hot-plano-centro { fill: var(--noche); stroke: #fff; stroke-width: 1.5; }
.hot-plano-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-xs); color: var(--texto); }
.hot-plano-leyenda li { display: flex; align-items: center; gap: var(--e2); }
.hot-plano-muestra { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--noche); }
.hot-plano-muestra.centro { width: 10px; height: 10px; margin: 2px; border-radius: 1px; transform: rotate(45deg); }
.hot-plano-muestra.destacado { background: var(--luz); box-shadow: inset 0 0 0 1.5px var(--noche); }
.hot-plano-muestra.anillo { background: none; border: 1.5px dashed var(--bq-borde-control); }
.hot-plano-punto circle { fill: var(--noche); stroke: #fff; stroke-width: 2; transition: stroke .15s; }
.hot-plano-punto text { font: 700 var(--t-xs)/1 var(--f-texto); fill: #fff; pointer-events: none; }
.hot-plano-punto.destacado circle { fill: var(--luz); stroke: var(--noche); }
.hot-plano-punto.destacado text { fill: var(--noche-prof); }
.hot-plano-punto:hover circle { stroke: var(--luz); stroke-width: 3; }
.bq .hot-plano-punto:focus-visible { outline: none; }
.bq .hot-plano-punto:focus-visible circle { stroke: var(--noche-suave); stroke-width: 5; }
@media (min-width: 900px) {
  .hot-plano-figura { grid-template-columns: minmax(0, 1fr) 360px; align-items: center; }
}

/* ---------- tarjeta de alojamiento ---------- */
.hot-ficha { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); }
.hot-foto { position: relative; margin: 0; display: grid; gap: 6px; align-content: start; }
.hot-foto img, .hot-foto-vacia { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radio); background: var(--arena); }
.hot-foto-vacia { display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--suave); font-size: var(--t-xs); }
.hot-numero { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: var(--radio-pildora); background: var(--noche); color: #fff; font: 700 var(--t-xs)/1 var(--f-texto);
  box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums; }
.hot-credito { font-size: var(--t-xs); line-height: 1.35; color: var(--suave); }
.hot-texto { display: grid; gap: var(--e2); min-width: 0; align-content: start; }
.hot-texto > p, .hot-texto > ul { margin: 0; }
.hot-categoria { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e3); font: 600 var(--t-xs)/1.3 var(--f-texto);
  color: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
.hot-estrellas { display: inline-flex; gap: 2px; color: var(--ambar); }
.hot-lugar { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-s); color: var(--texto); }
.hot-lugar .ico { flex: none; margin-top: 2px; color: var(--noche-suave); }
.hot-lugar b { color: var(--noche); }
.hot-nota { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-xs); line-height: 1.4; color: var(--suave); }
.hot-nota-cifra { flex: none; display: inline-grid; place-items: center; min-width: 38px; height: 28px; padding: 0 6px; border-radius: var(--radio-s);
  background: var(--noche); color: #fff; font: 700 var(--t-s)/1 var(--f-texto); }
.hot-motivos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hot-motivos li { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 10px; border-radius: var(--radio-pildora);
  background: var(--miel); color: var(--noche); font: 600 var(--t-xs)/1.3 var(--f-texto); }
.hot-motivos .ico { color: var(--bien); flex: none; }
.hot-condiciones { font-size: var(--t-s); gap: 4px var(--e4); }
.hot-servicios { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-xs); color: var(--suave); }
.hot-servicios li { display: inline-flex; align-items: center; gap: 5px; }
.hot-servicios .ico { color: var(--noche-suave); }
.hot-noche { font-size: var(--t-s); color: var(--suave); }
.hot-noche b { font: 700 var(--t-l)/1.2 var(--f-texto); color: var(--noche); }
.hot-tambien { display: flex; gap: 6px; align-items: flex-start; padding: 6px 10px; border-radius: var(--radio-s); background: var(--crema);
  font-size: var(--t-xs); line-height: 1.45; color: var(--texto); }
.hot-tambien .ico { flex: none; margin-top: 1px; color: var(--ambar); }
.hot-saber { padding: var(--e2) var(--e3); border-left: 3px solid var(--aviso); border-radius: 0 var(--radio-s) var(--radio-s) 0;
  background: var(--aviso-f); }
.hot-saber-titulo { margin: 0 0 4px; font: 650 var(--t-xs)/1.3 var(--f-texto); text-transform: uppercase; letter-spacing: .08em; color: #7A3A06; }
.hot-saber ul { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; font-size: var(--t-xs); line-height: 1.45; color: var(--texto); }
.hot-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); margin-top: var(--e1) !important; }
.hot-acciones .enlace-flecha { min-height: 32px; }

@media (max-width: 699px) {
  .hot-foto img, .hot-foto-vacia { aspect-ratio: 16 / 9; }
}
@media (min-width: 700px) {
  .hot-ficha { grid-template-columns: minmax(150px, 36%) minmax(0, 1fr); align-items: start; }
}
@media (forced-colors: active) {
  .hot-plano-punto circle { fill: Canvas; stroke: CanvasText; }
  .hot-plano-punto text { fill: CanvasText; }
  .hot-plano-punto:focus-visible circle { stroke: Highlight; }
  .hot-numero, .hot-nota-cifra { border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .hot-plano-boton::after, .hot-plano-punto circle { transition: none; }
}
@media print {
  .hot-plano, .hot-acciones { display: none !important; }
}
/* Socio que recibe la búsqueda (Booking.com), sin precio aquí (08-10-2026). */
.hot-socio { display: grid; gap: var(--e2); }
.hot-socio-lleva { display: flex; gap: var(--e2); align-items: flex-start; margin: 0; }
.hot-socio-nota { margin: 0; font-size: var(--t-xs); color: var(--color-texto-suave); }