/* =========================================================
   Daniel Insa — Calculadora de gastos de compra y venta (Costa del Sol y Málaga)
   Todo está dentro de .calc y con prefijo "calc-" para no chocar con style.css.
   Usa las variables de la web (--navy-900, --blue, --red, --gold, --font-head...).
   ========================================================= */
.calc-section{scroll-margin-top:90px}
.calc{
  --calc-soft:#EAF1FA;
  --calc-line:#DCE3EC;
  max-width:860px;margin:32px auto 0;text-align:left;color:var(--ink);
  background:var(--white);border:1px solid var(--calc-line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:clamp(18px,4vw,34px);scroll-margin-top:100px;
}
.calc *,.calc *::before,.calc *::after{box-sizing:border-box}
.calc [hidden]{display:none!important}
.calc button{font-family:inherit}
.calc :focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* Pestañas Comprar / Vender */
.calc-tabs{display:flex;gap:8px;margin-bottom:22px;padding:6px;background:var(--surface);border-radius:999px}
.calc-tab{flex:1;border:0;background:transparent;color:var(--navy-900);font-weight:700;font-size:.95rem;
  padding:12px 16px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.calc-tab[aria-selected="true"]{background:var(--navy-900);color:var(--white)}

/* Asistente */
.calc-stepnum{font-size:.78rem;color:var(--slate);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.calc-progress{height:5px;background:var(--calc-line);border-radius:3px;overflow:hidden;margin:8px 0 22px}
.calc-progress i{display:block;height:100%;width:0;background:var(--blue);transition:width .25s}
.calc h3.calc-q{font-family:var(--font-head);font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:800;line-height:1.2;
  margin:0 0 8px;color:var(--navy-900)}
.calc-help{color:var(--slate);font-size:.95rem;margin:0 0 16px;max-width:62ch}
.calc-opts{display:grid;gap:10px}
.calc-opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--calc-line);border-radius:12px;
  padding:14px;cursor:pointer;background:var(--white)}
.calc-opt:has(input:checked){border-color:var(--blue);background:var(--calc-soft)}
.calc-opt:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.calc-opt input{margin-top:4px;accent-color:var(--blue);flex:none}
.calc-opt b{display:block;font-weight:700;color:var(--navy-900)}
.calc-opt span{color:var(--slate);font-size:.9rem}
.calc-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.calc-field>label{font-weight:600;font-size:.92rem;color:var(--ink)}
.calc-field small{color:var(--slate);font-size:.82rem}
.calc-inp{display:flex;align-items:center;border:1.5px solid var(--calc-line);border-radius:10px;background:var(--white);padding-inline:12px}
.calc-inp:focus-within{border-color:var(--blue)}
.calc-inp input{border:0;background:transparent;color:var(--ink);font:inherit;padding:12px 0;width:100%;min-width:0;outline:none;font-variant-numeric:tabular-nums}
.calc-inp em{font-style:normal;color:var(--slate);padding-left:8px;white-space:nowrap}
.calc-field>input[type=text],.calc-field>input[type=email],.calc-field>input[type=tel]{
  border:1.5px solid var(--calc-line);border-radius:10px;padding:12px;background:var(--white);color:var(--ink);
  font:inherit;width:100%;min-width:0;outline:none}
.calc-field>input[type=text]:focus,.calc-field>input[type=email]:focus,.calc-field>input[type=tel]:focus{border-color:var(--blue)}
.calc input[type=range]{width:100%;accent-color:var(--blue)}
.calc-row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px}
.calc-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.calc-err{color:var(--red);font-size:.9rem;margin-top:8px;min-height:1.3em}
.calc-hint{background:var(--calc-soft);border-radius:10px;padding:12px 14px;font-size:.9rem;margin:12px 0 0}
.calc-hint.warn{border-left:4px solid var(--red)}

/* Resultado */
.calc-res h3.calc-rt{font-family:var(--font-body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);font-weight:700;margin:0 0 10px;outline:none}
.calc-big{background:linear-gradient(160deg,var(--navy-900),var(--navy-800));color:var(--white);border-radius:var(--radius);padding:22px}
.calc-big small{letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:var(--gold);font-weight:700}
.calc-big strong{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(2.2rem,9vw,3.3rem);
  line-height:1.05;margin-block:6px;font-variant-numeric:tabular-nums}
.calc-big p{color:#dbe4f0;font-size:.93rem;margin:0}
.calc-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;margin-block:16px 8px;background:var(--calc-line)}
.calc-bar i{display:block;height:100%}
.calc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;color:var(--slate)}
.calc-legend span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;background:var(--c)}
.calc-res h4{font-family:var(--font-head);font-size:1.1rem;font-weight:800;margin:26px 0 8px;color:var(--navy-900)}
.calc table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.calc td,.calc th{padding:9px 0;border-bottom:1px solid var(--calc-line);text-align:left;vertical-align:top;font-size:.95rem;background:none;color:var(--ink)}
.calc td:last-child,.calc th:last-child{text-align:right;white-space:nowrap;padding-left:12px}
.calc td small{display:block;color:var(--slate);font-size:.8rem;white-space:normal}
.calc tr.calc-tot td{font-weight:800;border-bottom:2px solid var(--navy-900)}
.calc tr.calc-neg td:last-child{color:var(--red)}
.calc-scroll{overflow-x:auto}
.calc-disc{margin-top:22px;font-size:.8rem;color:var(--slate);max-width:72ch}
.calc-short{margin-top:12px;font-size:.82rem;color:var(--slate)}

/* Bloque de contacto (desbloquear desglose) */
.calc-lock{margin-top:22px;border:2px solid var(--blue);border-radius:var(--radius);padding:clamp(16px,3vw,24px);display:grid;gap:12px}
.calc-lock h4{margin:0}
.calc-lock p{margin:0;color:var(--slate);font-size:.93rem}
.calc-lock ul{margin:0;padding-left:1.2em;list-style:disc;color:var(--slate);font-size:.93rem}
.calc-lock li{margin-block:2px}
.calc-ck{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--slate)}
.calc-ck input{margin-top:3px;accent-color:var(--blue);flex:none}
.calc-ck a{color:var(--blue);text-decoration:underline}
.calc-form{display:grid;gap:12px}
.calc-form .calc-field{margin:0}
.calc-hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}
.calc-cta{margin-top:26px;border:1.5px solid var(--gold);border-radius:var(--radius);padding:18px;display:grid;gap:12px;background:#FFFAF4}
.calc-cta h4{margin:0}
.calc-cta p{margin:0;color:var(--slate);font-size:.93rem}
.calc-acts{display:flex;flex-wrap:wrap;gap:10px}
.calc-acts .btn,.calc-nav .btn,.calc-form .btn{padding:12px 22px}
.calc-priv{font-size:.8rem;color:var(--slate);margin:0}
.calc-ok{color:var(--blue);font-weight:600;min-height:1.2em;font-size:.9rem}

@media (max-width:520px){
  .calc-nav .btn{flex:1}
  .calc-acts .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.calc-progress i{transition:none}}
