/* Armá tu viaje por pasos (templates/web/make-travel/funnel.html). Usa los
 * componentes del paquete por pasos (package-funnel.css); acá solo lo propio. */
body:has(#trip-funnel) { background: #fff; }

.tf { padding-top: 24px; }
.tf-intro .pf-step__title { font-size: clamp(2rem, 4.4vw, 3rem); }
.tf-intro .ac-field { position: relative; }
.tf-intro .pf-input { height: 58px; font-size: 1.08rem; }

.tf-benefits { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.tf-benefits li { position: relative; padding-left: 26px; font-size: .92rem; font-weight: 600; line-height: 1.4; }
.tf-benefits li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; font-size: .66rem; font-weight: 900;
                          display: flex; align-items: center; justify-content: center; background: #e7f6ec; color: var(--pf-ok); }

.tf-budget { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tf-budget .pf-options { flex-wrap: nowrap; }
.tf-budget__amount { flex: 1 1 200px; }
.tf-budget__amount:disabled { background: var(--pf-soft); color: var(--pf-muted); }
.tf-budget__unsure { margin-top: 12px; }

.tf-textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.tf .pf-form__field + .pf-form__row { margin-top: 4px; }

/* Widget trip.funnel dentro de una landing: toma el fondo de la sección donde esté.
 * Sin márgenes de página, tarjetas transparentes y sin las barras fijas (progreso y
 * "Continuar"), que en la página van sobre blanco para tapar lo que scrollea. */
.tf--widget { margin-bottom: 0; padding-top: 0; }
.tf--widget .pf-card { background: transparent; }
.tf--widget .pf-progress { position: static; background: none; backdrop-filter: none; }
.tf--widget .pf-step__actions { position: static; background: none; }
.tf--widget .tf-intro .pf-step__title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }

@media (max-width: 575.98px) {
    .tf { padding-top: 8px; }
    .tf-benefits { grid-template-columns: 1fr; }
}