/* ============================================================
   Formulario de tasación por pasos — estilos compartidos
   Lo usan la home (index.html) y la página de anuncios (tasacion.html).
   Si cambias algo aquí, cambia en las dos a la vez.
   ============================================================ */
/* z-index: la sección del formulario tiene que pintarse por encima de las
   secciones siguientes, o los desplegables abiertos quedan por debajo. */
.tasa{padding:0;position:relative;z-index:30}
.tasa .wrap{max-width:100%;padding:0}
#tasacion{scroll-margin-top:72px}
.tasa-card{max-width:100%;margin:0;border-radius:0;border:0;border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--bg2));box-shadow:var(--sh-2);
  padding:32px clamp(16px,5vw,72px) 36px;
  /* sin recorte: los desplegables tienen que poder salir de la tarjeta.
     De que nada se escape por los lados se encargan los min-width:0 de dentro
     y el overflow-x del body. */
  overflow:visible}
.tasa-grid{display:grid;gap:22px 44px;grid-template-columns:minmax(0,1fr);align-items:center}
.tasa-intro,.tasa-formwrap{min-width:0}
.tasa-card .eyebrow{margin-bottom:8px}
.tasa-card h2{font-size:clamp(1.32rem,5.2vw,1.85rem);margin-bottom:8px}
.tasa-card .sub{color:var(--muted);font-size:.94rem;margin-bottom:0}
.tasa-ticks{list-style:none;display:grid;gap:7px;margin-top:16px}
.tasa-ticks li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:var(--muted);min-width:0}
.tasa-ticks li b{color:var(--ink);font-weight:700}
.tasa-ticks svg{flex:0 0 auto;width:17px;height:17px;margin-top:3px;stroke:var(--green)}

/* progreso */
.wz{min-width:0}
.wz .hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
.wz-bar{display:flex;gap:6px;margin-bottom:12px}
.wz-bar span{flex:1 1 0;min-width:0;height:5px;border-radius:999px;background:rgba(255,255,255,.1);transition:background .35s}
.wz-bar span.on{background:linear-gradient(90deg,var(--green),var(--green-d))}
.wz-count{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}

/* pasos: solo uno visible, así es imposible que se pisen entre ellos */
.wz-step{display:none}
.wz-step.on{display:block;animation:wzIn .26s ease both}
@keyframes wzIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wz-step.on{animation:none}}
.wz-q{font-size:1.1rem;font-weight:800;line-height:1.25;margin-bottom:5px}
.wz-hint{color:var(--muted);font-size:.85rem;margin-bottom:14px}

/* opciones tipo botón */
.wz-opts{display:grid;gap:9px;grid-template-columns:minmax(0,1fr)}
@media(min-width:375px){.wz-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wz-chip{width:100%;min-width:0;display:flex;align-items:center;gap:11px;text-align:left;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;color:var(--ink);
  font-family:inherit;font-size:.96rem;font-weight:600;line-height:1.25;padding:15px 14px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color .18s,background .18s,transform .12s}
.wz-chip:hover{border-color:rgba(22,196,127,.5)}
.wz-chip:active{transform:scale(.985)}
.wz-chip.sel{border-color:var(--green);background:rgba(22,196,127,.12)}
.wz-chip i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.22)}
.wz-chip.sel i{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px var(--surface)}

/* campos y desplegables */
.wz-fields{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:520px){.wz-fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wz-f{min-width:0}
.wz-f label{display:block;font-size:.71rem;font-weight:700;color:var(--muted);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.08em}
.wz-f input{width:100%;max-width:100%;min-width:0;background:var(--bg2);border:1px solid var(--line);
  border-radius:14px;color:var(--ink);font-family:inherit;font-size:16px;padding:14px;
  -webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.wz-f input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,196,127,.18)}

/* ---- desplegable propio (no el del móvil, que ocupa media pantalla) ---- */
.wz-sel{position:relative}
.wz-sel-btn{width:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-align:left;
  font-family:inherit;font-size:16px;font-weight:600;padding:14px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color .2s,box-shadow .2s}
