/**
 * Componente Calculadora (section/calculator-cta.php).
 * Origen: #s-calculadora de home-final.html (valores exactos).
 * La rejilla de 2 columnas (.about-grid del mockup) se hace con utilidades.
 *
 * @package silomasters
 */

.calculator-section{background:var(--bg-tint);}

.calc-widget{
  position:relative; background:var(--white); border:1px solid var(--border);
  border-radius:14px; padding:36px 32px 32px;
  box-shadow:0 30px 60px -30px rgba(22,22,22,.25);
  transition:transform .35s ease, box-shadow .35s ease;
}
.calc-widget:hover{transform:translateY(-6px); box-shadow:0 40px 70px -28px rgba(22,22,22,.32);}
.calc-widget-tag{
  position:absolute; top:-14px; right:28px; background:var(--orange); color:var(--white);
  font-family:var(--label); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px;
}
.calc-widget-row{margin-bottom:18px;}
/* equivale a .calc-widget-row label del mockup (aquí es un <span>: no es un formulario) */
.calc-widget-label{
  font-family:var(--label); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-secondary); display:block; margin-bottom:8px;
}
.calc-widget-field{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-tint); border-radius:var(--r-sm); padding:13px 16px;
  font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--text);
}
.calc-widget-field .material-symbols-outlined{font-size:18px; color:var(--text-secondary);}
.calc-widget-unit{font-size:12px; color:var(--text-secondary); font-weight:500;}
.calc-widget-divider{height:1px; background:var(--border); margin:24px 0 20px;}
.calc-widget-result{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-tint); border-left:3px solid var(--orange);
  border-radius:var(--r-sm); padding:16px 18px; color:var(--text);
}
.calc-widget-result-label{font-family:var(--label); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-secondary);}
.calc-widget-result-value{font-family:var(--display); font-weight:800; font-size:19px; color:var(--orange);}

@media(prefers-reduced-motion: reduce){
  .calc-widget{transition:none;}
  .calc-widget:hover{transform:none;}
}