.calc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;margin-top:2.5rem}
@media(max-width:860px){.calc-grid{grid-template-columns:1fr}}
.calc-inputs label{margin-top:.9rem}
.calc-results{background:rgba(255,255,255,.04);border:1px solid rgba(49,206,125,.3);border-radius:4px;padding:1.8rem}
/* El panel de resultados.
   Esta hoja traia nombres .res-* y .bar-* de una version anterior de la
   plantilla: ninguno coincidia con el HTML que se sirve, que usa .calc-*.
   Cuatro clases se quedaron sin una sola regla, y las barras comparativas
   —que son el argumento visual de toda la calculadora— llevaban invisibles
   desde el principio: el <span> al que el JS le fija el ancho es inline, y
   un elemento inline ignora la altura. */
.calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.1rem}
.calc-row span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#aeb8c0}
.calc-row strong{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums}

.calc-bar{background:rgba(255,255,255,.08);border-radius:2px;height:14px;margin-top:.5rem;overflow:hidden}
.calc-bar span{display:block;height:100%;width:0;border-radius:2px;background:#5d6b78;
  transition:width .5s ease}
#bar-construir{background:var(--sand)}

.calc-detalle{font-size:.78rem;color:#8fa0ad;margin-top:.9rem}
.calc-ahorro{border-top:1px solid rgba(49,206,125,.3);margin-top:1.4rem;padding-top:1.3rem}
.calc-ahorro strong{font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:600;color:var(--sand);
  font-variant-numeric:tabular-nums}
.calc-ahorro span{color:var(--sand-soft);font-size:.95rem;margin-left:.5rem}

@media (prefers-reduced-motion: reduce){.calc-bar span{transition:none}}

/* Nota bajo el selector de destino */
.calc-nota-destino{
  font-size:.78rem;
  color:var(--muted);
  margin:-.4rem 0 1.1rem;
  line-height:1.5;
}
#calc-destinos{display:none}

/* Aviso de referencias bajo la calculadora */
.calc-referencias{
  color:#8fa0ad;
  font-size:.78rem;
  margin-top:1.6rem;
  max-width:760px;
  line-height:1.6;
}

/* ===== TARJETAS DE SELECCION =====
   Sustituyen a los desplegables de destino, tamano y acabado. El radio real
   sigue ahi, solo que tapado por su propia etiqueta: se conserva el teclado,
   el foco y lo que anuncia un lector de pantalla, que es justo lo que se
   pierde cuando esto se monta con <div> y click. */
.calc-grupo{border:0;padding:0;margin:0 0 1.8rem}
.calc-grupo legend{
  padding:0;margin-bottom:.7rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#aeb8c0;
}

.calc-cards{display:grid;gap:.6rem}
.calc-cards-foto{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.calc-cards-simple{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}

/* La tarjeta es un <label>, asi que hereda el uppercase y el espaciado que
   .calc-inputs label aplica a las etiquetas de campo. Ahi no vale: convierte
   «m²» en «M²» y «Cap Cana» en «CAP CANA». La leyenda del grupo si conserva
   ese tratamiento, que es donde corresponde. */
.calc-card{cursor:pointer;margin:0;text-transform:none;letter-spacing:normal}
/* El radio no se oculta con display:none: eso lo saca del orden de foco y
   deja el grupo inservible con teclado. Se tapa manteniendolo enfocable. */
.calc-card input{position:absolute;opacity:0;width:1px;height:1px;margin:0}

.calc-card-cara{
  display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;min-height:48px;
  border:1px solid rgba(255,255,255,.14);border-radius:4px;
  background:rgba(255,255,255,.04);
  padding:.7rem .8rem;
  transition:border-color .18s ease,background-color .18s ease;
}
.calc-card:hover .calc-card-cara{border-color:rgba(255,255,255,.32)}
.calc-card input:checked + .calc-card-cara{
  border-color:var(--sand);
  background:rgba(49,206,125,.12);
}
.calc-card input:focus-visible + .calc-card-cara{
  outline:3px solid var(--sand);outline-offset:2px;
}

.calc-card-t{color:#fff;font-size:.9rem;line-height:1.3}
.calc-card-p{color:var(--sand-soft);font-size:.78rem;margin-top:.15rem;
  font-variant-numeric:tabular-nums}

/* Las de destino llevan foto: la cara se convierte en el marco. */
.calc-cards-foto .calc-card-cara{position:relative;overflow:hidden;
  min-height:104px;padding:0}
.calc-cards-foto .calc-card-cara img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.55;transition:opacity .18s ease;
}
.calc-cards-foto .calc-card:hover .calc-card-cara img,
.calc-cards-foto .calc-card input:checked + .calc-card-cara img{opacity:.8}
.calc-cards-foto .calc-card-t{
  position:relative;z-index:1;padding:.6rem .7rem;
  background:linear-gradient(transparent,rgba(10,18,26,.85) 55%);
  font-size:.82rem;
}

/* El campo exacto va debajo de los atajos, no compitiendo con ellos. */
.calc-grupo > label{display:block;margin-top:.9rem}

@media (prefers-reduced-motion: reduce){
  .calc-card-cara,.calc-cards-foto .calc-card-cara img{transition:none}
}