/* A single, locally priced section on the Webdesign page. */
.wd-prices {
  --quote-ink: #23362c;
  --quote-muted: #556358;
  --quote-rule: #c4cabe;
  color: var(--quote-ink);
  margin-block: clamp(3.5rem, 7vw, 7rem);
  padding-block: clamp(3rem, 7vw, 6rem);
  background: #f2f3ed;
  scroll-margin-top: 6rem;
}
.wd-prices .wrap { max-width: 78rem; }
.wd-prices [hidden], .wd-quote-selection[hidden] { display: none !important; }
.wd-prices__heading { margin-bottom: clamp(1.75rem, 4vw, 3.4rem); }
.wd-prices__eyebrow { margin: 0 0 .8rem; color: #526145; font: 600 .92rem/1.4 var(--font-body); }
.wd-prices .wd-prices__heading h2 { max-width: 19ch; margin: 0 0 1rem; color: inherit; font: 600 clamp(2rem, 4.4vw, 4.15rem)/1.04 var(--font-display); letter-spacing: -.045em; text-wrap: balance; }
.wd-prices__heading p:last-child { max-width: 64ch; margin: 0; color: var(--quote-muted); font-size: clamp(1rem, 1.4vw, 1.17rem); line-height: 1.6; }
.wd-prices__packages { min-width: 0; padding: 0; border: 0; margin: 0; }
.wd-prices__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.65rem, 1.4vw, 1.1rem); }
.wd-prices__package { position: relative; min-width: 0; padding: clamp(1rem, 2.2vw, 1.7rem); background: #fcfcf8; border-radius: 1.2rem; border: 1px solid var(--quote-rule); }
.wd-prices__package label { display: grid; gap: .5rem; color: var(--quote-ink); }
.wd-prices__package strong { font: 600 1.02rem/1.4 var(--font-body); }
.wd-prices__package b { font: 600 clamp(1.7rem, 2.5vw, 2.4rem)/1.1 var(--font-display); letter-spacing: -.045em; }
.wd-prices__package p { margin: .75rem 0 0; color: var(--quote-muted); font: 400 .95rem/1.5 var(--font-body); }
.wd-prices__package input { display: none; }
.wd-prices[data-price-ready] .wd-prices__package input { display: block; position: absolute; top: clamp(1rem, 2.2vw, 1.7rem); right: clamp(1rem, 2.2vw, 1.7rem); z-index: 1; margin: 0; width: 1.15rem; height: 1.15rem; appearance: auto; accent-color: #39533c; cursor: pointer; }
.wd-prices[data-price-ready] .wd-prices__package label { padding-right: 1.6rem; cursor: pointer; }
.wd-prices[data-price-ready] .wd-prices__package label::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.wd-prices[data-price-ready] .wd-prices__package:has(input:checked) { border-color: #37513e; box-shadow: inset 0 0 0 1px #37513e; background: #fff; }
.wd-prices .wd-prices__package:focus-within { outline: 3px solid #4768ae; outline-offset: 3px; }
.wd-prices__scope { max-width: 90ch; margin: 1rem 0 0; color: var(--quote-muted); font-size: .9rem; }
.wd-prices__calculator { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: clamp(1.5rem, 5vw, 5.5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3.75rem); }
.wd-prices__calculator h3 { margin: 0; color: inherit; font: 600 clamp(1.3rem, 2vw, 1.75rem)/1.2 var(--font-display); letter-spacing: -.025em; }
.wd-prices__options { min-width: 0; }
.wd-prices__field { margin-top: 1.15rem; }
.wd-prices__field label { display: block; margin-bottom: .45rem; font-weight: 600; }
.wd-prices__field select { width: 100%; min-height: 48px; padding: .72rem .8rem; appearance: auto; border: 1px solid #858f82; border-radius: .65rem; background-color: #fff; color: var(--quote-ink); font: 400 1rem/1.4 var(--font-body); cursor: pointer; text-overflow: ellipsis; }
.wd-prices__field p, .wd-prices__estimate [data-price-note] { margin: .52rem 0 0; font-size: .89rem; line-height: 1.5; }
.wd-prices__field p { color: var(--quote-muted); }
.wd-prices__estimate { min-width: 0; padding: clamp(1.25rem, 3vw, 2.3rem); border-radius: 1.35rem; background: #253b30; color: #f8f8ef; }
.wd-prices__estimate .wd-prices__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; margin: 1.4rem 0 .2rem; line-height: 1.05; }
.wd-prices__total strong { color: #fff; font: 600 clamp(2.2rem, 4vw, 3.9rem)/1.04 var(--font-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.wd-prices__total span { color: #e0e5d6; font-size: .85rem; }
.wd-prices__estimate .wd-prices__context { margin: 0 0 1.2rem; color: #e0e5d6; }
.wd-prices dl { padding: 0; margin: 0; }
.wd-prices dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--quote-rule); line-height: 1.4; }
.wd-prices dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wd-prices__estimate dl > div { border-color: #53665b; font-size: .91rem; }
.wd-prices__estimate dd { flex-shrink: 0; }
.wd-prices__estimate [data-price-note], .wd-prices__estimate small { color: #d4dfd2; }
.wd-prices .wd-prices__cta { display: inline-flex; justify-content: center; align-items: center; gap: .65rem; min-height: 44px; padding: .6rem 1rem; margin: 1.25rem 0 .55rem; border-radius: 2rem; background: #f2e8bb; color: #253b30; text-decoration: none; font-weight: 600; }
.wd-prices__estimate small { display: block; font-size: .82rem; line-height: 1.45; }
.wd-prices__details { margin-top: 2rem; border-block: 1px solid var(--quote-rule); }
.wd-prices__details summary { padding: 1rem 0; min-height: 44px; font-size: 1.04rem; font-weight: 600; cursor: pointer; }
.wd-prices__detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; padding: 0 0 1.5rem; }
.wd-prices__detail-grid h3 { margin: .7rem 0 .65rem; font: 600 1.13rem/1.3 var(--font-body); }
.wd-prices__detail-grid dl, .wd-prices__detail-grid p { font-size: .94rem; }
.wd-prices__detail-grid p { margin: 0; }
.wd-prices__arranque { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 1.25rem; }
.wd-prices__arranque p { max-width: 74ch; margin: 0; color: var(--quote-muted); line-height: 1.55; font-size: .95rem; }
.wd-prices__arranque strong { color: var(--quote-ink); }
.wd-prices__arranque a { flex-shrink: 0; }
.nw-page-webdesign .haft.wd-price-in-view { display: none; }
.wd-price-jump { text-decoration: underline; text-underline-offset: .15em; }
.wd-quote-selection { padding: 1rem; border-radius: .7rem; background: #fff; border-left: 3px solid #6c784a; }
.wd-quote-selection p { margin: 0 0 .35rem; }
.wd-quote-selection button { min-height: 44px; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; font: inherit; color: #39533c; cursor: pointer; }
.wd-prices :is(a, select, summary):focus-visible, .wd-quote-selection button:focus-visible { outline: 3px solid #6889cf; outline-offset: 3px; }
@media (max-width: 760px) {
  .wd-prices__cards { grid-template-columns: 1fr; }
  .wd-prices__package label { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
  .wd-prices__package b { font-size: 1.45rem; }
  .wd-prices__package p { margin-top: .35rem; }
  .wd-prices__calculator, .wd-prices__detail-grid { grid-template-columns: 1fr; }
  .wd-prices__arranque { flex-direction: column; align-items: flex-start; gap: .35rem; }
}
@media (forced-colors: active) {
  .wd-prices[data-price-ready] .wd-prices__package:has(input:checked) { outline: 2px solid Highlight; }
}

/* Project payment, illustrated using an original frame from the Palma film. */
.wd-instalments {
  margin-top: clamp(1.65rem, 3.5vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--quote-rule);
  border-radius: 1.35rem;
  background: #fbfaf4;
  scroll-margin-top: 6rem;
}
.wd-instalments__story {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  align-items: end;
  padding: clamp(1.4rem, 3.4vw, 3rem);
  color: #fff;
  background: #393829;
}
.wd-instalments__story img,
.wd-instalments__story::before { position: absolute; inset: 0; width: 100%; height: 100%; }
.wd-instalments__story img { z-index: -2; object-fit: cover; object-position: 60% 40%; }
.wd-instalments__story::before {
  z-index: -1;
  content: '';
  background: linear-gradient(180deg, rgb(11 22 15 / 2%) 0%, rgb(12 23 16 / 18%) 35%, rgb(12 23 16 / 92%) 100%);
}
.wd-instalments__story p, .wd-instalments__example, .wd-morph__eyebrow {
  margin: 0 0 .5rem;
  font: 600 .92rem/1.35 var(--font-body);
}
.wd-instalments .wd-instalments__story h3, .wd-morph .wd-morph__copy h3 {
  margin: 0;
  font: 600 clamp(1.9rem, 3.3vw, 3rem)/1.05 var(--font-display);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.wd-instalments__story h3 { max-width: 16ch; color: #fff; }
.wd-instalments__schedule { align-self: center; min-width: 0; padding: clamp(1.4rem, 3.4vw, 3rem); }
.wd-instalments__example { color: #566246; }
.wd-instalments__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .7rem; margin: .5rem 0; }
.wd-instalments__amount strong { font: 600 clamp(1.72rem, 2.6vw, 2.45rem)/1.15 var(--font-display); letter-spacing: -.035em; }
.wd-instalments__amount span, .wd-instalments__total { color: var(--quote-muted); font-size: .91rem; line-height: 1.45; }
.wd-instalments__total { margin: .6rem 0 .25rem; }
.wd-instalments__bars { display: grid; grid-template-columns: 4fr repeat(6, 1fr); gap: 3px; margin-top: .9rem; }
.wd-instalments__bars i { height: 4px; background: #b8b98e; }
.wd-instalments__bars i:first-child { background: #596847; }
.wd-prices .wd-prices__action {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  margin-top: .35rem;
  color: #324b37;
  font: 600 .94rem/1.35 var(--font-body);
  text-decoration: underline;
  text-underline-offset: .21em;
}
.wd-prices__motion-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1rem; margin-top: .3rem; }
.wd-prices__motion-option label { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; margin: 0; font-size: .92rem; cursor: pointer; }
.wd-prices__motion-option input { width: 1.12rem; height: 1.12rem; margin: 0; flex-shrink: 0; appearance: auto; accent-color: #39533c; }
.wd-prices__motion-option a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: #324b37; text-decoration: underline; text-underline-offset: .18em; font-size: .9rem; }
#wd-price-morph, #wd-price-payment { scroll-margin-top: 8rem; }
.wd-morph {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.3rem, 3.5vw, 3rem);
  align-items: center;
  margin-top: clamp(2.75rem, 5vw, 4.75rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--quote-rule);
  scroll-margin-top: 6rem;
}
.wd-morph__screen { min-width: 0; overflow: hidden; border-radius: 1.2rem; background: #252c21; }
.wd-morph__screen video { width: 100%; height: auto; display: block; aspect-ratio: 16/9; }
.wd-morph video:focus-visible, .wd-prices__motion-option input:focus-visible { outline: 3px solid #6889cf; outline-offset: -3px; }
.wd-morph__copy { min-width: 0; }
.wd-morph__eyebrow { color: #566246; }
.wd-morph__copy h3 { max-width: 18ch; }
.wd-morph__copy > p:not(.wd-morph__eyebrow) { margin: .75rem 0 0; color: var(--quote-muted); line-height: 1.55; }
.wd-morph__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .65rem; }
.wd-morph__price strong { color: var(--quote-ink); font: 600 1.52rem/1.2 var(--font-display); letter-spacing: -.03em; }
.wd-morph__price span, .wd-morph__scope { font-size: .9rem; }
@media (max-width: 760px) {
  .wd-instalments, .wd-morph { grid-template-columns: minmax(0,1fr); }
  .wd-instalments__story { min-height: clamp(11.5rem, 44vw, 17rem); }
  .wd-instalments__schedule { padding-block: 1.2rem .95rem; }
  .wd-instalments__story h3 { max-width: 18ch; }
  .wd-morph__copy { max-width: 43rem; }
  .wd-prices__motion-option { gap: 0 .6rem; }
}

/* Hosting follows project pricing, with its own image from the published price list. */
.wd-host {
  --host-ink: #21382b;
  --host-muted: #4a594d;
  --host-line: #ced4ca;
  color: var(--host-ink);
  background: #f7f8f4;
  padding: clamp(2.5rem, 5vw, 5rem) 0;
}
.wd-host, .wd-host [id="hosting-pakete"], .wd-host [id="hosting-umzug"] { scroll-margin-top: 6.5rem; }
.wd-host .wrap { max-width: 78rem; }
.wd-host p, .wd-host li, .wd-host summary, .wd-host table, .wd-host dl { font-family: var(--font-body); line-height: 1.5; }
.wd-host h2, .wd-host h3 { font-family: var(--font-display); letter-spacing: -.045em; line-height: 1.07; text-wrap: balance; }
.wd-host__hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(23rem, 34vw, 29rem);
  border-radius: clamp(1.1rem, 2vw, 1.8rem);
  background: #17231d; color: #fff;
}
.wd-host__art { position: absolute; z-index: -1; inset: 0 0 0 42%; }
.wd-host__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 67%; }
.wd-host__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #17231d 0%, rgba(23,35,29,.78) 8%, rgba(23,35,29,.12) 39%, transparent 67%);
}
.wd-host__intro { width: 59%; padding: clamp(2rem, 4.5vw, 4.3rem); }
.wd-host__kicker { margin: 0 0 1.25rem; color: #e2d7a8; font-weight: 600; font-size: .95rem; }
.wd-host .wd-host__intro h2 { margin: 0; color: #fff; max-width: 14ch; font-size: clamp(2.25rem, 4.1vw, 4rem); }
.wd-host__intro > p:not(.wd-host__kicker) { max-width: 37ch; margin: 1.1rem 0; color: #e2e8df; font-size: clamp(1rem, 1.35vw, 1.15rem); }
.wd-host__hero-links, .wd-host__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.2rem; }
.wd-host a { text-underline-offset: .22em; }
.wd-host__hero-links a, .wd-host__contact, .wd-host__enquire, .wd-host__pdf { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.wd-host__hero-links a { font-size: .95rem; color: #fff; text-decoration: underline; }
.wd-host__hero-links a:first-child, .wd-host__contact { padding: .65rem 1.05rem; border-radius: 2rem; background: #f5f3e7; color: #203328; text-decoration: none; }
.wd-host__choice { margin: clamp(2.2rem, 4vw, 3.6rem) 0 1.2rem; }
.wd-host__choice h3, .wd-host__migration h3 { color: var(--host-ink); margin: 0; font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
.wd-host__tax, .wd-host__other { color: var(--host-muted); font-size: .94rem; }
.wd-host__tax { margin: .6rem 0 0; }
.wd-host__plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.wd-host__card {
  min-width: 0; display: flex; flex-direction: column;
  border-radius: 1.15rem; padding: clamp(1.35rem, 2.5vw, 2rem); background: #fff;
  border: 1px solid #dce0d9;
}
.wd-host__card:nth-child(2) { background: #eaf0e3; border-color: #cfdbc6; }
.wd-host__card h3 { margin: 0; font-size: 1.45rem; color: var(--host-ink); }
.wd-host__fit { margin: .55rem 0 auto; padding-bottom: 1.1rem; color: var(--host-muted); min-height: 4.4em; }
.wd-host__card .wd-host__amount { color: var(--host-ink); margin: .35rem 0 0; font: 600 clamp(1.65rem, 2.25vw, 2.25rem)/1.14 var(--font-display); letter-spacing: -.035em; }
.wd-host__annual { margin: .25rem 0 1rem; font-size: .94rem; color: var(--host-muted); }
.wd-host__card ul { padding: 1rem 0 0; margin: 0; border-top: 1px solid var(--host-line); list-style: none; }
.wd-host__card li { margin-bottom: .3rem; }
.wd-host__enquire, .wd-host__pdf { align-self: flex-start; color: #294936; text-decoration: underline; }
.wd-host__enquire { margin-top: .5rem; }
.wd-host__common { margin-top: 1.4rem; }
.wd-host details { border-top: 1px solid var(--host-line); }
.wd-host__details details:last-child { border-bottom: 1px solid var(--host-line); }
.wd-host details summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px;
  padding: .85rem 0; list-style: none; cursor: pointer; font-weight: 600; color: var(--host-ink);
}
.wd-host details summary::-webkit-details-marker { display: none; }
.wd-host details summary::after {
  content: ""; width: .5rem; height: .5rem; margin-right: .3rem; flex: 0 0 auto;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.wd-host details[open] > summary::after { transform: rotate(225deg); }
.wd-host details p { margin: 0 0 .85rem; max-width: 76ch; color: var(--host-muted); }
.wd-host__scroll { max-width: 100%; overflow-x: auto; margin-bottom: .8rem; scrollbar-color: #87967e #e9eee6; }
.wd-host__scroll table { border-collapse: collapse; width: 100%; min-width: 36rem; color: var(--host-ink); font-size: .94rem; }
.wd-host__scroll caption { text-align: left; padding: .5rem 0; }
.wd-host__scroll th, .wd-host__scroll td { text-align: left; vertical-align: top; padding: .65rem .7rem; border-bottom: 1px solid var(--host-line); }
.wd-host__scroll thead th { background: #e9eee6; }
.wd-host__scroll tbody th { font-weight: 500; }
.wd-host__details dl { margin: 0 0 1rem; }
.wd-host__details dl div { display: grid; grid-template-columns: minmax(0,1fr) minmax(6rem,auto); gap: 1rem; align-items: start; padding: .65rem 0; border-top: 1px solid var(--host-line); }
.wd-host__details dd { text-align: right; margin: 0; font-weight: 600; }
.wd-host__other { margin: .9rem 0 0; }
.wd-host__migration {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  margin-top: clamp(1.75rem,3vw,3rem); padding: clamp(1.4rem,3vw,2.5rem);
  color: var(--host-ink); background: #e8ede4; border-radius: 1.15rem;
}
.wd-host__migration p { max-width: 58ch; color: var(--host-muted); margin: .75rem 0 0; }
.wd-host__contact { flex: 0 0 auto; color: #fff; background: #263f30; }
.wd-host__actions { margin-top: .6rem; }
.wd-host :focus-visible { outline: 3px solid #4c7548; outline-offset: 3px; }
.wd-host__hero :focus-visible { outline-color: #eadc99; }
.wd-prices__estimate .wd-host-link a { color: #fff4bb; font-weight: 600; text-underline-offset: .2em; }
@media (max-width: 700px) {
  .wd-host__hero { min-height: 0; }
  .wd-host__intro { width: 100%; padding: 1.5rem 1.45rem clamp(8rem,28vw,12rem); }
  .wd-host__art { inset: 20% 0 0; }
  .wd-host__art img { object-position: 50% 72%; }
  .wd-host__art::after { background: linear-gradient(180deg, #17231d 0%, rgba(23,35,29,.92) 27%, rgba(23,35,29,.77) 55%, transparent 87%); }
  .wd-host__hero-links { gap: .2rem .85rem; }
  .wd-host__plans { grid-template-columns: 1fr; gap: .75rem; }
  .wd-host__card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .25rem .8rem; padding: 1.25rem; }
  .wd-host__card header { grid-area: 1 / 1; }
  .wd-host__card .wd-host__amount { grid-area: 1 / 2; margin: 0; text-align: right; font-size: 1.3rem; }
  .wd-host__card .wd-host__annual { grid-area: 2 / 2; text-align: right; margin: .15rem 0 0; }
  .wd-host__fit { grid-area: 2 / 1; min-height: 0; padding-bottom: 0; margin: 0; }
  .wd-host__card ul { grid-column: 1 / -1; margin-top: .65rem; padding-top: .65rem; }
  .wd-host__enquire { grid-column: 1 / -1; margin-top: 0; justify-self: start; }
  .wd-host__migration { display: grid; gap: 1rem; }
  .wd-host__contact { justify-self: start; }
  .wd-host__details dl div { grid-template-columns: minmax(0,1fr) minmax(5.3rem,30%); font-size: .92rem; }
}