/* ============================================================
   Botones y enlaces con flecha
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:var(--sp-4) var(--sp-6); border:1px solid transparent; white-space:nowrap;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
/* Los botones no parten palabra (white-space:nowrap): bajo 400 px se ajusta el
   acolchado para que "Solicitar cotización" siga cabiendo en una línea. */
@media (max-width:400px){
  .btn{ padding:var(--sp-4) var(--sp-4); letter-spacing:.04em; }
}
.btn-primary{ background:var(--yellow); color:var(--navy); }
.btn-primary:hover{ background:var(--yellow-hi); transform:translateY(-1px); }
.btn-outline{ border-color:rgba(255,255,255,.5); color:var(--white); background:transparent; }
.btn-outline:hover{ border-color:var(--yellow); color:var(--yellow); background:rgba(255,196,0,.08); }
.btn-outline-dark{ border-color:var(--navy); color:var(--navy); background:transparent; }
.btn-outline-dark:hover{ background:var(--navy); color:var(--yellow); }
.btn-arrow{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-700); border-bottom:1px solid var(--blue-700); padding-bottom:3px; }
.btn-arrow.on-dark{ color:var(--yellow); border-color:var(--yellow); }
.btn-arrow svg{ transition:transform .25s ease; }
.btn-arrow:hover svg{ transform:translateX(4px); }