:root {
  --accent: #0ea5a4;
  --dark: #023047;
  --muted: #6b7280;
  --bg: #f8fafc;
  --card: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
}
body { margin:0; background:var(--bg); color:var(--dark); line-height:1.5; }
.container { max-width:1100px; margin:0 auto; padding:0 16px; }
header { background:white; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
header .container { display:flex; justify-content:space-between; align-items:center; padding:14px 0; }
.logo { background:var(--accent); color:white; width:44px; height:44px; border-radius:8px; display:flex; justify-content:center; align-items:center; font-weight:bold; }
nav a { margin-left:14px; text-decoration:none; color:var(--dark); font-weight:600; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; padding:40px 16px; }
.hero img { width:100%; border-radius:16px; }
.btn { display:inline-block; background:var(--accent); color:white; padding:10px 16px; border-radius:8px; text-decoration:none; margin-top:10px; font-weight:600; }
.preview { background:var(--card); padding:40px 0; }
.preview .container { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
.card { background:white; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.05); padding:16px; text-align:center; }
.card img { width:100%; border-radius:8px; }
.link { color:var(--accent); text-decoration:none; font-weight:600; }
footer { background:var(--dark); color:white; text-align:center; padding:20px 0; margin-top:40px; }
footer a { color:#a7f3d0; text-decoration:none; }
@media (max-width:768px){ .hero{grid-template-columns:1fr;} }
.about-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 20px 0;
  flex-wrap: wrap; /* Perquè es vegi bé al mòbil */
}

.about-image {
  width: 100%;
  max-width: 350px;  /* Mida recomanada */
  border-radius: 12px;
  flex-shrink: 0; /* Evita que s'encongeixi massa */
}

.about-text {
  flex: 1;
  min-width: 250px;
}
.contact-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 20px 0;
  flex-wrap: wrap; /* Adaptació per a mòbils */
}

.contact-text {
  flex: 1;
  min-width: 250px;
}

.contact-image {
  width: 100%;
  max-width: 250px;   /* Imatge més petita */
  border-radius: 12px;
  order: 2; /* Fa que la imatge vagi a la dreta en pantalles grans */
}

@media (max-width: 768px) {
  .contact-image {
    order: 1; /* En mòbil, la imatge apareix a dalt */
    margin: 0 auto;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  height: 120px;   /* Ajusta aquí si vols més gran o més petit */
  width: auto;
}