/* ==========================================================
   BOTONS – BASE COMUNA (sense canviar classes)
   ========================================================== */
.boto-cotitzacio,.boto-carro,.boto-comprar,.boto-telefon,.boton-consulta.compacte{
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
  border:0;
  border-radius:8px;
  font-family:var(--font-a, Arial, sans-serif);
  -webkit-tap-highlight-color:transparent;
  transition:background .25s,transform .15s,box-shadow .2s,filter .2s;
}
.boto-cotitzacio:hover,.boto-carro:hover,.boto-comprar:hover,.boto-telefon:hover,.boton-consulta.compacte:hover{ text-decoration:none; }
.boto-cotitzacio:focus-visible,.boto-carro:focus-visible,.boto-comprar:focus-visible,.boto-telefon:focus-visible,.boton-consulta.compacte:focus-visible{
  outline:2px solid rgba(0,0,0,.35);
  outline-offset:2px;
}

/* FLEX “normal” només pels botons que sí ho necessiten */
.boto-carro,.boto-comprar,.boto-telefon,.boton-consulta.compacte{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ==========================================================
   COTITZACIÓ (text en columnes)
   ========================================================== */
.boto-cotitzacio{
  display:inline-block;
  background:var(--vermell);
  text-align:center;
  padding:10px 20px;
  line-height:1.2;
}
.boto-cotitzacio:hover{ background:var(--vermell-hover); }

.boto-cotitzacio .titol,
.boto-cotitzacio .subtitol{ color:#fff;display:block;font-weight:700; }

.boto-cotitzacio .titol{ font-size:28px;letter-spacing:1px;text-transform:uppercase;margin:0 0 8px; }
.boto-cotitzacio .subtitol{ font-size:18px;margin:0 0 4px; }
.boto-cotitzacio .traduccio{ color:#ccc;display:block;font-size:16px;font-style:italic;margin-top:2px; }

.boto-cotitzacio .titol,
.boto-cotitzacio .subtitol,
.boto-cotitzacio .traduccio{
  background: transparent !important;
  padding: 0;
}

/* ==========================================================
   CARRO
   ========================================================== */
.boto-carro{
  height:38px;
  padding:0 20px;
  gap:6px;
  background:#7AA945;
  color:#fff;
  font:700 14px/38px var(--font-a, Arial, sans-serif);
}
.boto-carro:hover{ background:#567a31; }
.boto-carro,.boto-carro:visited,.boto-carro:active{ color:#fff; }

/* ==========================================================
   TELÈFON
   ========================================================== */
.boto-telefon{
  max-width:300px;
  min-width:200px;
  margin:20px auto;
  padding:14px 22px;
  background:var(--vermell);
  color:#fff;
  font:700 17px/1.3 var(--font-a, Arial, sans-serif);
  letter-spacing:.4px;
  text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,.15);
  overflow:hidden;
}
.boto-telefon:hover{
  background:#c9302c;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  color:#fff;
}
.boto-telefon .phone-icon{ margin-right:8px;vertical-align:middle; }

@media (max-width:768px){
  .boto-telefon{ font-size:16px;width:90%;padding:12px 20px; }
}

/* ==========================================================
   CONSULTA COMPACTE
   ========================================================== */
.boton-consulta.compacte{
  background:#E60000;
  color:#fff;
  padding:6px 12px;
  width:fit-content;
  line-height:1.1;
}
.boton-consulta.compacte .principal{ font-size:28px;font-weight:700;text-transform:uppercase; }
.boton-consulta