/* ============================================================
   LIGHT THEME — test override for the home page.
   Loaded AFTER styles.css on index-light.html only, so the dark
   home (index.html) is untouched. Palette matches /cyklar
   (catalog.css). Remove the <link> to revert.
   ============================================================ */
:root {
  --bg:    #f6f4ef;   /* page */
  --bg-2:  #efeae1;   /* section bands (brands, booking) */
  --fg:    #1a1713;   /* ink */
  --muted: rgba(26, 23, 19, 0.56);
  --line:  rgba(26, 23, 19, 0.12);
  /* --accent stays the Santa Lucía amber */
}

/* Solid buttons: on a light page the dark fill needs light text. */
.btn--solid { color: #fff; }
.btn--solid:hover { color: #fff; }

/* ---------- Hero ----------
   The hero photo keeps its dark veil, so everything sitting over it must
   stay LIGHT regardless of the page theme — otherwise the flipped-dark text
   and buttons vanish against the image. */
.hero__content { color: #f4efe4; }
.hero__sub { color: rgba(244, 239, 228, 0.74); }
.hero__scroll { color: rgba(244, 239, 228, 0.6); }
.hero__cta .btn--solid { background: #f4efe4; color: #1a1713; border-color: #f4efe4; }
.hero__cta .btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #1a1713; }
.hero__cta .btn--ghost { color: #f4efe4; border-color: rgba(244, 239, 228, 0.3); }
.hero__cta .btn--ghost:hover { border-color: #f4efe4; }

/* ---------- Brands wall ----------
   White cards on the cream band, and flip the logos from white-on-dark to
   black-on-light (same trick /cyklar uses). */
.brands__item {
  background: #fff;
  border-color: rgba(26, 23, 19, 0.1);
}
.brands__item img { filter: brightness(0); }
.brands__item--link:hover { border-color: rgba(224, 145, 63, 0.5); box-shadow: 0 10px 26px rgba(26, 23, 19, 0.08); }

/* ---------- Service tiles ----------
   Text sits over a dark image veil, so it must stay light. The title has no
   colour of its own and was inheriting the page's now-dark body text. */
.tile__body { color: #f4efe4; }
.tile__title { color: #f4efe4; }

/* ---------- Manifesto ---------- */
.manifesto .muted { color: rgba(26, 23, 19, 0.5); }

/* ---------- Booking / form ---------- */
.field input, .field textarea { color: var(--fg); }
.form__status { color: var(--muted); }
/* white card stands out cleanly on the cream section band */
.booking__top { background: #fff; box-shadow: 0 18px 44px rgba(26, 23, 19, 0.1); }

/* marquee chips need a hairline so white doesn't vanish on the cream band */
.mq__chip { border: 1px solid rgba(26, 23, 19, 0.1); }

/* ---------- FAQ ---------- */
.faq__item summary { color: var(--fg); }

/* ---------- Footer ----------
   Footer logo swapped to the dark badge in the HTML; nothing else needed. */
.footer { background: #efeae1; }