.wz-sel-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-sel-val.ph{color:var(--muted);font-weight:500}
.wz-sel-chev{width:13px;height:13px;flex:0 0 auto;color:var(--muted);transition:transform .2s}
.wz-sel.abierto .wz-sel-btn{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,196,127,.18)}
.wz-sel.abierto .wz-sel-chev{transform:rotate(180deg)}
.wz-sel-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  background:var(--surface);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);overflow:hidden;animation:wzPop .16s ease both}
.wz-sel.arriba .wz-sel-pop{top:auto;bottom:calc(100% + 6px)}
@keyframes wzPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wz-sel-pop{animation:none}}
/* cabecera: solo se ve cuando el desplegable es una tarjeta centrada */
.wz-sel-cab{display:none}
.wz-sel-buscar{padding:8px 8px 0}
.wz-sel-buscar input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-family:inherit;font-size:15px;padding:9px 11px;-webkit-appearance:none}
.wz-sel-buscar input:focus{outline:none;border-color:rgba(22,196,127,.5)}
.wz-sel-list{list-style:none;margin:0;padding:6px;max-height:min(42vh,240px);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.wz-sel-op{padding:11px 12px;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;
  min-width:0;overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent}
.wz-sel-op:hover,.wz-sel-op.foco{background:var(--surface2)}
.wz-sel-op.sel{color:var(--green)}
.wz-sel-vacio{padding:12px;color:var(--muted);font-size:.88rem;text-align:center}

/* ---- en móvil el desplegable es una TARJETA CENTRADA con fondo oscuro ----
   Así no se cuelga del campo (que quedaba flotando arriba) ni la tapa el
   teclado del móvil. El buscador no se enfoca solo: solo si lo tocas. */
.wz-fondo{position:fixed;inset:0;z-index:95;background:rgba(4,7,12,.72);
  opacity:0;pointer-events:none;transition:opacity .18s;backdrop-filter:blur(2px)}
.wz-fondo.ver{opacity:1;pointer-events:auto}
body.wz-quieto{overflow:hidden}
.wz-sel-pop.wz-sel-tarjeta{
  position:fixed;z-index:100;left:50%;top:50%;transform:translate(-50%,-50%);
  right:auto;bottom:auto;width:min(360px,calc(100vw - 36px));
  border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.65);
  animation:wzTarjeta .2s ease both}
@keyframes wzTarjeta{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* con el teclado abierto la tarjeta se va arriba, que es lo que queda libre */
.wz-sel-pop.wz-sel-tarjeta.wz-sel-alto{top:14px;transform:translate(-50%,0);animation:none}
.wz-sel-tarjeta .wz-sel-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 10px 12px 16px;border-bottom:1px solid var(--line)}
.wz-sel-tarjeta .wz-sel-cab span{font-size:.98rem;font-weight:800}
.wz-sel-x{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--bg2);color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.wz-sel-x svg{width:16px;height:16px}
.wz-sel-tarjeta .wz-sel-buscar{padding:12px 14px 4px}
.wz-sel-tarjeta .wz-sel-buscar input{padding:12px 13px;border-radius:12px}
.wz-sel-tarjeta .wz-sel-list{padding:8px;max-height:min(52svh,340px)}
.wz-sel-tarjeta .wz-sel-op{padding:14px 13px;font-size:1rem;border-radius:12px}
@media(prefers-reduced-motion:reduce){.wz-sel-pop.wz-sel-tarjeta{animation:none}}
.wz-tel{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wz-tel:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,196,127,.18)}
.wz-tel b{flex:0 0 auto;padding:14px 2px 14px 14px;color:var(--muted);font-size:16px;font-weight:700}
.wz-tel input{border:0;background:transparent;border-radius:0;padding-left:7px;letter-spacing:.04em}
.wz-tel input:focus{box-shadow:none}

/* navegación */
.wz-nav{display:grid;gap:8px;margin-top:16px;justify-items:stretch}
.wz-next{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg,var(--green),var(--green-d));color:#053015;font-family:inherit;
  font-weight:800;font-size:1.02rem;border:none;border-radius:999px;padding:16px 22px;cursor:pointer;
  box-shadow:0 10px 28px var(--green-glow);-webkit-tap-highlight-color:transparent;transition:transform .16s}
.wz-next:active{transform:scale(.98)}
.wz-next svg{width:18px;height:18px;flex:0 0 auto}
.wz-back{background:none;border:0;color:var(--muted);font-family:inherit;font-size:.85rem;font-weight:600;
  padding:8px;cursor:pointer;justify-self:center;-webkit-tap-highlight-color:transparent}
