/* Calculadora de presupuesto por pasos (js/budget.js) · estilo «noche mágica»:
   cielo nocturno con estrellas, papel crema, filetes dorados y tarjetas con forma
   de entrada. Caprasimo para títulos y cifras; el texto sigue con la fuente del sitio. */
.budget-calc {
  --bc-night: #141537;
  --bc-night-2: #22205a;
  --bc-ink: #1c1a40;
  --bc-muted: #6b6788;
  --bc-paper: #fbf6ea;
  --bc-card: #fffdf8;
  --bc-line: #e7dcc2;
  --bc-gold: #c9a24a;
  --bc-gold-2: #e9c978;
  --bc-ruby: #b4304a;
  --bc-display: 'Caprasimo', Georgia, 'Times New Roman', serif;
  position: relative;
  margin: 2.5rem 0;
  border-radius: 20px;
  background: var(--bc-paper);
  color: var(--bc-ink);
  box-shadow: inset 0 0 0 1px var(--bc-line), inset 0 0 0 6px var(--bc-paper), inset 0 0 0 7px rgba(201, 162, 74, .45),
    0 24px 48px -30px rgba(20, 21, 55, .55);
  overflow: hidden;
}

/* Cielo nocturno */
.budget-calc .bc-hero {
  position: relative;
  padding: 1.9rem 1.7rem 2.6rem;
  color: #f4e7c3;
  background:
    radial-gradient(1.4px 1.4px at 93% 46%, #fdf3d0 99%, transparent),
    radial-gradient(1px 1px at 97% 70%, rgba(255, 255, 255, .75) 99%, transparent),
    radial-gradient(1.2px 1.2px at 88% 86%, #fff 99%, transparent),
    radial-gradient(1px 1px at 20% 93%, rgba(255, 255, 255, .55) 99%, transparent),
    radial-gradient(1.2px 1.2px at 55% 95%, rgba(255, 255, 255, .6) 99%, transparent),
    radial-gradient(ellipse 60% 80% at 85% 0%, rgba(233, 201, 120, .18), transparent 70%),
    linear-gradient(165deg, var(--bc-night) 0%, var(--bc-night-2) 70%, #2e2470 100%);
}
.budget-calc .bc-hero::before {
  content: "✦";
  position: absolute;
  top: .8rem;
  right: 1rem;
  font-size: 1rem;
  color: var(--bc-gold-2);
  text-shadow: 0 0 12px rgba(233, 201, 120, .8);
}
/* borde inferior festoneado, como el de una entrada */
.budget-calc .bc-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 12px;
  background: radial-gradient(circle at 10px 12px, var(--bc-paper) 7px, transparent 7.5px) repeat-x;
  background-size: 20px 12px;
}
.article-body .budget-calc .bc-hero h2,
.budget-calc .bc-hero h2 {
  margin: 0 0 .5rem;
  padding: 0 1.6rem 0 0;
  border: 0;
  font-family: var(--bc-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #f6e8c4;
}
.article-body .budget-calc .bc-hero h2::after,
.budget-calc .bc-hero h2::after { display: none; }
.budget-calc .bc-hero p { margin: 0; max-width: 34rem; padding-right: 1.2rem; color: #cfcbea; font-size: .95rem; line-height: 1.55; }

.bc-app { padding: 1.4rem 1.7rem 1.7rem; }

/* Ruta de pasos: estrellas unidas por una línea de puntos */
.bc-progress { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin: 0 0 1.6rem; }
.bc-progress::before { content: ""; position: absolute; top: 1rem; left: 8%; right: 8%; border-top: 2px dotted rgba(201, 162, 74, .7); }
.budget-calc .bc-dot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 0; border: 0; background: none; font: inherit; color: var(--bc-muted); cursor: pointer;
}
.bc-dot b {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--bc-paper); box-shadow: inset 0 0 0 1.5px var(--bc-line);
  font-family: var(--bc-display); font-size: .95rem; color: var(--bc-muted); transition: all .2s ease;
}
.bc-dot span { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bc-dot.is-done b { background: var(--bc-night-2); color: var(--bc-gold-2); box-shadow: none; }
.bc-dot.is-on b {
  background: radial-gradient(circle at 35% 30%, #fff3c9, var(--bc-gold-2) 45%, var(--bc-gold));
  color: var(--bc-night); box-shadow: 0 0 0 4px rgba(233, 201, 120, .25), 0 0 18px rgba(233, 201, 120, .55);
}
.bc-dot.is-on span { color: var(--bc-ink); }

/* Títulos de paso */
.budget-calc .bc-step-head h3 { margin: 0 0 .3rem; font-family: var(--bc-display); font-weight: 400; font-size: 1.45rem; letter-spacing: -.01em; color: var(--bc-ink); }
.budget-calc .bc-step-head p { margin: 0 0 1.1rem; color: var(--bc-muted); font-size: .93rem; }
.budget-calc .bc-body h4 {
  display: flex; align-items: center; gap: .6rem; margin: 1.4rem 0 .65rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9a7a2f;
}
.budget-calc .bc-body h4::after { content: ""; flex: 1; border-top: 1px solid var(--bc-line); }

/* Contadores de personas */
.bc-stepper { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-bottom: 1px dashed var(--bc-line); }
.bc-stepper-label strong { display: block; font-size: 1.02rem; color: var(--bc-ink); }
.bc-stepper-label small { color: var(--bc-muted); font-size: .82rem; }
.bc-stepper-ctrl { display: flex; align-items: center; gap: .85rem; }
.bc-stepper-ctrl output { min-width: 1.6rem; text-align: center; font-family: var(--bc-display); font-size: 1.5rem; font-weight: 400; color: var(--bc-ink); }
.budget-calc .bc-round {
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; border: 1.5px solid var(--bc-gold);
  background: var(--bc-card); color: var(--bc-night-2); font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.budget-calc .bc-round:hover { background: var(--bc-night-2); color: var(--bc-gold-2); }

/* Opciones con forma de entrada: muescas a los lados y estrella al elegir */
.bc-choices { display: grid; gap: .65rem; }
.bc-choices-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bc-hotels { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.budget-calc .bc-choice {
  position: relative; display: flex; gap: .75rem; align-items: flex-start; margin: 0;
  padding: .9rem 1.15rem .9rem 1rem; border-radius: 12px; border: 1px solid var(--bc-line);
  background:
    radial-gradient(circle at 0 50%, var(--bc-paper) 7px, transparent 7.5px),
    radial-gradient(circle at 100% 50%, var(--bc-paper) 7px, transparent 7.5px),
    var(--bc-card);
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.budget-calc .bc-choice:hover { border-color: #d8c48d; transform: translateY(-1px); }
.bc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.bc-choice::before {
  content: "✧"; flex: 0 0 auto; width: 1.2rem; margin-top: -.05rem; font-size: 1.15rem; line-height: 1.2;
  text-align: center; color: #cbbf9e; transition: color .15s, text-shadow .15s;
}
.budget-calc .bc-choice.is-on {
  border-color: var(--bc-gold);
  background:
    radial-gradient(circle at 0 50%, var(--bc-paper) 7px, transparent 7.5px),
    radial-gradient(circle at 100% 50%, var(--bc-paper) 7px, transparent 7.5px),
    linear-gradient(180deg, #fffaf0, #fdf1d6);
  box-shadow: 0 0 0 1px var(--bc-gold), 0 10px 24px -16px rgba(154, 122, 47, .9);
}
.bc-choice.is-on::before { content: "✦"; color: var(--bc-gold); text-shadow: 0 0 10px rgba(233, 201, 120, .9); }
.bc-choice:focus-within { outline: 2px solid var(--bc-night-2); outline-offset: 2px; }
.bc-choice-body { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.bc-choice-body strong { font-size: .97rem; color: var(--bc-ink); }
.bc-choice-body small { font-size: .8rem; line-height: 1.4; color: var(--bc-muted); }
.bc-price {
  align-self: flex-start; margin-top: .4rem; padding: .15rem .55rem; border-radius: 999px;
  background: var(--bc-night-2); color: var(--bc-gold-2); font-size: .76rem; font-weight: 800;
}

/* Campos de importe: sobre el papel, con línea dorada */
.bc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1.2rem; margin-top: 1.1rem; }
.budget-calc .bc-field { margin: 0; }
.bc-field > span { display: block; margin-bottom: .25rem; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--bc-muted); }
.bc-field-input { display: flex; align-items: baseline; border-bottom: 2px solid var(--bc-gold); }
.budget-calc .bc-field-input input {
  flex: 1; min-width: 0; padding: .35rem 0; border: 0; background: transparent;
  font-family: var(--bc-display); font-size: 1.35rem; font-weight: 400; color: var(--bc-ink);
}
.bc-field-input input:focus { outline: none; }
.bc-field-input:focus-within { border-bottom-color: var(--bc-night-2); }
.bc-field-input em { padding-left: .4rem; font-style: normal; font-weight: 700; color: var(--bc-muted); }
.budget-calc .bc-hint { margin: .8rem 0 0; font-size: .84rem; font-style: italic; color: var(--bc-muted); }
.bc-check { display: flex; gap: .6rem; align-items: center; margin-top: 1.1rem; font-size: .93rem; color: var(--bc-ink); cursor: pointer; }
.bc-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--bc-night-2); }

/* Total en curso y navegación */
.budget-calc .bc-live { display: flex; justify-content: flex-end; align-items: baseline; gap: .5rem; min-height: 1.8rem; margin: 1.4rem 0 0; color: var(--bc-muted); font-size: .85rem; }
.bc-live strong { font-family: var(--bc-display); font-size: 1.45rem; color: var(--bc-night-2); }
.bc-nav { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .8rem; }
.budget-calc .bc-next, .budget-calc .bc-back { border: 0; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; }
.budget-calc .bc-next {
  margin-left: auto; padding: .85rem 1.6rem;
  background: linear-gradient(180deg, #2a2770, var(--bc-night)); color: var(--bc-gold-2);
  box-shadow: inset 0 0 0 1px rgba(233, 201, 120, .45), 0 12px 22px -14px rgba(20, 21, 55, .9);
}
.budget-calc .bc-next::after { content: " ✦"; }
.budget-calc .bc-next:hover { color: #fff3c9; }
.budget-calc .bc-back { padding: .85rem .2rem; background: none; color: var(--bc-muted); text-decoration: underline; text-underline-offset: 3px; }

/* Resultado: un ticket */
.bc-ticket {
  position: relative; padding: 1.4rem 1.4rem 1.2rem; border-radius: 16px; color: #efe7cf;
  background:
    radial-gradient(1.3px 1.3px at 94% 10%, #fdf3d0 99%, transparent),
    radial-gradient(1px 1px at 97% 24%, rgba(255, 255, 255, .6) 99%, transparent),
    linear-gradient(160deg, var(--bc-night) 0%, var(--bc-night-2) 100%);
  box-shadow: inset 0 0 0 1px rgba(233, 201, 120, .35);
}
.bc-ticket::before, .bc-ticket::after {
  content: ""; position: absolute; top: 6.2rem; width: 18px; height: 18px; border-radius: 50%; background: var(--bc-paper);
}
.bc-ticket::before { left: -9px; }
.bc-ticket::after { right: -9px; }
.budget-calc .bc-ticket-label { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bc-gold-2); }
.budget-calc .bc-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin: .3rem 0 1.1rem; padding-bottom: 1rem; border-bottom: 2px dashed rgba(233, 201, 120, .35); }
.bc-big span { font-family: var(--bc-display); font-size: 3rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: #f8e9be; }
.bc-big small { font-size: .95rem; color: #c9c4e6; }
.article-body .budget-calc .bc-breakdown,
.budget-calc .bc-breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; border: 0; border-radius: 0; background: none; box-shadow: none; }
.budget-calc .bc-breakdown li { display: flex; align-items: baseline; gap: .5rem; margin: 0; padding: 0; font-size: .92rem; color: #dcd6f2; }
.budget-calc .bc-breakdown li::before { content: none; }
.bc-breakdown li i { flex: 1; min-width: 1rem; border-bottom: 1px dotted rgba(233, 201, 120, .5); transform: translateY(-.25em); }
.bc-breakdown li b { font-family: var(--bc-display); font-weight: 400; color: #f8e9be; white-space: nowrap; }

.bc-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-top: 1.2rem; }
.budget-calc .bc-cta a, .budget-calc .bc-cta a:visited {
  display: block; padding: .85rem 1rem; border-radius: 12px; text-align: center; text-decoration: none;
  font-weight: 800; color: var(--bc-night); background: var(--bc-card); box-shadow: inset 0 0 0 1.5px var(--bc-gold);
}
.budget-calc .bc-cta a.bc-cta-hotel {
  color: var(--bc-night); background: linear-gradient(180deg, #f6dc94, var(--bc-gold-2) 55%, #d6ad55);
  box-shadow: 0 10px 22px -14px rgba(154, 122, 47, 1);
}
.budget-calc .bc-cta a:hover { color: var(--bc-ruby); }
.budget-calc .bc-note { margin: 1.1rem 0 0; font-size: .76rem; line-height: 1.55; color: var(--bc-muted); }

@media (max-width: 640px) {
  .budget-calc { margin: 2rem -.5rem; border-radius: 16px; }
  .budget-calc .bc-hero { padding: 1.5rem 1.15rem 2.3rem; }
  .article-body .budget-calc .bc-hero h2, .budget-calc .bc-hero h2 { font-size: 1.45rem; }
  .bc-app { padding: 1.15rem 1.15rem 1.4rem; }
  .bc-dot span { display: none; }
  .bc-big span { font-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .budget-calc * { transition: none !important; }
}
/* Japonés y chino: Caprasimo no tiene esos caracteres; gótica redondeada en negrita sin engordar la parte latina */
:lang(ja) :is(.budget-calc, .hotel-compare), :lang(zh) :is(.budget-calc, .hotel-compare) {
  --bc-display: 'Caprasimo', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'PingFang SC', 'PingFang TC', 'Noto Sans CJK JP', 'Microsoft YaHei', sans-serif;
  --hc-display: 'Caprasimo', 'Hiragino Maru Gothic ProN', 'Yu Gothic', 'PingFang SC', 'PingFang TC', 'Noto Sans CJK JP', 'Microsoft YaHei', sans-serif;
}
:lang(ja) :is(.budget-calc, .hotel-compare) :is(h2, h3, .bc-big span, .bc-dot b, .hc-card-price b),
:lang(zh) :is(.budget-calc, .hotel-compare) :is(h2, h3, .bc-big span, .bc-dot b, .hc-card-price b) { font-weight: 800; font-synthesis: none; }