:root {
  --bg: #071827;
  --surface: #0b2236;
  --surface-2: #0f2c45;
  --text: #eaf2f8;
  --muted: rgba(234, 242, 248, 0.72);
  --accent: #2dd4bf;
  --accent-2: #38bdf8;
  --ring: rgba(56, 189, 248, 0.55);
  --border: rgba(234, 242, 248, 0.16);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  --container: 1100px;
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
h1[id], h2[id], h3[id] { scroll-margin-top: 6rem; }

.heading-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  border-radius: 8px;
}

.heading-link::after {
  content: '#';
  color: var(--accent-2);
  opacity: 0;
  font-size: 0.75em;
  transition: opacity 0.15s ease;
}

.heading-link:hover::after,
.heading-link:focus-visible::after {
  opacity: 1;
}

.heading-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}

.heading-link::before {
  content: 'Enllaç copiat';
  position: absolute;
  left: 0;
  top: -1.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.heading-link--copied::before {
  opacity: 1;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% 10%, rgba(56, 189, 248, 0.18), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(45, 212, 191, 0.16), transparent 60%),
              var(--bg);
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

figure { margin: 1.5rem 0; }
figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.media-grid figure { margin: 0; }

.poem {
  white-space: pre-wrap;
  font: inherit;
  margin: 1rem 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.content-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

.audio-player audio { width: 100%; }

@media (min-width: 900px) {
  .content-columns {
    grid-template-columns: 2fr 1fr;
  }
}

.container {
  width: min(var(--container), calc(100% - 2rem));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transform: translateY(-200%);
  z-index: 2000;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--ring); outline-offset: 2px; }

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: rgba(11, 34, 54, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.topbar__inner {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
}

.topbar__badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.18);
  border: 1px solid rgba(45, 212, 191, 0.35);
}

.topbar__text { color: var(--muted); font-size: 0.9rem; }

.site-header {
  position: sticky;
  top: 2.3rem;
  z-index: 1100;
  border-bottom: 1px solid var(--border);
  background: rgba(7, 24, 39, 0.75);
  backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 12rem;
}

.brand__logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.brand__name { display: block; font-weight: 800; letter-spacing: 0.01em; }
.brand__tagline { display: block; font-size: 0.85rem; color: var(--muted); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(11, 34, 54, 0.65);
  color: var(--text);
}

.nav-toggle:focus-visible,
.nav__link:focus-visible,
.carousel__button:focus-visible,
.footer__link:focus-visible,
.carousel__dot:focus-visible,
.tabs__button:focus-visible,
a.sponsors__item:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.nav-toggle__icon {
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }

.nav { display: none; }
.nav__list {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.nav__link {
  display: inline-flex;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--text);
  text-decoration: none;
}

.nav__link:hover {
  text-decoration: none;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}

.nav__item--has-submenu { position: relative; }

.nav__submenu {
  list-style: none;
  padding: 0.35rem;
  margin: 0;
  display: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(11, 34, 54, 0.95);
}

.nav__item--has-submenu:hover .nav__submenu,
.nav__item--has-submenu:focus-within .nav__submenu {
  display: block;
}

.nav__sublink {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
}

.nav__sublink:hover {
  text-decoration: none;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}

.nav.is-open {
  display: block;
  width: 100%;
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav { display: block; }

  /* Extends the li's hoverable box down through the visual gap above the
     dropdown (without shifting surrounding layout), so moving the mouse
     straight down from the link to the submenu doesn't lose :hover in
     between. The submenu is then anchored to the *bottom* of this padded
     box (top: 100%), not offset further below it, or the gap just moves
     down instead of closing. */
  .nav__item--has-submenu {
    padding-bottom: 0.4rem;
    margin-bottom: -0.4rem;
  }

  .nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    box-shadow: var(--shadow);
  }
}

@media (max-width: 899.98px) {
  .site-header__inner { flex-wrap: wrap; }
  .nav.is-open .nav__list {
    width: 100%;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(11, 34, 54, 0.7);
  }

  .nav__submenu {
    display: block;
    position: static;
    margin-left: 0.5rem;
    padding: 0.25rem 0 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }
}