.wz-back:hover{color:var(--ink)}
.wz-err{display:none;color:#ffb4b4;font-size:.85rem;margin-top:11px}
.wz-err.show{display:block}
.wz-note{color:var(--muted);font-size:.76rem;margin-top:13px;text-align:center;line-height:1.5}
.wz-note a{color:var(--green);font-weight:700;text-decoration:none}
.wz-noscript{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;font-size:.92rem}
.wz-noscript a{color:var(--green);font-weight:700}

/* pantalla final */
.tform-ok{display:none;text-align:center;padding:6px 0}
.tform-ok.show{display:block}
.tform-ok .ico{width:60px;height:60px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green),var(--green-d));box-shadow:0 10px 28px var(--green-glow)}
.tform-ok .ico svg{width:29px;height:29px}
.tform-ok h3{font-size:1.35rem;margin-bottom:7px}
.tform-ok .ok-sub{color:var(--muted);font-size:.93rem;max-width:420px;margin:0 auto}
.ok-resumen{max-width:380px;margin:18px auto 0;display:grid;gap:7px;text-align:left;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 15px}
.ok-resumen div{display:flex;justify-content:space-between;gap:14px;font-size:.87rem;min-width:0}
.ok-resumen span:first-child{color:var(--muted);flex:0 0 auto}
.ok-resumen span:last-child{font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere}
.ok-wa{max-width:380px;margin:16px auto 0;width:100%;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;background:linear-gradient(135deg,var(--wa),var(--wa-d));color:#04240f;font-weight:800;font-size:1.02rem;
  border-radius:999px;padding:16px 20px;text-decoration:none;box-shadow:0 10px 28px rgba(37,211,102,.35);
  -webkit-tap-highlight-color:transparent;transition:transform .16s}
.ok-wa:active{transform:scale(.98)}
.ok-wa svg{width:21px;height:21px;flex:0 0 auto;fill:#04240f}

/* Mientras el formulario está en pantalla, los botones flotantes se apartan:
   así no se pisan con el «Continuar» ni compiten con el CTA del paso. */
body.wz-vista .fab,body.wz-vista .fab-call{opacity:0;transform:scale(.8);pointer-events:none;transition:opacity .25s,transform .25s}

/* ===== dos columnas en pantallas grandes ===== */
@media(min-width:900px){
  .tasa-card{padding:44px clamp(24px,5vw,72px)}
  .tasa-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:26px 56px;align-items:center}
  .tasa-intro h2{font-size:clamp(1.5rem,2.4vw,2.05rem)}
  .wz,.tform-ok{max-width:480px}
  .tform-ok{margin:0 auto}
}

/* ===== variante «solo formulario» (página de campaña /tasacion) =====
   Sin tarjeta ni columna de texto: el formulario alineado con el titular,
   y todo apretado para que quepa en una pantalla sin hacer scroll. */
.tasa-grid.solo{grid-template-columns:minmax(0,1fr);gap:0;max-width:100%;margin:0}
.tasa-card.desnuda{background:none;border:0;box-shadow:none;padding:0}
/* El aire se calcula sobre el alto REAL de la pantalla (svh = el más pequeño,
   con la barra del navegador visible). Pantalla alta: respira. Pantalla
   corta: se aprieta solo, sin saltos y sin obligar a hacer scroll. */
.desnuda .wz-bar{margin-bottom:14px;margin-bottom:clamp(9px,1.8svh,15px)}
.desnuda .wz-count{margin-bottom:15px;margin-bottom:clamp(9px,2svh,17px)}
.desnuda .wz-q{font-size:1.12rem;margin-bottom:6px}
.desnuda .wz-hint{margin-bottom:16px;margin-bottom:clamp(9px,2.2svh,19px)}
.desnuda .wz-opts{gap:10px;gap:clamp(7px,1.4svh,12px)}
.desnuda .wz-chip{padding:15px 14px;padding:clamp(11px,2svh,17px) 14px}
.desnuda .wz-fields{gap:13px;gap:clamp(10px,1.8svh,16px)}
.desnuda .wz-nav{margin-top:20px;margin-top:clamp(13px,2.6svh,23px);gap:5px}
.desnuda .wz-note{margin-top:14px;margin-top:clamp(9px,1.9svh,16px)}
.desnuda .ok-resumen,.desnuda .ok-wa{max-width:100%}
@media(min-width:900px){.tasa-grid.solo{grid-template-columns:minmax(0,1fr)}}
/* Pantalla corta de verdad (móvil con la barra del navegador y la de botones
   a la vista): se quita lo accesorio antes que obligar a hacer scroll.
   Los rótulos de los campos sobran porque el propio campo ya dice qué pide. */
@media(max-height:640px){
  .desnuda .wz-count{display:none}
  .desnuda .wz-f label{display:none}
  .desnuda .wz-note{display:none}
  .desnuda .ok-resumen{gap:5px;padding:11px 13px;margin-top:13px}
  .desnuda .ok-resumen div{font-size:.83rem}
  .desnuda .tform-ok h3{font-size:1.2rem}
  .desnuda .tform-ok .ico{width:44px;height:44px;margin-bottom:10px}
  .desnuda .tform-ok .ico svg{width:22px;height:22px}
  .desnuda .ok-wa{margin-top:13px}
}