/* FitaGeo – shared styles.
   Palette taken from the "Encesa de torres, talaies i talaiots pels drets humans" poster:
   torch smoke (rust orange), night slate, stone, sea and morning mist. */
:root {
  --fum: #cb6b29;          /* torch smoke: lines, borders, decoration */
  --accent: #b5581f;       /* buttons (white text passes WCAG AA) */
  --accent-fosc: #8e4131;  /* links, hover, tags */
  --accent-clar: #ebb27c;  /* highlights on dark backgrounds */
  --flama: #cd9c4a;        /* golden edge of the smoke */
  --boira: #edf1ec;        /* page background (morning sky) */
  --paper: #fafcfa;        /* cards */
  --tinta: #272b33;        /* night slate: header, text */
  --pedra: #404448;        /* tower stone */
  --mar: #566163;          /* sea: secondary text */
  --linia: #d3d9d2;        /* mist: borders */
  --ombra: 0 1px 2px rgba(39, 43, 51, .08), 0 6px 20px rgba(39, 43, 51, .09);
  --radi: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--boira);
}

a { color: var(--accent-fosc); }
a:hover { color: var(--accent); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header {
  background: var(--tinta);
  color: var(--boira);
  border-bottom: 4px solid var(--fum);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 68px; flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--boira); text-decoration: none;
  font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 26px; letter-spacing: .3px;
}
.brand:hover { color: var(--accent-clar); }
.brand img { width: 34px; height: 34px; }
.brand span b { color: var(--accent-clar); font-weight: 700; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--boira); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 600;
}
.nav a:hover, .nav a[aria-current="page"] { background: rgba(235, 178, 124, .14); color: var(--accent-clar); }

/* Hero: night sea with the smoke glowing at the top right */
.hero {
  background:
    radial-gradient(900px 380px at 88% -15%, rgba(203, 107, 41, .55), transparent 62%),
    radial-gradient(600px 260px at 70% 0%, rgba(205, 156, 74, .25), transparent 60%),
    linear-gradient(170deg, var(--pedra), var(--tinta) 70%);
  color: var(--boira);
  padding: 64px 0 56px;
}
.hero h1 {
  font-family: "Fraunces", Georgia, serif; font-size: clamp(38px, 6vw, 60px);
  line-height: 1.05; margin: 0 0 12px; letter-spacing: .5px;
}
.hero h1 b { color: var(--accent-clar); }
.hero p { font-size: 20px; max-width: 640px; margin: 0; color: #dce3dd; }

.page-title { padding: 40px 0 8px; }
.page-title h1 { font-family: "Fraunces", Georgia, serif; font-size: 38px; margin: 0 0 6px; }
.page-title p { margin: 0; color: var(--mar); }

main { padding-bottom: 56px; }
section { padding-top: 40px; }
h2 {
  font-family: "Fraunces", Georgia, serif; font-size: 26px; margin: 0 0 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
h2 a { font-family: "Source Sans 3", system-ui, sans-serif; font-size: 16px; font-weight: 600; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--linia); border-radius: var(--radi);
  box-shadow: var(--ombra); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.card:hover {
  transform: translateY(-2px); color: inherit; border-color: rgba(203, 107, 41, .45);
  box-shadow: 0 2px 4px rgba(39, 43, 51, .1), 0 12px 28px rgba(39, 43, 51, .15);
}
/* Card visuals share one ratio so cards in a row line up */
.card-band { aspect-ratio: 16 / 10; position: relative; }
.card-band svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Photos/posters: show the middle band (title and tower on the talaies poster) */
.card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; background: var(--tinta); }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { margin: 0; font-size: 20px; }
.card-body p { margin: 0; color: var(--mar); font-size: 16px; }
.card-meta { margin-top: auto; padding-top: 10px; font-size: 14px; color: var(--accent-fosc); font-weight: 600; }
.tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent-fosc); background: #f5e3d6; border-radius: 999px; padding: 2px 9px; margin-right: 4px;
}

/* Services list */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.service {
  background: var(--paper); border: 1px solid var(--linia); border-left: 3px solid var(--fum);
  border-radius: 10px; padding: 12px 14px;
}
.service b { display: block; }
.service code { font-size: 13px; color: var(--mar); word-break: break-all; }

/* Private teaser */
.private {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background:
    radial-gradient(500px 200px at 100% 0%, rgba(203, 107, 41, .3), transparent 65%),
    var(--tinta);
  color: var(--boira); border-radius: var(--radi); padding: 22px 24px;
}
.private p { margin: 0; flex: 1 1 320px; color: #c9d1ca; }
.private h3 { margin: 0 0 4px; color: var(--accent-clar); font-size: 20px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 700;
  padding: 10px 16px; border-radius: 9px; border: 0;
}
.btn:hover { background: var(--accent-fosc); color: #fff; }
.btn.secundari { background: transparent; color: var(--accent-fosc); border: 2px solid var(--fum); }
.btn.secundari:hover { background: #f5e3d6; }

.note {
  background: #f6ece5; border-left: 4px solid var(--fum); padding: 12px 16px; border-radius: 6px; color: var(--pedra);
}

/* Footer */
.site-footer { border-top: 1px solid var(--linia); color: var(--mar); font-size: 14px; padding: 22px 0 32px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding: 44px 0 40px; }
  .hero p { font-size: 18px; }
  .brand { font-size: 23px; }
}