.main { padding: 5rem 0 3rem; }

.hero { padding-top: 1.5rem; }

.carousel {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(11, 34, 54, 0.6);
  box-shadow: var(--shadow);
}

.carousel__viewport { overflow: hidden; }

.carousel__track {
  display: flex;
  transition: transform 450ms ease;
  will-change: transform;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
}

/* Only the caption is a link now (not the whole image) — pointerdown on
   the image still starts a carousel drag, but the caption sits outside
   that drag area so a click on it always reaches the link. */
.carousel__slide-link {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: block;
}

.carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Shift the crop upward for photos whose subject sits above center
   (e.g. a low-angle shot), so cropping to 16:9 doesn't cut off a head. */
.carousel__image--top {
  object-position: center 30%;
}

.carousel__caption {
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(7, 24, 39, 0.72);
  border: 1px solid rgba(234, 242, 248, 0.16);
}

.carousel__caption h2 {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  margin: 0 0 0.15rem;
}

.carousel__caption p { margin: 0; color: var(--muted); }

.carousel__controls {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}

.carousel__button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 44, 69, 0.75);
  color: var(--text);
}

.carousel__button:hover { background: rgba(56, 189, 248, 0.12); }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(234, 242, 248, 0.4);
  background: rgba(234, 242, 248, 0.2);
}

.carousel__dot[aria-selected="true"] {
  background: rgba(45, 212, 191, 0.9);
  border-color: rgba(45, 212, 191, 0.9);
}

.ticker {
  margin-bottom: 1rem;
}

.ticker__content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(11, 34, 54, 0.6);
  box-shadow: var(--shadow);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
}

.ticker__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px 1px rgba(45, 212, 191, 0.7);
}

.ticker__item {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  animation: ticker-item-in 350ms ease;
}

.ticker__item strong { color: var(--accent-2); }

@keyframes ticker-item-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__item { animation: none; }
}

.sponsors {
  margin-top: 2.5rem;
}

.sponsors__title {
  margin: 0 0 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.sponsors__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.sponsors__item {
  display: inline-flex;
  align-items: center;
}

.sponsors__item:not(:last-child)::after {
  content: '·';
  margin-left: 1.25rem;
  color: var(--border);
}

a.sponsors__item {
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
}

a.sponsors__item:hover { color: var(--text); text-decoration: underline; }

.sponsors__logo {
  display: block;
  max-height: 22px;
  width: auto;
}

.footer {
  border-top: 1px solid var(--border);
  padding: 1.25rem 0;
  background: rgba(7, 24, 39, 0.7);
}

.footer__inner {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer__social {
  display: inline-flex;
  gap: 0.75rem;
}

.footer__link {
  color: var(--muted);
  text-decoration: none;
  padding: 0.15rem 0.25rem;
  border-radius: 10px;
}

.footer__link:hover { color: var(--text); text-decoration: underline; }

.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.discounts-table__row {
  cursor: pointer;
}

.discounts-table__row:hover td,
.discounts-table__row:focus-visible td {
  background: rgba(56, 189, 248, 0.08);
}

.discounts-table__row:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.discounts-table__detail td {
  white-space: normal;
  background: var(--surface);
  border-left: 3px solid var(--accent-2);
  color: var(--muted);
  font-size: 0.92rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

th, td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

thead th {
  background: var(--surface-2);
  font-weight: 700;
}

tbody tr:last-child td { border-bottom: none; }

.notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 1.25rem 0 1.75rem;
  padding: 1rem 1.25rem;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius);
}

.notice__icon {
  flex: none;
  font-size: 1.1rem;
  line-height: 1.4;
}

.notice p {
  margin: 0;
}

.iframe-embed {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
}

.iframe-embed iframe {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 640px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(234, 242, 248, 0.1);
}

.tabs {
  margin: 1.5rem 0;
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.tabs__button {
  font: inherit;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
}

.tabs__button:hover { color: var(--text); }

.tabs__button[aria-selected="true"] {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

.contact-card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 1.25rem 0 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.contact-card__item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}