/* =========================================
   Contacte · Estils complets (Bootstrap 5 friendly)
   ========================================= */
:root{
  --gold: #b79a54;
  --gold-25: rgba(183,154,84,.25);
  --gold-45: rgba(183,154,84,.45);
  --gold-95: rgba(183,154,84,.95);
  --black-90: rgba(17,17,17,.90);
  --white: #fff;
}

/* ===== Layout i fons ===== */
.contact-sec{
  position: relative;
  min-height: calc(100svh - var(--nav-h, 76px));
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #edf1f5;
}
.contact-bg{
  position:absolute; inset:0; z-index:0;
  background: var(--img, none) center / cover no-repeat;
  transform: translateZ(0);
}
.contact-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 85%);
}
@media (max-width: 992px){
  .contact-overlay{
    background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 85%);
  }
}

/* ===== Targetes tipus glass ===== */
.glass{
  background: rgba(17,17,17,0.45);
  border: 1px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.contact-card{ position: relative; z-index: 1; }

/* ===== Titulars coherents (línia daurada) ===== */
.gradient-title-alt{
  position: relative; display:inline-block; color:#fff;
  text-transform: uppercase; letter-spacing:.06em;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}
.gradient-title-alt::after{
  content:""; display:block; height:3px; margin-top:.45rem; border-radius:9999px;
  background: linear-gradient(90deg, var(--gold), rgba(183,154,84,.2));
  box-shadow: 0 6px 20px rgba(183,154,84,.28);
}

/* ===== Iconografia i enllaços ===== */
.text-gold{ color: var(--gold) !important; }
.social-ico{
  color:#fff; font-size:1.4rem; opacity:.92;
  transition:transform .15s ease, color .2s ease;
}
.social-ico:hover{ color: var(--gold); transform: translateY(-2px); }

/* =========================================
   Formulari (inputs, select, focus, validació)
   ========================================= */

/* Camps base (foscos) */
#contacte .form-control,
#contacte .form-select{
  background-color: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid var(--gold-45);
  border-radius: .5rem;
}

/* Placeholder clar i llegible */
#contacte .form-control::placeholder{ color:#cbd3da; opacity:.9; }

/* Focus: daurat, sense invertir a blanc */
#contacte .form-control:focus,
#contacte .form-select:focus{
  background-color: rgba(255,255,255,.08);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 .25rem var(--gold-25);
  outline: none;
}

/* Input group (captcha) coherent */
#contacte .input-group-text{
  background-color: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid var(--gold-45);
}

/* Checkbox coherent amb paleta */
#contacte .form-check-input{
  background-color: rgba(255,255,255,.06);
  border: 1px solid var(--gold-45);
}
#contacte .form-check-input:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem var(--gold-25);
}
#contacte .form-check-input:checked{
  background-color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 .15rem var(--gold-25);
}

/* Select: caret en daurat (Bootstrap 5) */
#contacte .form-select{
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b79a54' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3e%3cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
}

/* IMPORTANT: opcions del select. No toquem el fons nadiu, només el color del text
   per evitar “blanc sobre blanc” en alguns SO/navegadors. */
#contacte .form-select option{ color:#111 !important; }

/* Estat valid/invalid menys estrident en fosc */
#contacte .was-validated .form-control:valid,
#contacte .form-control.is-valid{
  border-color: rgba(46,204,113,.55);
  background-color: rgba(46,204,113,.08);
  box-shadow: none;
}
#contacte .was-validated .form-control:invalid,
#contacte .form-control.is-invalid{
  border-color: rgba(231,76,60,.65);
  background-color: rgba(231,76,60,.08);
  box-shadow: none;
}

/* Missatges d’error Bootstrap llegibles en fosc */
#contacte .invalid-feedback,
#contacte .valid-feedback{ color:#fff; opacity:.9; }

/* Autofill Chrome (evitar groc) */
#contacte input.form-control:-webkit-autofill,
#contacte textarea.form-control:-webkit-autofill,
#contacte select.form-select:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.08) inset !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid var(--gold-45) !important;
}

/* ===== Botons (si uses .button-cta ja queda bé; aquí només coherència) */
#contacte .button-cta{
  color: #111;
  background: var(--gold);
  border: 1px solid var(--gold-95);
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 2px rgba(183,154,84,.12), 0 12px 28px rgba(183,154,84,.28);
}
#contacte .button-cta:hover{
  filter: brightness(1.05);
  box-shadow: inset 0 0 0 2px rgba(183,154,84,.16), 0 16px 36px rgba(183,154,84,.34);
}

/* ===== Alertes del formulari (JS) */
#contacte #formAlert{ margin-top:.75rem; }

/* ===== Responsive padding ràpid */
@media (max-width: 576px){
  .contact-card{ padding: 1.1rem !important; }
}

/* ===== Honeypot totalment amagat */
#contacte input[name="company"]{
  position:absolute !important; left:-100vw; width:1px; height:1px;
  opacity:0; pointer-events:none;
}

/* ===== Evita “verd” en tel opcional quan .was-validated està activa (si fos el cas) */
#contacte .needs-validation.was-validated input[type="tel"]:not([required]):placeholder-shown:not(:focus){
  border-color: var(--gold-45) !important;
  box-shadow: none !important;
}