/* HotVal — Loop de anuncios (compartido: home, taxonomías, etc.). */

/* El wrap del loop ocupa el 100% del ancho. */
.anuncios-wrap {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Máximo 4 columnas; cada card como mucho 400px de ancho; grid centrado. */
.anuncios-loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 400px));
  gap: 14px;
  justify-content: center;
}
.anuncios-empty { grid-column: 1 / -1; text-align: center; color: var(--hv-muted); padding: 40px; }

/* --- Caja --- */
.anuncio-card {
  background: #fff;
  border: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Reserva el área de imagen (mismo tamaño con o sin foto) para que las cards
   respeten su altura y el texto quede alineado aunque falte la foto. */
.anuncio-card__link { display: block; line-height: 0; aspect-ratio: 400 / 600; overflow: hidden; background: #111; }
.anuncio-card__link img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Banner: solo imagen, sin franja de info. La imagen llena toda la celda. */
.anuncio-card--banner .anuncio-card__link { aspect-ratio: auto; height: 100%; flex: 1 1 auto; }

/* Casa: título "Ver chicas / nombre / Tel." centrado, sin descripción ni tarifa. */
.anuncio-card--casa .hot-title { text-align: center; font-size: 16px; line-height: 1.3; }
.anuncio-card--casa .hot-title a { display: block; }

/* Botones de acción (bandera + oferta + play): círculos solapando la imagen. */
.hot-action-buttons {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin-top: -30px; position: relative; z-index: 2;
}
.hot-action-buttons > div {
  width: 58px; height: 58px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden; border: 3px solid #fff;
}
.hot-action-buttons img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hab-oferta { font-size: 10px; font-weight: bold; line-height: 1.1; color: #111; padding: 4px; }
.hab-oferta--activa { background: #00cc00; }
.hab-oferta--prox { background: #ff0000; color: #fff; }
.btn-video { background: #222; cursor: pointer; }
.btn-video svg { width: 22px; height: 22px; margin-left: 2px; color: #fff; }
.btn-video:focus-visible { outline: 2px solid #6aa9ff; }

/* Vídeo cargado dentro de la card (oculta la imagen). */
.anuncio-card.has-video .anuncio-card__link { display: none; }
.anuncio-card__video { width: 100%; display: block; background: #000; aspect-ratio: 400 / 600; }

.anuncio-card__info { padding: 8px 14px 14px; display: flex; flex-direction: column; flex: 1 1 auto; }

.anuncio-card .hot-title {
  font-size: 18px; font-weight: 400; line-height: 1.2; margin: 0 0 6px; color: #111;
}
.anuncio-card .hot-title a { color: #111; text-decoration: none; }

.anuncio-card .hot-descripcion {
  font-size: 14px; line-height: 1.35; color: #555; margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.anuncio-card .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.anuncio-card .meta .tag {
  border: 1px solid #555; color: #222; background: transparent; border-radius: 4px;
  padding: 3px 8px; font-size: 13px; line-height: 1.2; white-space: nowrap; font-weight: 700;
}
/* Etiqueta de distancia ("cerca de mí"): fondo rojo. */
.anuncio-card .meta .tag--distancia {
  background: #e23b3b; border-color: #e23b3b; color: #fff; font-weight: 700;
}
/* Badge de novedad: amarillo = primera vez, rojo = republicada. */
.anuncio-card .meta .tag--novedad { color: #111; font-weight: 700; }
.anuncio-card .meta .tag--novedad-nueva { background: #ffcc33; border-color: #ffcc33; }
.anuncio-card .meta .tag--novedad-repu  { background: #c00000; border-color: #c00000; color: #fff; }
/* Página "cerca de mí": título centrado con inicial en mayúscula. */
.cerca .home-intro { text-align: center; }
.cerca .home-intro__title { text-align: center; }
.cerca .home-intro__title::first-letter { text-transform: uppercase; }
/* Texto de estado. */
.cerca__estado { color: var(--hv-muted); font-size: 16px; margin-top: 8px; text-align: center; }

/* Overlay de carga (igual estilo que el del mapa). */
.cerca-loading {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(0,0,0,.55); transition: opacity .3s ease;
}
.cerca-loading.is-hidden { opacity: 0; pointer-events: none; }
.cerca-loading__spin {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.25); border-top-color: var(--hv-accent, #e10032);
  animation: hv-spin .8s linear infinite;
}
.cerca-loading__txt { margin: 0; color: #fff; font-family: var(--hv-font, sans-serif); font-size: 15px; font-weight: 600; }

/* Responsive: reducir columnas manteniendo el 100% de ancho. */
@media (max-width: 1200px) { .anuncios-loop { grid-template-columns: repeat(3, minmax(0, 400px)); } }
@media (max-width: 820px)  { .anuncios-loop { grid-template-columns: repeat(2, minmax(0, 400px)); } }
/* Móvil: un anuncio por fila. */
@media (max-width: 600px)  { .anuncios-loop { grid-template-columns: 1fr; } }
@media (max-width: 420px)  { .anuncios-loop { gap: 8px; } }

/* ===== Pie del loop: anuncios vistos + volver arriba ===== */
.loop-vistos { margin-top: 48px; }
.loop-vistos__title {
  text-align: center; color: var(--hv-heading, #fff);
  font-size: 24px; font-weight: 400; margin: 0 0 22px;
}
.loop-arriba-wrap { display: flex; justify-content: center; padding: 40px 0 54px; }
.loop-arriba {
  background: none; border: 0; cursor: pointer; color: var(--hv-heading, #fff);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--hv-font); transition: opacity .2s ease;
}
.loop-arriba:hover { opacity: .75; }
.loop-arriba__ico { display: inline-flex; }
.loop-arriba__txt { font-size: 22px; }

/* ===== Slider (carrusel) — compartido: home + taxonomías ===== */
.home-slider { position: relative; padding: 60px 0; overflow: hidden; }
.home-slider__viewport { overflow: hidden; height: 416px; }
.home-slider__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0; align-items: flex-start;
  transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change: transform;
}
.home-slider__item {
  flex: 0 0 auto; width: 276px; aspect-ratio: 276 / 416; overflow: hidden;
  margin-top: 46px; opacity: .5; transition: margin-top .45s ease, opacity .45s ease;
}
.home-slider__item.is-active { margin-top: 0; opacity: 1; }
.home-slider__link, .home-slider__item img { display: block; width: 100%; height: 100%; }
.home-slider__item img { object-fit: cover; }
.home-slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.home-slider__nav:hover { background: #000; }
.home-slider__nav svg { width: 22px; height: 22px; }
.home-slider__nav--prev { left: 16px; }
.home-slider__nav--next { right: 16px; }
@media (max-width: 980px) {
  .home-slider__viewport { height: 380px; }
  .home-slider__item { width: 252px; margin-top: 34px; }
  .home-slider__nav { width: 40px; height: 40px; }
}

/* ===== Cabecera y botón de archivos de taxonomía ===== */
.archivo-titulo { text-align: center; padding: 60px var(--hv-gutter) 0; }
.archivo-titulo h1 { font-size: 30px; margin: 0; }
@media (max-width: 640px) { .archivo-titulo h1 { font-size: 24px; } }
.archivo-cta { text-align: center; padding: 40px var(--hv-gutter) 60px; }
.archivo-cta a {
  display: inline-block; background: #222; border: 1px solid #999; color: #999;
  font-weight: bold; padding: 12px 22px; border-radius: 4px;
  transition: color .2s ease, border-color .2s ease;
}
.archivo-cta a:hover { color: #fff; border-color: #fff; }

/* Infinite scroll: sentinela / cargando */
.anuncios-sentinel { height: 60px; display: flex; align-items: center; justify-content: center; }
.anuncios-sentinel.is-loading::after {
  content: ""; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: hv-spin .8s linear infinite;
}
@keyframes hv-spin { to { transform: rotate(360deg); } }

/* ===== Tarjeta de OFERTA (página /ofertas/) ===== */
/* Panel oscuro con las tarifas y la cuenta atrás, bajo la foto. El padding
   inferior deja hueco para que los botones de acción solapen el límite con la
   caja clara de info. */
.anuncio-card--oferta .oferta-panel { background: #333; padding: 14px 14px 34px; }
.oferta-tarifas { list-style: none; margin: 0; padding: 6px 0 2px; }
.oferta-tarifas__row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.oferta-tarifas__row:last-child { border-bottom: 0; }
.oferta-tarifas__dur { color: #cfcfcf; font-style: italic; font-weight: 700; font-size: 18px; }
.oferta-tarifas__dur::after { content: ""; }
.oferta-tarifas__precio { font-size: 20px; color: #fff; display: inline-flex; align-items: baseline; gap: 6px; }
.oferta-tarifas__orig { color: #e23b3b; font-weight: 700; }
.oferta-tarifas__arrow { color: #e23b3b; }
.oferta-tarifas__new { color: #00e000; font-weight: 800; font-size: 24px; }

/* Cuenta atrás */
.oferta-cd { text-align: center; padding: 12px 0 8px; }
.oferta-cd__label { display: block; color: var(--hv-muted, #aaa); font-style: italic; font-weight: 700; margin-bottom: 8px; }
.oferta-cd__row { display: flex; justify-content: center; gap: 10px; }
.oferta-cd__box {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid #00cc00;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; line-height: 1;
}
.oferta-cd__box b { font-size: 16px; }
.oferta-cd__box small { font-size: 10px; color: var(--hv-muted, #aaa); }
.oferta-cd.is-ended .oferta-cd__box { border-color: #777; }

/* Botones de acción centrados sobre el límite panel oscuro / caja clara
   (reutilizan .hot-action-buttons del loop con su solape -30px). */
.anuncio-card--oferta .hot-action-buttons { position: relative; z-index: 2; }
/* Distintivo "oferta activa / próx." como círculo (igual que el loop). */
.anuncio-card--oferta .hab-oferta { font-size: 10px; }

/* La caja blanca de info es de altura FIJA; el panel oscuro de oferta es el que
   crece para ocupar el resto (así todas las cajas blancas quedan alineadas).
   El panel es flex-column y la cuenta atrás se ancla abajo (margin-top:auto),
   de modo que todas las cuentas atrás quedan alineadas en la parte inferior. */
.anuncio-card--oferta .oferta-panel { flex: 1 1 auto; display: flex; flex-direction: column; }
.anuncio-card--oferta .oferta-cd { margin-top: auto; }
.anuncio-card--oferta .anuncio-card__info {
  flex: 0 0 auto; height: 160px; overflow: hidden;
}
.anuncio-card--oferta .anuncio-card__info .hot-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}