/* ============================================================
   CONTATTACI.CSS — stili specifici SOLO della pagina contattaci
   ============================================================ */

/* ─── HERO ─── */
.hero {
  min-height: 48vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center; padding: 150px 24px 56px;
}
.hero-label {
  font-size: .72rem; letter-spacing: .3em; color: var(--gold);
  font-weight: 500; margin-bottom: 20px;
  opacity: 0; animation: fadeUp .8s .2s forwards;
}
.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 300; line-height: 1.05;
  opacity: 0; animation: fadeUp .8s .4s forwards;
}
.hero-title strong { font-weight: 600; }
.hero-title em     { font-style: italic; color: var(--gold); }
.hero-divider {
  width: 120px; height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  margin: 24px auto 0;
  opacity: 0; animation: fadeUp .8s .6s forwards;
}
.hero-subtitle {
  margin-top: 20px; font-size: .9rem; letter-spacing: .1em;
  color: var(--grey); font-weight: 400; max-width: 380px;
  line-height: 1.8; opacity: 0; animation: fadeUp .8s .75s forwards;
}

/* ─── CONTACT WRAP (info + form) ─── */
.contact-wrap {
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 72px 60px 100px;
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: 72px; align-items: start;
  border-top: 1px solid rgba(201,168,76,.15);
}
.section-label {
  display: block; font-size: .65rem; letter-spacing: .3em;
  color: var(--gold); font-weight: 500; margin-bottom: 16px;
  text-transform: uppercase;
}
.contact-info h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300; line-height: 1.2; margin-bottom: 20px;
}
.contact-info h2 em { font-style: italic; color: var(--gold); }
.contact-info > p { font-size: .85rem; line-height: 1.9; color: var(--grey); margin-bottom: 36px; }

.contact-item { margin-bottom: 24px; }
.contact-item-label {
  display: block; font-size: .6rem; letter-spacing: .3em;
  color: var(--gold); font-weight: 500;
  text-transform: uppercase; margin-bottom: 6px;
}
.contact-item-label-2 {
  display: block; font-size: .9rem; letter-spacing: .3em;
  color: var(--gold); font-weight: 500;
  text-transform: uppercase; margin-bottom: 6px;
}
.contact-item-value {
  font-size: 1.1rem; font-weight: 400; color: var(--white);
  text-decoration: none; transition: color .3s;
  word-break: break-word; overflow-wrap: break-word;
  display: block; max-width: 100%;
}
.contact-item-value:hover { color: var(--gold); }
.contact-divider {
  width: 36px; height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  margin: 28px 0;
}

/* ─── FORM ─── */
.contact-form {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(201,168,76,.15);
  padding: 44px 40px; width: 100%; min-width: 0;
}
.form-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem; font-weight: 300; font-style: italic;
  margin-bottom: 32px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; min-width: 0; }
.field label {
  font-size: .58rem; letter-spacing: .3em;
  color: var(--gold); font-weight: 500; text-transform: uppercase;
}
.field input, .field select, .field textarea {
  background: transparent; border: none;
  border-bottom: 1px solid rgba(201,168,76,.25);
  padding: 10px 0; color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: .85rem; font-weight: 400;
  outline: none; transition: border-color .3s;
  width: 100%; min-width: 0;
  -webkit-appearance: none; appearance: none;
}
.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C9A84C'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
  padding-right: 20px;
}
.field select option { background: var(--black); color: var(--white); }
.field input::placeholder, .field textarea::placeholder { color: rgba(185,185,185,.35); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); }
.field textarea { resize: none; height: 90px; line-height: 1.7; }
.field-full { grid-column: 1 / -1; }
.form-footer {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 8px;
}
.form-note { font-size: .65rem; color: var(--grey); opacity: .6; line-height: 1.7; max-width: 200px; }

/* ─── CONTACT SECTION (cards info + mappa) ─── */
.contact-section { position: relative; padding: 90px 60px 80px; }
.contact-section::before {
  content: '';
  position: absolute;
  top: 0; left: 60px; right: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.35) 30%, rgba(201,168,76,.35) 70%, transparent);
}
.contact-inner { max-width: 1100px; margin: 0 auto; }
.contact-header { text-align: center; margin-bottom: 64px; }
.contact-label {
  display: inline-block; font-size: .75rem; letter-spacing: .3em;
  color: var(--gold); font-weight: 500; margin-bottom: 18px;
}
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.contact-card {
  position: relative;
  padding: 44px 36px;
  border: 1px solid rgba(201,168,76,.1);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 16px;
  transition: border-color .35s, background .35s;
  cursor: pointer;
  text-decoration: none;
}
.contact-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}
.contact-card:hover::before { transform: scaleX(1); }
.contact-card:hover { border-color: rgba(201,168,76,.25); background: rgba(201,168,76,.03); }
.contact-icon {
  width: 48px; height: 48px;
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .35s;
}
.contact-card:hover .contact-icon { border-color: rgba(201,168,76,.7); }
.contact-icon svg { width: 20px; height: 20px; }
.contact-card-label { font-size: .7rem; letter-spacing: .25em; color: var(--gold); font-weight: 500; }
.contact-card-value { font-size: .9rem; color: var(--grey); letter-spacing: .06em; line-height: 1.6; }

/* ─── MAPPA ─── */
.map-section {
  position: relative; width: 100%;
  border-top: 1px solid rgba(201,168,76,.15);
  overflow: hidden; transition: filter .4s;
}
.map-section:hover { filter: grayscale(20%) contrast(1.05) brightness(0.9); }
.map-section iframe { display: block; width: 100%; height: 520px; }

/* ─── REVEAL ─── */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .85s ease, transform .85s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ─── FOOTER ─── */
.footer-copy { font-size: .75rem; color: var(--grey); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1280px) { nav { padding: 20px 40px; } }

@media (max-width: 1024px) {
  .contact-section { padding: 80px 40px 70px; }
  .contact-section::before { left: 40px; right: 40px; }
}

@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px 80px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 36px 24px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-section { padding: 70px 30px 60px; }
  .contact-section::before { left: 30px; right: 30px; }
}

@media (max-width: 768px) {
  .map-section iframe { height: 280px; }
}

@media (max-width: 480px) {
  .hero { padding: 120px 16px 48px; }
  .contact-wrap { padding: 48px 16px 64px; gap: 32px; }
  .contact-form { padding: 28px 16px; }
  .contact-item-value { font-size: .95rem; }
  .btn-gold { width: 100%; text-align: center; padding: 14px 16px; }
  .form-footer { flex-direction: column; align-items: stretch; }
  .form-note { max-width: 100%; }
}