/* HotVal — Home. Primer pase; se irá refinando por partes. */

/* Orden en columna para poder subir el slider por encima del H1 SOLO
   visualmente (el H1/descripción siguen PRIMEROS en el HTML → sin impacto SEO). */
#home,
#trans-zona { background: var(--hv-bg); display: flex; flex-direction: column; }
#home > .home-slider,
#trans-zona > .home-slider { order: -1; }

/* --- Intro: título + excerpt --- */
#home-intro { text-align: center; padding: 60px var(--hv-gutter); }
#home-intro .home-intro__title { font-size: 30px; margin-bottom: .4em; color: #999999; font-weight: 400; }
#home-intro .home-intro__excerpt { color: var(--hv-muted); font-size: 18px; max-width: 900px; margin: 0 auto; }

/* (El slider está en loop.css — compartido con las taxonomías.) */

/* --- Botones redondos --- */
#home-botones { display: flex; justify-content: center; flex-wrap: wrap; gap: 26px; padding: 60px var(--hv-gutter); }
#home-botones .home-boton {
  width: 85px; height: 85px; border-radius: 50%;
  /* Aro con borde degradado: relleno interior (padding-box) + degradado en el
     borde (border-box), con el borde transparente para dejarlo ver. */
  --ang: 140deg; /* cada botón gira el degradado a un lado distinto (ver nth-child) */
  border: 6px solid transparent;
  background:
    linear-gradient(var(--hv-bg, #000), var(--hv-bg, #000)) padding-box,
    linear-gradient(var(--ang), #f2f2f2 0%, #777 38%, #000 80%) border-box;
  color: #bbb;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 15px; line-height: 1.05; padding: 8px;
  transition: background .2s ease, color .2s ease;
}
/* El degradado del aro cae hacia un lado distinto en cada botón. */
#home-botones .home-boton:nth-child(1) { --ang: 140deg; }
#home-botones .home-boton:nth-child(2) { --ang: 230deg; }
#home-botones .home-boton:nth-child(3) { --ang: 320deg; }
#home-botones .home-boton:nth-child(4) { --ang: 50deg; }
/* Rollover / activo: el aro degradado pasa a rojo (conserva el ángulo). */
#home-botones .home-boton:hover,
#home-botones .home-boton.is-active {
  background:
    linear-gradient(var(--hv-bg, #000), var(--hv-bg, #000)) padding-box,
    linear-gradient(var(--ang), #ff6a6a 0%, #e10032 45%, #000 90%) border-box;
  color: #fff;
}

/* Zona trans: colores invertidos — rojo por defecto, gris en rollover. */
#home-botones .home-boton--trans {
  color: #fff;
  background:
    linear-gradient(var(--hv-bg, #000), var(--hv-bg, #000)) padding-box,
    linear-gradient(var(--ang), #ff6a6a 0%, #e10032 45%, #000 90%) border-box;
}
#home-botones .home-boton--trans:hover {
  color: #bbb;
  background:
    linear-gradient(var(--hv-bg, #000), var(--hv-bg, #000)) padding-box,
    linear-gradient(var(--ang), #f2f2f2 0%, #777 38%, #000 80%) border-box;
}

/* Silueta del murciélago antes del loop. */
.home-bat { display: flex; justify-content: center; padding: 20px var(--hv-gutter) 10px; }
.home-bat svg { width: 80%; max-width: 400px; height: auto; color: #999999; }

/* --- Filtros por taxonomía --- */
#home-filtros-wrap { max-width: 1140px; margin: 0 auto; padding: 60px var(--hv-gutter); display: flex; flex-direction: column; gap: 14px; }
.home-especiales, #home-filtros { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.home-filtro {
  background: transparent; color: #ccc; border: 3px solid #666666; border-radius: 5px;
  padding: 5px 12px; font-size: 18px; font-weight: bold; font-family: var(--hv-font);
  cursor: pointer; text-decoration: none; display: inline-block; text-align: center;
}
.home-filtro:hover { border-color: #999; color: #fff; }
/* Especiales: mismo diseño que el resto de filtros (unificado). */

/* --- Loop de anuncios (la caja/grid está en loop.css, compartido) --- */
#home-loop { padding: 60px 0; }

/* --- Descripción final --- */
#home-desc { padding: 60px var(--hv-gutter); }
#home-desc .home-desc__inner { max-width: 1000px; margin: 0 auto; color: var(--hv-muted); font-size: 15px; }
#home-desc h2 { font-size: 22px; }

@media (max-width: 980px) {
  #home-intro .home-intro__title { font-size: 24px; }
  #home-botones .home-boton { width: 78px; height: 78px; font-size: 13px; border-width: 6px; padding: 6px; }
}

/* Móvil estrecho: 2 columnas de anuncios y botones más juntos. */
@media (max-width: 640px) {
  /* Los 4 botones redondos en una sola línea (antes se partían en 2×2). */
  #home-botones { flex-wrap: nowrap; gap: 10px; padding: 40px 10px; }
  #home-botones .home-boton {
    width: auto; height: auto; flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1;
    font-size: 12px; border-width: 5px; padding: 4px;
  }
  #home-intro { padding: 40px var(--hv-gutter); }
  #home-slider, #home-filtros-wrap, #home-loop, #home-desc { padding-top: 40px; padding-bottom: 40px; }
  #home-intro .home-intro__excerpt { font-size: 16px; }
}

/* ===== Novedades ===== */
.novedades-aviso {
  max-width: 540px; margin: 16px auto 0; padding: 14px 18px;
  border: 1px solid var(--hv-hairline, #666); border-radius: 10px;
  color: var(--hv-muted); font-size: 15px;
}
.novedades-leyenda {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
  margin: 18px auto 0; color: var(--hv-muted); font-size: 15px;
}
.novedades-leyenda__item { display: inline-flex; align-items: center; gap: 8px; }
.novedades-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.novedades-dot--nueva { background: #ffcc33; }
.novedades-dot--repu  { background: #c00000; }
.novedades-vacio { text-align: center; color: var(--hv-muted); padding: 40px var(--hv-gutter); }

/* ===== Ofertas: subtítulo + barra de filtros ===== */
.ofertas-sub { color: #ffcc00; font-weight: 700; font-style: italic; margin: 8px 0 0; }

/* Filtros centrados, sin franja, con el mismo aro de borde degradado que los
   botones de la home (tamaño 85px, ángulo distinto por botón). */
.ofertas-filtros {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px;
  padding: 30px var(--hv-gutter); margin: 0;
}
.ofertas-filtros__tit { color: var(--hv-muted); font-style: italic; font-weight: 700; }
.ofertas-filtro {
  --ang: 140deg;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  width: 85px; height: 85px; border-radius: 50%; padding: 8px; box-sizing: border-box;
  border: 6px solid transparent;
  background:
    linear-gradient(var(--hv-bg, #000), var(--hv-bg, #000)) padding-box,
    linear-gradient(var(--ang), #f2f2f2 0%, #777 38%, #000 80%) border-box;
  color: #bbb; text-decoration: none; font-size: 12px; font-weight: 700; line-height: 1.12;
  overflow-wrap: break-word; word-break: normal;
  transition: background .2s ease, color .2s ease, transform .1s ease;
}
/* Cada botón gira el degradado a un lado distinto (el título es nth-child 1). */
.ofertas-filtro:nth-child(2) { --ang: 140deg; }
.ofertas-filtro:nth-child(3) { --ang: 230deg; }
.ofertas-filtro:nth-child(4) { --ang: 320deg; }
.ofertas-filtro:nth-child(5) { --ang: 50deg; }
.ofertas-filtro:nth-child(6) { --ang: 200deg; }
.ofertas-filtro:active { transform: scale(.95); }
/* Filtro activo: aro rojo degradado + texto blanco (como la home). */
.ofertas-filtro.is-active,
.ofertas-filtro:hover {
  color: #fff;
  background:
    linear-gradient(var(--hv-bg, #000), var(--hv-bg, #000)) padding-box,
    linear-gradient(var(--ang), #ff6a6a 0%, #e10032 45%, #000 90%) border-box;
}
/* Limpiar filtros: aro dorado. */
.ofertas-filtro--reset,
.ofertas-filtro--reset:hover {
  color: #ffd27a;
  background:
    linear-gradient(var(--hv-bg, #000), var(--hv-bg, #000)) padding-box,
    linear-gradient(var(--ang), #ffe08a 0%, #cc9900 45%, #000 90%) border-box;
}
@media (max-width: 640px) {
  .ofertas-filtros { gap: 16px; padding: 24px var(--hv-gutter); }
  .ofertas-filtros__tit { flex-basis: 100%; text-align: center; }
  .ofertas-filtro { width: 78px; height: 78px; font-size: 11.5px; }
}