/* ============================================================
   HERO PRICE BOX — caja brutalista de precio reutilizable
   Extraída de #hero-precio (cuanto-cuesta) para reutilizarla en
   las landings verticales y la home sin duplicar código.
   Cifras canónicas: desde 5 €/día · desde 125 €/mes con pago anual.
   Visual autónomo (usa --u-lime de tokens.css), independiente del
   layout del hero que la contenga.
   ============================================================ */
.hero-price-box {
  pointer-events: none;
  text-align: right;
  border: 2px solid var(--u-lime);
  background: rgba(0, 0, 0, 0.45);
  padding: 32px 36px;
  font-family: var(--u-font);
  max-width: 340px;
}
.hero-price-box .hp-cifra { line-height: 1; margin: 0 0 10px; }
.hero-price-box .hp-desde-inline { font-size: 1.3rem; vertical-align: super; margin-right: 4px; font-weight: 700; color: var(--u-lime); }
.hero-price-box .hp-num { font-size: clamp(3.4rem, 7vw, 5.6rem); font-weight: 700; color: var(--u-lime); }
.hero-price-box .hp-unidad { font-size: 1.5rem; font-weight: 700; color: var(--u-lime); }
.hero-price-box .hp-nota { font-size: 0.8rem; font-weight: 400; color: var(--u-text, #fafafa); margin: 0; }
.hero-price-box .hp-nota a {
  pointer-events: auto;
  color: var(--u-lime);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
}
.hero-price-box .hp-nota a:hover { text-decoration: underline; }

/* --- Variante ANCLADA: a la derecha de un hero bottom-left (clínicas, home) --- */
.hero-price-box.is-anchored {
  position: absolute;
  right: clamp(24px, 6vw, 80px);
  bottom: clamp(48px, 9vh, 96px);
  z-index: 11;
}
/* En móvil cae debajo del contenido del hero, alineada a la izquierda */
@media (max-width: 900px) {
  .hero-price-box.is-anchored {
    position: static;
    margin: 28px 0 0;
    max-width: none;
    text-align: left;
    align-self: stretch;
  }
}

/* --- Variante EN COLUMNA: dentro de la rejilla del hero (fincas) --- */
.lp-hero-aside-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lp-hero-aside-wrap .hero-price-box { max-width: none; width: 100%; }