:root{
  --purple:#5f12e0;          /* roxo de base */
  --purple-deep:#4a0fc5;
  --teal:#16F0E9;            /* turquesa dos traços */
  --fg:#fff;
}

.contactos{
  position:relative;
  background: #6000BC;
  color: var(--fg);
  padding: 56px 0 72px;
}

/* barra de traços diagonais no rodapé */
.contactos::after{
  content:"";
  position:absolute;
  left:-8%;
  top:-36px;
  width:49%;
  height:75px;
  background: #6000BC;
  pointer-events:none;
}
.contactos .wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* grid 3 colunas: texto | social | botão  */
.contactos .grid{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap: 24px 32px;
}

.contactos .title{margin:0 0 14px;font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:.02em}
.contactos .title .u{margin-right:8px}

address{font-style:normal;line-height:1.6;opacity:.95}
address a{color:#fff;text-decoration:underline}

.legal{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;font-size:.92rem;opacity:.8}
.legal a{color:#fff;text-decoration:none}
.legal a:hover{ text-decoration:underline }

/* redes sociais */
.social{display:flex;gap:10px;align-items:center;justify-content:flex-start}
.ico{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:50%;
    transition:.2s;
    background: transparent;
    border: none;
    text-decoration: none;
}
.ico:hover{
    transform:translateY(-2px);
}
.ico svg{
    width:22px;
    height:22px;
    fill: #fff;
    transition: fill 0.2s ease;
}
.ico:hover svg{
    fill: #fff;
    transform: scale(1.1);
}
.ico i {
    font-size: 30px;
    color: #fff;
    transition: color 0.2s ease, transform 0.2s ease;
}
.ico:hover i {
    color: #fff;
    transform: scale(1.1);
}


/* botão “ghost” */
.btn.ghost{
  display:inline-block;
  padding:10px 16px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:8px;
  font-weight:900; letter-spacing:.04em;
  color:#fff; background:transparent; text-transform:uppercase;
}
.right{display:flex;justify-content:flex-end}

/* --------- MOBILE --------- */
@media (max-width: 900px){
  .contactos .grid{
    grid-template-columns: 1fr;
    text-align:left;
  }
  .right{justify-content:flex-start}
  .social{justify-content:flex-start}
}