/* =====================================================================
   Valorafy — valuation wizard
   Uses the landing page tokens from styles.css; everything here is
   wizard-only. Same palette, same type scale, same glass treatment.
   ===================================================================== */

.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* display rules below set flex/grid, so [hidden] needs to win outright */
[hidden]{display:none !important}

.wizard-body{
  min-height:100vh;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(0,153,51,.10), transparent 62%),
    radial-gradient(900px 520px at 6% 4%, rgba(10,10,61,.85), transparent 60%),
    var(--color-navy-base);
  background-attachment:fixed;
}

/* ------------------------------ Header ------------------------------ */
.wizard-header{position:sticky;top:0;z-index:40;background:rgba(0,0,51,.94);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);border-bottom:1px solid var(--color-divider)}
.wizard-header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.wizard-header .brand-logo{height:32px;width:auto}
.icon-btn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  color:var(--color-text-secondary);font-size:20px;
  border:1px solid var(--color-divider);background:rgba(255,255,255,.03);
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.icon-btn:hover{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}

/* ------------------------------ Shell ------------------------------ */
.wizard-main{padding:clamp(1.75rem,5vh,3rem) 0 clamp(3rem,8vh,5rem)}
.wizard-container{max-width:720px}

/* ----------------------------- Progress ----------------------------- */
.progress{margin-bottom:1.25rem}
.progress-meta{display:flex;align-items:baseline;gap:.65rem;margin-bottom:.6rem}
.progress-step{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-green-primary)}
.progress-name{font-size:.875rem;font-weight:500;color:var(--color-text-secondary)}
.progress-track{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.progress-seg{height:4px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;position:relative}
.progress-seg::after{
  content:"";position:absolute;inset:0;border-radius:99px;background:var(--color-green-primary);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.progress-seg.is-done::after{transform:scaleX(1)}

/* ------------------------------- Card ------------------------------- */
.wizard-card{
  border:1px solid var(--color-divider);border-radius:var(--radius-card);
  background:var(--color-navy-glass);
  backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.7);
  padding:clamp(1.5rem,4vw,2.25rem);
  transition:height .34s cubic-bezier(.2,.7,.3,1);
  overflow:hidden;
}
.wizard-card.is-measuring,
.wizard-card.is-measuring *{transition:none !important;animation:none !important}
.wizard-viewport{position:relative}

.step-panel[hidden]{display:none}
.step-panel{display:block}
@media (prefers-reduced-motion:no-preference){
  @keyframes step-in-fwd{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
  @keyframes step-in-back{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
  .step-panel.is-active{animation:step-in-fwd .34s cubic-bezier(.2,.7,.3,1) both}
  .step-panel.is-active.from-back{animation-name:step-in-back}
}

.step-h{font-size:clamp(1.5rem,3.2vw,1.875rem);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.step-sub{margin-top:.65rem;font-weight:400;font-size:1rem;line-height:1.6;color:var(--color-text-secondary)}

/* --------------------------- Address chip --------------------------- */
.address-chip{
  display:flex;align-items:center;gap:.6rem;margin-top:1.5rem;
  padding:.7rem .85rem;border-radius:12px;
  border:1px solid var(--color-divider);background:rgba(255,255,255,.03);
  font-size:.9375rem;
}
.address-chip > .ico{width:18px;height:18px;color:var(--color-green-primary);flex:none}
.address-chip-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.address-chip-text.is-empty{color:var(--color-text-secondary);font-weight:400}
/* Raised only after a failed attempt to continue with an address that was
   typed but never chosen from the suggestions — reuses the same tone as
   .field-error so the chip reads as "this field", not as a new colour. */
.address-chip-text.is-unconfirmed{color:#FF8B84}
.address-chip-edit{
  display:inline-flex;align-items:center;gap:.35rem;flex:none;
  font-size:.8125rem;font-weight:600;color:var(--color-green-primary);
  padding:.25rem .35rem;border-radius:8px;transition:background-color .18s ease;
}
.address-chip-edit:hover{background:rgba(0,153,51,.12)}
.address-chip-edit .ico{width:14px;height:14px}

/* --------------------------- Expanding block --------------------------- */
.expand{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .32s cubic-bezier(.2,.7,.3,1),opacity .26s ease;
}
.expand > *{overflow:hidden;min-height:0}
.expand.is-open{grid-template-rows:1fr;opacity:1}
/* 1.75rem matches the standard "new group" gap used everywhere else
   (tile-grid, field-stack, badge-grid, consent-stack) — 1.25rem read as
   too close to the tile grid above, like part of the same row. */
.sub-block{padding-top:1.75rem}

/* ------------------------------ Fields ------------------------------ */
.field-label{display:block;font-size:.875rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.field-label em{font-style:normal;font-weight:400;color:var(--color-text-secondary)}
.field-wrap{position:relative;display:flex;align-items:center}
.field-ico{position:absolute;left:.95rem;width:19px;height:19px;color:var(--color-text-secondary);pointer-events:none}
.field{
  width:100%;height:56px;padding:0 1rem;
  font-family:var(--font);font-size:1rem;font-weight:500;color:#fff;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-field);
  outline:0;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.field-has-ico{padding-left:2.85rem}
.field::placeholder{color:var(--color-text-muted);font-weight:400}
.field:hover{border-color:rgba(255,255,255,.24)}
.field:focus{border-color:var(--color-green-primary);background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(0,153,51,.16)}
.field.is-invalid{border-color:#E2564D;box-shadow:0 0 0 4px rgba(226,86,77,.14)}
.field-narrow{max-width:140px}
.field-mono{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.field-help{margin-top:.5rem;font-size:.8125rem;font-weight:400;color:var(--color-text-secondary)}
.field-error{margin-top:.5rem;font-size:.8125rem;font-weight:500;color:#FF8B84}
.field-row-between{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.field-stack{display:flex;flex-direction:column;gap:1.15rem;margin-top:1.75rem}

.link-btn{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;
  font-size:.8125rem;font-weight:600;color:var(--color-green-primary);
}
.link-btn .ico{width:15px;height:15px}
.link-btn:hover{color:#22b34c}

/* ------------------------------- Tiles ------------------------------- */
.tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1.75rem}
.tile{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  padding:1.15rem 1rem 1.25rem;text-align:left;
  border:1px solid var(--color-divider);border-radius:16px;background:rgba(255,255,255,.028);
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.tile:hover{border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.tile-ico{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;margin-bottom:.75rem;
  background:rgba(255,255,255,.06);color:var(--color-text-secondary);font-size:22px;
  transition:background-color .2s ease,color .2s ease;
}
.tile-title{font-size:1rem;font-weight:600;color:#fff}
.tile-sub{font-size:.8125rem;font-weight:400;color:var(--color-text-secondary)}
.tile[aria-checked="true"]{
  border-color:var(--color-green-primary);background:rgba(0,153,51,.10);
  box-shadow:0 0 0 1px var(--color-green-primary),0 0 28px rgba(0,153,51,.16);
}
.tile[aria-checked="true"] .tile-ico{background:rgba(0,153,51,.20);color:var(--color-green-primary)}

/* ------------------------------- Pills ------------------------------- */
.pill-row{display:flex;flex-wrap:wrap;gap:.6rem}
.pill-row-wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.pill{
  min-height:56px;padding:.85rem 1.35rem;border-radius:14px;
  font-size:1rem;font-weight:600;color:var(--color-text-secondary);
  border:1px solid var(--color-divider);background:rgba(255,255,255,.028);
  transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease;
}
.pill:hover{border-color:rgba(255,255,255,.22);color:#fff}
.pill:active{transform:translateY(1px)}
.pill[aria-checked="true"]{
  border-color:var(--color-green-primary);background:rgba(0,153,51,.12);color:#fff;
  box-shadow:0 0 0 1px var(--color-green-primary);
}

.count-group{border:0;padding:0;margin:1.75rem 0 0}
.count-legend{
  display:flex;align-items:center;gap:.55rem;padding:0;margin-bottom:.85rem;
  font-size:.9375rem;font-weight:600;color:#fff;
}
.count-legend .ico{width:18px;height:18px;color:var(--color-green-primary)}

/* ----------------------------- Checkboxes ----------------------------- */
.check-tile,.consent{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer}
.check-tile{
  flex:1;min-width:200px;align-items:center;
  padding:.9rem 1rem;border-radius:14px;
  border:1px solid var(--color-divider);background:rgba(255,255,255,.028);
  transition:border-color .18s ease,background-color .18s ease;
}
.check-tile:hover{border-color:rgba(255,255,255,.22)}
.check-tile input,.consent input{position:absolute;opacity:0;width:1px;height:1px}
.check-box{
  flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;
  border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);
  color:transparent;font-size:15px;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.check-box .ico{stroke-width:3}
input:checked + .check-box{background:var(--color-green-primary);border-color:var(--color-green-primary);color:#fff}
input:focus-visible + .check-box{outline:2px solid var(--color-green-primary);outline-offset:3px}
.check-tile:has(input:checked){border-color:var(--color-green-primary);background:rgba(0,153,51,.10)}
.check-text{display:flex;flex-direction:column}
.check-title{font-size:.9375rem;font-weight:600;color:#fff}
.check-sub{font-size:.8125rem;font-weight:400;color:var(--color-text-secondary)}

/* "Es un bajo" / "Es un ático" / "Es un dúplex" on one line, with Planta
   underneath. .75rem throughout matches the gap used everywhere else buttons
   sit side by side (tile-grid, badge-grid), so the row reads as consistent
   rather than squeezed in.

   `align-items:stretch` (not the .check-tile default of center) is what keeps
   the three the same height when one sub-line wraps and the others do not —
   without it the row reads as three different components. The two-column
   step at 860px is there because three tiles + their sub-lines stop being
   legible before the single-column breakpoint arrives. */
.check-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:.75rem}
.check-row .check-tile{flex:1 1 calc((100% - 1.5rem)/3);min-width:0;width:auto}
.floor-input{margin-top:.85rem;max-width:140px}
/* Between the wizard card's own narrowing and the 640px single-column step,
   three tiles get too tight for their sub-lines — two per row, and the odd
   one out spans the full width rather than sitting half-empty. */
@media (max-width:860px){
  .check-row .check-tile{flex-basis:calc((100% - .75rem)/2)}
  .check-row .check-tile:last-child:nth-child(odd){flex-basis:100%}
}

/* ---------------------------- Optional block ---------------------------- */
.optional-block{margin-top:1.75rem;border-top:1px solid var(--color-divider);padding-top:1.25rem}
.optional-toggle{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  font-size:.9375rem;font-weight:600;color:var(--color-text-secondary);
  transition:color .18s ease;
}
.optional-toggle > span:not(.optional-chevron){flex:1;min-width:0;line-height:1.4}
.optional-toggle:hover{color:#fff}
.optional-toggle > .ico{width:18px;height:18px;color:var(--color-green-primary);flex:none}
.optional-toggle em{font-style:normal;font-weight:400}
.optional-chevron{
  margin-left:auto;flex:none;width:10px;height:10px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease;
}
.optional-toggle[aria-expanded="true"] .optional-chevron{transform:rotate(-135deg) translate(-3px,-3px)}

.help-box{
  margin-top:.85rem;padding:1rem 1.15rem;border-radius:14px;
  border:1px solid var(--color-divider);background:rgba(255,255,255,.03);
  font-size:.875rem;font-weight:400;line-height:1.6;color:var(--color-text-secondary);
}
.help-box ul{margin:.6rem 0;padding-left:1.1rem;list-style:disc}
.help-box li{margin:.25rem 0}
.help-box strong{color:#fff;font-weight:600}
.help-note{margin-top:.6rem;color:var(--color-text-muted)}

/* ---------------------------- Measure input ---------------------------- */
.measure-field{
  display:flex;align-items:baseline;justify-content:center;gap:.5rem;
  margin-top:2rem;padding:1.5rem 1rem;
  border:1px solid var(--color-divider);border-radius:18px;background:rgba(255,255,255,.03);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.measure-field:focus-within{border-color:var(--color-green-primary);background:rgba(255,255,255,.055);box-shadow:0 0 0 4px rgba(0,153,51,.16)}
.measure-field.is-invalid{border-color:#E2564D;box-shadow:0 0 0 4px rgba(226,86,77,.14)}
.measure-input{
  width:min(6ch,58vw);border:0;outline:0;background:transparent;text-align:right;
  font-family:var(--font);font-size:clamp(2.5rem,9vw,3.25rem);font-weight:800;
  letter-spacing:-.03em;color:#fff;
}
.measure-input::placeholder{color:rgba(255,255,255,.18)}
.measure-input::-webkit-outer-spin-button,.measure-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.measure-unit{font-size:1.5rem;font-weight:700;color:var(--color-green-primary)}
.measure-sm{margin-top:.35rem;padding:.85rem 1rem}
.measure-sm .measure-input{font-size:1.75rem}
.measure-sm .measure-unit{font-size:1.0625rem}

.hint-line{
  display:flex;align-items:flex-start;gap:.6rem;margin-top:1.75rem;
  font-size:.875rem;font-weight:400;line-height:1.55;color:var(--color-text-secondary);
}
.hint-line .ico{width:17px;height:17px;margin-top:.12rem;color:var(--color-green-primary);flex:none}

/* ---------------------------- Feature badges ----------------------------
   Flex-wrap + justify-content:center (rather than a fixed grid) so a row
   left with a remainder — 5 items in a 3-up layout, say — centers instead
   of leaving a visibly empty cell. */
.badge-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.75rem}
.badge{
  display:flex;flex-direction:column;align-items:center;gap:.65rem;
  flex:0 1 calc((100% - 1.5rem)/3);box-sizing:border-box;
  padding:1.25rem .75rem;border-radius:16px;
  border:1px solid var(--color-divider);background:rgba(255,255,255,.028);
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.badge:hover{border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.badge-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(255,255,255,.06);color:var(--color-text-secondary);font-size:22px;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.badge-label{font-size:.875rem;font-weight:600;color:var(--color-text-secondary);transition:color .2s ease}
.badge[aria-pressed="true"]{
  border-color:var(--color-green-primary);background:rgba(0,153,51,.10);
  box-shadow:0 0 0 1px var(--color-green-primary),0 0 26px rgba(0,153,51,.14);
}
.badge[aria-pressed="true"] .badge-ico{background:rgba(0,153,51,.22);color:var(--color-green-primary);transform:scale(1.04)}
.badge[aria-pressed="true"] .badge-label{color:#fff}
.badge[hidden]{display:none}

/* ----------------------------- Photo upload ----------------------------- */
.dropzone{
  margin-top:1.75rem;padding:2.25rem 1.5rem;text-align:center;cursor:pointer;
  border:1.5px dashed rgba(255,255,255,.22);border-radius:18px;background:rgba(255,255,255,.02);
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.dropzone:hover{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.035)}
.dropzone:focus-visible{outline:2px solid var(--color-green-primary);outline-offset:3px}
.dropzone.is-dragover{
  border-color:var(--color-green-primary);background:rgba(0,153,51,.08);
  box-shadow:0 0 0 4px rgba(0,153,51,.12);
}
.dropzone-ico{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 1rem;border-radius:16px;
  background:rgba(255,255,255,.06);color:var(--color-green-primary);font-size:26px;
  transition:background-color .18s ease,color .18s ease;
}
.dropzone.is-dragover .dropzone-ico{background:rgba(0,153,51,.2)}
.dropzone-title{font-size:1rem;font-weight:600;color:#fff}
.dropzone-sub{margin-top:.35rem;font-size:.8125rem;font-weight:400;color:var(--color-text-secondary)}

.photo-grid{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.photo-thumb{
  position:relative;flex:0 0 88px;width:88px;height:88px;border-radius:12px;overflow:hidden;
  border:1px solid var(--color-divider);background:rgba(255,255,255,.03);
}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* HEIC and friends: no browser decoder, so the file is named instead of
   showing a broken-image icon. It still uploads and scores normally. */
.photo-thumb-name{
  display:flex;align-items:center;justify-content:center;height:100%;padding:.4rem;
  font-size:.625rem;font-weight:600;line-height:1.25;text-align:center;
  color:var(--color-text-secondary);word-break:break-all;overflow:hidden;
}
.photo-remove{
  position:absolute;top:.3rem;right:.3rem;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,51,.78);color:#fff;
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background-color .15s ease,border-color .15s ease;
}
.photo-remove:hover{background:rgba(226,86,77,.85);border-color:rgba(226,86,77,.85)}
.photo-remove .ico{width:12px;height:12px;stroke-width:2.8}

/* ------------------------------ Consents ------------------------------ */
.consent-stack{display:flex;flex-direction:column;gap:1rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--color-divider)}
.consent-text{font-size:.9375rem;font-weight:400;line-height:1.55;color:var(--color-text-secondary)}
.consent-link{color:#fff;text-decoration:underline;text-underline-offset:2px}
.consent-link:hover{color:var(--color-green-primary)}
.consent-note{display:block;margin-top:.2rem;font-size:.8125rem;color:var(--color-text-muted)}

/* ------------------------------- Actions ------------------------------- */
.wizard-actions{display:flex;align-items:center;gap:.85rem;margin-top:1.5rem}
.btn-ghost{
  border:1px solid var(--color-divider);color:var(--color-text-secondary);background:rgba(255,255,255,.02);
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.05)}
#nextBtn{flex:1;justify-content:center;min-height:56px}
#backBtn{min-height:56px;padding-inline:1.35rem}
/* The primary action is never hard-disabled: it dims, but still answers a
   click by saying what is missing. A dead button explains nothing. */
.btn.is-inactive{opacity:.45}
.btn.is-inactive:hover{background:var(--color-green-primary)}

.wizard-error{
  display:flex;align-items:center;gap:.5rem;
  margin-top:1rem;padding:.75rem 1rem;border-radius:12px;
  border:1px solid rgba(226,86,77,.35);background:rgba(226,86,77,.10);
  font-size:.875rem;font-weight:500;color:#FF8B84;
}
.wizard-error[hidden]{display:none}

/* Inline, non-blocking problem note (e.g. a photo in an unsupported format).
   Quieter than .wizard-error: nothing is broken, something was skipped. */
.field-problem{
  margin-top:.5rem;font-size:.8125rem;font-weight:500;line-height:1.45;
  color:#FFB4A8;
}

.wizard-foot{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  margin-top:1.5rem;font-size:.8125rem;font-weight:400;color:var(--color-text-muted);text-align:center;
}
.wizard-foot .ico{width:15px;height:15px;color:var(--color-green-primary);flex:none}

/* ----------------------------- Done screen ----------------------------- */
.step-done{text-align:center}
.done-mark{
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;margin:0 auto 1.5rem;
  background:rgba(0,153,51,.16);color:var(--color-green-primary);font-size:30px;
  box-shadow:0 0 0 1px var(--color-green-glow),0 0 34px rgba(0,153,51,.22);
}
.step-done .step-sub{max-width:46ch;margin-inline:auto}
.step-done .step-sub strong{color:#fff;font-weight:600}

/* Same label+value pattern as the landing hero's .card-label/.card-value, sized
   up for the wizard's "reveal" moment. renderPrice() in wizard.js fills this
   with a real figure from valuation.js; the dashes in the markup are only the
   pre-JS/failure fallback now, not the normal state — see the comment above
   #step-done in valorar.html. */
.price-teaser{
  margin:1.75rem 0;padding:1.5rem 0;
  border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);
}
.price-teaser-label{
  font-size:.8125rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--color-text-secondary);
}
.price-teaser-value{margin-top:.5rem;font-size:2.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#fff}
.price-teaser-value .euro{font-size:.6em;font-weight:800}
.price-teaser-range{
  margin-top:.5rem;font-size:.9375rem;font-weight:600;
  color:var(--color-green-primary);
}
.price-teaser-note{
  margin:.75rem auto 0;max-width:42ch;
  font-size:.8125rem;font-weight:500;line-height:1.5;
  color:var(--color-text-secondary);
}

.teaser-list{
  list-style:none;margin:1.5rem auto 0;padding:0;max-width:38ch;text-align:left;
  display:flex;flex-direction:column;gap:.75rem;
}
.teaser-list li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.9375rem;font-weight:500;color:var(--color-text-secondary);line-height:1.5;
}
.teaser-list .ico{width:17px;height:17px;margin-top:.15rem;color:var(--color-green-primary);flex:none}

.summary{
  margin-top:2rem;text-align:left;
  border:1px solid var(--color-divider);border-radius:16px;overflow:hidden;
}
.summary-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.85rem 1.15rem}
.summary-row + .summary-row{border-top:1px solid var(--color-divider)}
.summary dt{font-size:.875rem;font-weight:400;color:var(--color-text-secondary)}
.summary dd{margin:0;font-size:.9375rem;font-weight:600;color:#fff;text-align:right}
.done-ref{margin-top:1.5rem;font-size:.8125rem;font-weight:400;color:var(--color-text-secondary)}
.done-ref strong{color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.step-done .btn-block{margin-top:1.75rem}

/* Download the report. Hidden in markup until the backend confirms there is
   one — see showReportButton() in wizard.js. It sits above "Volver al inicio"
   because it is the thing a visitor came back to this screen for. */
.report-download{margin-top:1.75rem}
.report-download .btn-block{margin-top:0}
/* Kept to the button's own width rather than the panel's, so the busy and
   error states never reflow the layout underneath them. */
.report-note{
  margin:.75rem 0 0;font-size:.8125rem;font-weight:400;
  color:var(--color-text-secondary);
}
.report-download .btn[disabled]{opacity:.55;cursor:default}
.report-download .btn[disabled]:hover{background:var(--color-green-primary)}

/* ============================== Mobile ============================== */
@media (max-width:640px){
  .wizard-header-inner{height:64px}

  /* keep "paso 3 de 5" in view while the card scrolls */
  .progress{
    position:sticky;top:64px;z-index:35;
    margin:0 calc(var(--gutter) * -1) 1.25rem;
    padding:.75rem var(--gutter) .8rem;
    background:rgba(0,0,51,.94);
    backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
    border-bottom:1px solid var(--color-divider);
  }
  .progress-meta{margin-bottom:.5rem}
  .wizard-main{padding-top:1.25rem;padding-bottom:7.5rem}
  .wizard-card{padding:1.35rem 1.15rem 1.5rem;border-radius:18px}

  .tile-grid{grid-template-columns:1fr;gap:.6rem}
  .tile{flex-direction:row;align-items:center;gap:.9rem;padding:.9rem 1rem}
  .tile-ico{margin-bottom:0;width:42px;height:42px}
  .tile-title{display:block}
  .tile-sub{display:block}
  .tile > .tile-ico{order:-1}
  .tile-text-wrap{display:flex;flex-direction:column}

  .badge{flex-basis:calc((100% - .75rem)/2)}
  .floor-input{max-width:none}
  .field-narrow{max-width:none}
  .check-row .check-tile{flex-basis:100%}
  .optional-toggle{font-size:.875rem}

  /* actions stay in reach of the thumb */
  .wizard-actions{
    position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;
    padding:.85rem var(--gutter) calc(.85rem + env(safe-area-inset-bottom));
    background:rgba(0,0,51,.94);
    backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
    border-top:1px solid var(--color-divider);
  }
  .wizard-foot{margin-top:1.25rem}
  .wizard-error{margin-top:1rem}
}

/* the tile is a flex row on mobile: keep the label block together */
@media (max-width:640px){
  .tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.9rem;align-items:center}
  .tile-ico{grid-row:1/3}
  .tile-title{grid-column:2;align-self:end}
  .tile-sub{grid-column:2;align-self:start}
}

/* ------------------------- Catastro lookup ------------------------- */
/* Input + button, side by side. The 20-character mono field never fills
   its own row — .field is width:100% only because it usually has one to
   itself — so it gets flex:1 here and the button takes only what its own
   label needs. */
.cat-ref-row{display:flex;align-items:stretch;gap:.6rem}
.cat-ref-row .field{flex:1 1 auto;min-width:0}
.cat-lookup-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  flex:none;height:56px;padding:0 1.25rem;
  font-family:var(--font);font-weight:600;font-size:.875rem;color:#fff;
  background:var(--color-green-primary);border:1px solid transparent;
  border-radius:var(--radius-field);cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.cat-lookup-btn .ico{width:16px;height:16px}
.cat-lookup-btn:hover:not(:disabled){background:var(--color-green-hover)}
.cat-lookup-btn:active:not(:disabled){transform:translateY(1px)}
/* Muted, not dimmed — a greyed-out GREEN button reads as "broken", a
   button that looks like the empty field next to it reads as "not ready
   yet", which is what fewer than 20 characters actually means. */
.cat-lookup-btn:disabled{
  cursor:default;color:var(--color-text-muted);
  background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14);
}
.cat-lookup-btn .cat-spin{
  display:inline-block;width:13px;height:13px;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:cat-spin .7s linear infinite;
}
@media (prefers-reduced-motion:reduce){.cat-lookup-btn .cat-spin{animation:none}}
@media (max-width:400px){
  /* A phone this narrow can't fit "20 caracteres" placeholder text and a
     labelled button on one line without either truncating illegibly. */
  .cat-ref-row{flex-wrap:wrap}
  .cat-ref-row .field{flex-basis:100%}
  .cat-lookup-btn{flex:1 1 auto}
}

/* The one thing this step needs to say about the property TYPE, kept out
   of .cat-status below on purpose (see the HTML comment above #catTypeWarn):
   it is about a decision made higher up this same step (the data-tipo
   pills), not about the property record itself. Same amber as .cat-warn,
   promoted to its own small card rather than a line buried in a longer
   panel, because unlike every other Catastro note this one names a choice
   the visitor can still change with one more click, right above it. */
.cat-type-warn{
  display:flex;align-items:flex-start;gap:.6rem;margin-top:.85rem;
  padding:.75rem .95rem;border-radius:12px;
  border:1px solid rgba(255,196,107,.38);background:rgba(255,196,107,.08);
  font-size:.8125rem;font-weight:500;line-height:1.5;color:#FFC46B;
}
.cat-type-warn .ico{width:17px;height:17px;margin-top:.1rem;flex:none;color:#FFC46B}

/* The panel under the referencia catastral field: what the Catastro has
   under that reference, or why it has nothing. Three states, one box —
   `is-loading`, `is-ok`, `is-error` — because they replace each other in
   place and a layout that reflows between them is distracting while the
   visitor is watching it. */
.cat-status{
  margin-top:.85rem;padding:.9rem 1.05rem;border-radius:14px;
  border:1px solid var(--color-divider);background:rgba(255,255,255,.03);
  font-size:.8125rem;font-weight:400;line-height:1.55;color:var(--color-text-secondary);
}
.cat-status.is-ok{border-color:rgba(0,153,51,.42);background:rgba(0,153,51,.08)}
.cat-status.is-error{border-color:rgba(226,86,77,.42);background:rgba(226,86,77,.07)}
.cat-status b{display:block;margin-bottom:.15rem;color:#fff;font-weight:600}
/* Block, not inline: these are separate sentences and ran together into
   one paragraph as spans. */
.cat-status .cat-line{display:block;margin-top:.45rem}
.cat-status .cat-filled{color:var(--color-green-primary);font-weight:500}
.cat-status .cat-missing{color:var(--color-text-muted)}
.cat-status .cat-warn{margin-top:.5rem;color:#FFC46B}
/* The dot spins only while a lookup is in flight; prefers-reduced-motion
   gets a static dot rather than nothing, so the loading state is still
   visibly different from the resolved one. */
.cat-status .cat-spin{
  display:inline-block;width:11px;height:11px;margin-right:.5rem;
  border:2px solid rgba(255,255,255,.25);border-top-color:var(--color-green-primary);
  border-radius:50%;vertical-align:-1px;animation:cat-spin .7s linear infinite;
}
@keyframes cat-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cat-status .cat-spin{animation:none}}