/* ==========================================================================
   Go Fit Reserve — Design Tokens
   ========================================================================== */
:root {
  --ivory: #F7F3EE;
  --sand: #ECE4DA;
  --ink: #2B2723;
  --taupe: #8C8378;
  /* Same taupe, deepened toward ink for body-copy contrast (WCAG AA ~5:1
     on ivory/sand) — --taupe itself stays reserved for borders/decoration. */
  --taupe-text: color-mix(in srgb, var(--ink) 74%, var(--ivory) 26%);
  --gold: #C2A468;
  --gold-soft: #D6C094;
  --rose: #E3D0C4;

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-script: 'Parisienne', cursive;

  --container: 1180px;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  --header-h: 76px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-s: .35s;
  --dur-m: .6s;
  --dur-l: .9s;

  --shadow-soft: 0 20px 50px -25px rgba(43, 39, 35, .35);
  --shadow-btn: 0 12px 30px -12px rgba(194, 164, 104, .55);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input { font: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--ivory);
  padding: .8rem 1.4rem;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.section-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--gold);
  letter-spacing: .02em;
  margin-bottom: -.3rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3rem);
  letter-spacing: .01em;
  color: var(--ink);
}

.divider {
  width: 64px;
  height: 2px;
  background: var(--gold);
  margin: 1.75rem auto;
  border-radius: 2px;
}
.divider--left { margin-inline: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  white-space: nowrap;
}

.btn-solid {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-btn);
}
.btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(194, 164, 104, .7);
  background: var(--gold-soft);
}

.btn-ghost {
  border: 1px solid currentColor;
  color: var(--ink);
  padding: .8rem 1.6rem;
}
.btn-ghost:hover { background: var(--ink); color: var(--ivory); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  background: rgba(43, 39, 35, .94);
  backdrop-filter: blur(10px);
  transition: background var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), height var(--dur-m) var(--ease);
}

.site-header.is-scrolled {
  background: var(--ink);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .6);
  height: 68px;
}

.header-inner {
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ---------- Logo (image test: logochampfinal.png) ----------------------
   Client-supplied cutout of the real neon sign, background removed with
   the glow kept intact — unlike the earlier flattened photo, this one
   reads cleanly on both light and dark grounds. Swapped in for the CSS
   wordmark below to compare; the wordmark rules are left in place,
   unused, in case we revert. */
.brand-logo-img {
  height: 40px;
  width: auto;
  transition: height var(--dur-m) var(--ease);
}
.site-header.is-scrolled .brand-logo-img { height: 32px; }

.footer-logo-img { height: 38px; width: auto; }

/* Soft ambient glow behind the logo mark — a thin, low-opacity light
   pool rather than a hard halo, so it reads as premium lighting instead
   of a sticker effect. Negative z-index keeps it above the dark header/
   footer background but under the logo image itself. */
.brand,
.footer-logo {
  position: relative;
  display: inline-flex;
}
.brand::before,
.footer-logo::before {
  content: '';
  position: absolute;
  inset: -55% -22%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 65% at 50% 52%, rgba(194, 164, 104, .4) 0%, rgba(194, 164, 104, .16) 45%, transparent 75%);
  filter: blur(12px);
  opacity: .8;
  transition: opacity var(--dur-m) var(--ease);
}
.brand:hover::before { opacity: 1; }

/* ---------- Wordmark logo (currently unused — see image swap above) ----
   "Go" and "Fit" set in the display font with a visible gap between
   them, "reserve" in the script accent tucked directly under "Fit" (its
   own column, left-aligned so it starts right at the F) — the same
   lockup as the neon sign, typeset instead of photographed, with a CSS
   text-glow standing in for the tube glow. Reads correctly only on a
   dark ground, so header/footer/mobile menu are all dark to host it.
   The glow is intentionally faint: a small bright wordmark blows out
   fast on a phone screen, so weight is medium (not bold) and color is
   warm ivory rather than stark white. */
.logo-text {
  display: inline-flex;
  align-items: baseline;
  gap: .22em;
  line-height: 1;
  cursor: pointer;
}
.logo-text__fitstack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.logo-text__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 5vw, 2rem);
  color: var(--ivory);
  letter-spacing: .01em;
  text-shadow:
    0 0 2px rgba(247, 243, 238, .4),
    0 0 7px rgba(247, 243, 238, .2),
    0 0 15px rgba(247, 243, 238, .12);
  transition: font-size var(--dur-m) var(--ease), text-shadow var(--dur-s) var(--ease);
}
.logo-text__script {
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 4.4vw, 1.8rem);
  color: var(--gold-soft);
  margin-top: -.14em;
  text-shadow:
    0 0 3px rgba(194, 164, 104, .55),
    0 0 10px rgba(194, 164, 104, .3),
    0 0 20px rgba(194, 164, 104, .18);
  transition: font-size var(--dur-m) var(--ease), text-shadow var(--dur-s) var(--ease);
}
.site-header.is-scrolled .logo-text__word { font-size: clamp(1.15rem, 4.2vw, 1.65rem); }
.site-header.is-scrolled .logo-text__script { font-size: clamp(1rem, 3.6vw, 1.45rem); }

/* Small screens sit close to the eye — dial the glow back further so it
   never reads as a blown-out white patch. */
@media (max-width: 599px) {
  .logo-text__word {
    text-shadow:
      0 0 1px rgba(247, 243, 238, .3),
      0 0 5px rgba(247, 243, 238, .14);
  }
  .logo-text__script {
    text-shadow:
      0 0 2px rgba(194, 164, 104, .4),
      0 0 7px rgba(194, 164, 104, .2);
  }
}

/* "power on" flicker — hover on desktop, tap (JS-toggled .is-lit) on touch */
.logo-text:hover .logo-text__word,
.logo-text:focus-visible .logo-text__word,
.logo-text.is-lit .logo-text__word {
  text-shadow:
    0 0 4px rgba(255, 255, 255, .7),
    0 0 14px rgba(255, 255, 255, .42),
    0 0 30px rgba(247, 243, 238, .28);
}
.logo-text:hover .logo-text__script,
.logo-text:focus-visible .logo-text__script,
.logo-text.is-lit .logo-text__script {
  text-shadow:
    0 0 5px rgba(194, 164, 104, .9),
    0 0 16px rgba(194, 164, 104, .55),
    0 0 34px rgba(194, 164, 104, .36);
}
.logo-text.is-lit .logo-text__word,
.logo-text.is-lit .logo-text__script {
  animation: neonFlicker .5s ease-out;
}

@keyframes neonFlicker {
  0% { opacity: .35; }
  10% { opacity: 1; }
  18% { opacity: .45; }
  28% { opacity: 1; }
  100% { opacity: 1; }
}

.main-nav ul {
  display: flex;
  gap: 2.4rem;
}

.main-nav a {
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .03em;
  position: relative;
  padding-bottom: 4px;
  color: var(--ivory);
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right var(--dur-s) var(--ease);
}
.main-nav a:hover::after { right: 0; }

.header-cta {
  display: none;
  color: var(--ivory);
  border-color: rgba(247, 243, 238, .5);
}
.header-cta:hover { background: var(--ivory); color: var(--ink); }

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  z-index: 110;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ivory);
  transition: transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), visibility var(--dur-m);
  z-index: 90;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-menu ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}
.mobile-menu a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;
  color: var(--ivory);
}

@media (min-width: 900px) {
  .header-cta { display: inline-flex; }
  .hamburger { display: none; }
  .mobile-menu { display: none; }
}
@media (max-width: 899px) {
  .main-nav { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 4rem;
  background: var(--ink);
  overflow: hidden;
}

/* The hero carousel fills the section edge-to-edge. Full opacity, vivid
   photos, one caption per slide (same treatment as the other photo
   carousels) — no shared tagline/CTA overlay anymore, so it doesn't
   duplicate the floating WhatsApp button or fight the per-slide quote
   for attention.
   NB: selector is ".carousel.hero-carousel" (not just ".hero-carousel")
   so it reliably beats the plain ".carousel { position: relative }" base
   rule on specificity — same-specificity would otherwise fall back to
   source order, which silently un-fullscreens this every time the base
   rule gets edited/reordered. */
.carousel.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin-top: 0;
}
.hero-carousel .carousel-track,
.hero-carousel .carousel-slide { height: 100%; }
/* Centered and lifted above the quote/scroll-cue: bottom-right would
   collide with the fixed floating WhatsApp button, and dead-center at
   .scroll-cue's own height would collide with that instead. */
.hero-carousel .carousel-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(4.4rem, 10vw, 5.8rem);
  translate: -50% 0;
  margin-top: 0;
  z-index: 3;
}
@media (max-width: 640px) {
  /* Captions can wrap to 3 lines on a narrow screen — this needs to
     clear that worst case, not just the shortest caption. */
  .hero-carousel .carousel-dots { bottom: 9.5rem; }
}

/* The source photos are square (2048x2048). On a typical tall phone
   screen, object-fit: cover has zero vertical slack to crop with — the
   full head-to-feet frame gets squeezed in, and the model's head lands
   right behind the fixed header instead of clear below it. Scaling up
   from the top edge pushes that framing down (and crops the feet
   instead, which we don't need) without affecting the desktop crop. */
@media (max-width: 640px) {
  .hero-carousel .carousel-photo {
    transform: scale(1.25);
    transform-origin: 50% 0%;
  }
}

/* Desktop test: instead of cropping the square photo to fill the
   full-bleed hero, show it whole inside a bounded, bordered frame
   centered in the hero. Since the frame shares the photo's 1:1 aspect
   ratio, object-fit: cover never has anything to crop. Mobile keeps
   the full-bleed treatment untouched. */
@media (min-width: 641px) {
  /* Selector matches the base rule's specificity (.carousel.hero-carousel)
     so this actually overrides position/inset instead of losing to it. */
  .carousel.hero-carousel {
    position: relative;
    inset: auto;
    width: min(90vw, 74svh, 620px);
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    border: 1px solid rgba(194, 164, 104, .55);
    overflow: hidden;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .55);
  }
  .hero-carousel .carousel-dots {
    bottom: 1.5rem;
  }
  .hero-carousel .carousel-quote {
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    padding: clamp(1.2rem, 3vw, 1.8rem);
  }
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  translate: -50% 0;
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(247, 243, 238, .55);
  border-radius: 999px;
  z-index: 2;
}
.scroll-cue span {
  position: absolute;
  top: 7px;
  left: 50%;
  translate: -50% 0;
  width: 4px;
  height: 8px;
  background: var(--gold);
  border-radius: 999px;
  animation: scrollCue 1.8s var(--ease) infinite;
}
@keyframes scrollCue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}
@media (max-width: 599px) { .scroll-cue { display: none; } }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}
[data-animate].in-view { opacity: 1; transform: translateY(0); }
[data-animate][data-delay="1"] { --stagger: 1; }
[data-animate][data-delay="2"] { --stagger: 2; }
[data-animate][data-delay="3"] { --stagger: 3; }
[data-animate][data-delay="4"] { --stagger: 4; }
[data-animate][data-delay="5"] { --stagger: 5; }
[data-animate][data-delay="6"] { --stagger: 6; }
[data-animate][data-delay="7"] { --stagger: 7; }

/* ==========================================================================
   Marquee — endless brand ticker between hero and About
   ========================================================================== */
.marquee {
  background: var(--ink);
  overflow: hidden;
  padding-block: .9rem;
  border-block: 1px solid rgba(255, 255, 255, .08);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}

.marquee-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(.85rem, 2vw, 1.05rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-soft);
  white-space: nowrap;
  padding-inline: 1.1rem;
}

.marquee-dot { color: var(--taupe); font-size: .9rem; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee:hover .marquee-track { animation-play-state: paused; }

/* ==========================================================================
   About
   ========================================================================== */
.about { background: var(--sand); padding-block: clamp(5rem, 12vw, 8rem); }
.about-inner { max-width: 760px; text-align: center; }

.about-text {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--ink);
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.about-text + .about-text { margin-top: 1.1rem; }

.about-text-lead {
  color: var(--gold);
  font-weight: 700;
}

.about-pullquote {
  font-family: var(--font-script);
  color: var(--gold);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.3;
  margin-top: 2.2rem;
}

/* Standalone /sobre.html page: sits directly under the fixed header with
   nothing above it, so it needs extra clearance up top. */
.about--page { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 5rem)); }
.about-cta { margin-top: 2.6rem; }

/* ==========================================================================
   Legal pages (Política de Privacidade, ...) — standalone page like .about,
   but left-aligned since it's long-form reading rather than a hero statement.
   ========================================================================== */
.legal {
  background: var(--sand);
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 5rem));
  padding-bottom: clamp(5rem, 12vw, 8rem);
}
.legal-inner { max-width: 760px; }
.legal-updated { color: var(--taupe); font-size: .85rem; margin-top: .6rem; }

.legal-body { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 2.2rem; }
.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--gold);
  margin-bottom: .8rem;
}
.legal-body p { color: var(--taupe-text); font-size: .96rem; line-height: 1.75; }
.legal-body p + p, .legal-body ul + p { margin-top: .9rem; }
.legal-body ul { display: flex; flex-direction: column; gap: .55rem; margin-top: .8rem; }
.legal-body li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--taupe-text);
  font-size: .96rem;
  line-height: 1.65;
}
.legal-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.legal-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.legal-body strong { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Showcase — fabric quality (text only, no photos: they're all in the
   hero carousel now, and repeating the same handful of shots here read
   as redundant)
   ========================================================================== */
.showcase { background: var(--ivory); padding-block: clamp(5rem, 12vw, 7rem); text-align: center; }

.showcase-intro { max-width: 640px; }

.showcase-text {
  color: var(--taupe-text);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  max-width: 560px;
  margin: 1.4rem auto 0;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: 2.2rem;
}
.tag-pill {
  position: relative;
  font-size: .85rem;
  color: var(--ink);
  border: 1px solid rgba(140, 131, 120, .35);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  transition: border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
  animation: pill-spotlight 7.2s ease-in-out infinite;
}
.tag-pill:hover {
  border-color: var(--gold);
  background: rgba(194, 164, 104, .1);
}
.tag-pill:nth-child(1) { animation-delay: 0s; }
.tag-pill:nth-child(2) { animation-delay: 1.2s; }
.tag-pill:nth-child(3) { animation-delay: 2.4s; }
.tag-pill:nth-child(4) { animation-delay: 3.6s; }
.tag-pill:nth-child(5) { animation-delay: 4.8s; }
.tag-pill:nth-child(6) { animation-delay: 6s; }

@keyframes pill-spotlight {
  0%, 15%, 100% {
    border-color: rgba(140, 131, 120, .35);
    background: transparent;
    box-shadow: none;
    color: var(--ink);
  }
  4% {
    border-color: var(--gold);
    background: rgba(194, 164, 104, .18);
    box-shadow: 0 8px 20px -8px rgba(194, 164, 104, .6);
    color: var(--ink);
  }
}

.carousel {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  height: clamp(340px, 52vw, 560px);
  overflow: hidden;
}
.carousel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.carousel-slide--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(43, 39, 35, .78) 0%, rgba(43, 39, 35, .18) 42%, rgba(43, 39, 35, .08) 100%);
}
.carousel-quote {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  font-family: var(--font-script);
  color: var(--ivory);
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.25;
  text-align: left;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(43, 39, 35, .45);
  backdrop-filter: blur(6px);
  color: var(--ivory);
  /* without this, a quick tap on a touch device can get misread as the
     start of a scroll/zoom gesture and silently miss the click */
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
  z-index: 2;
}
.carousel-arrow:hover { background: var(--gold); color: var(--ink); }
.carousel-arrow--prev { left: clamp(.6rem, 2.5vw, 1.6rem); }
.carousel-arrow--next { right: clamp(.6rem, 2.5vw, 1.6rem); }
.carousel-arrow .icon { width: 20px; height: 20px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.4rem;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(140, 131, 120, .35);
  transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.carousel-dot.is-active {
  background: var(--gold);
  transform: scale(1.25);
}

@media (max-width: 599px) {
  /* Every carousel keeps its side arrows on mobile, not just the hero —
     swipe still works, the arrows are just an extra option, and the size
     is standardized across all of them (hero included) either way. */
  .carousel-arrow {
    width: 38px;
    height: 38px;
  }
  .carousel-arrow .icon { width: 17px; height: 17px; }
}

/* ==========================================================================
   Supplements carousel — product photos, background removed (see
   suplementos/*-cutout.webp), floating directly on a light card, plus a
   couple of icon-only placeholders for lines without a photo yet.
   ========================================================================== */
.supplements { background: var(--sand); padding-block: clamp(5rem, 12vw, 7rem); text-align: center; }
.supplements .carousel { margin-bottom: 0; }

.carousel-slide--panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: clamp(360px, 40vw, 440px);
  padding: 1.5rem;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--sand) 100%);
}
.carousel-panel-photo {
  width: auto;
  height: clamp(220px, 34vw, 300px);
  object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(43, 39, 35, .2));
  margin-bottom: .6rem;
}
.carousel-panel-icon {
  width: 44px;
  height: 44px;
  color: var(--gold);
  margin-bottom: .8rem;
}
.carousel-panel-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  color: var(--ink);
}
.carousel-panel-text {
  color: var(--taupe-text);
  font-size: .92rem;
  max-width: 320px;
}

/* ==========================================================================
   Pillars / Diferenciais
   ========================================================================== */
.pillars { background: var(--ivory); padding-block: clamp(5rem, 12vw, 8rem); text-align: center; }

.pillars-grid {
  margin-top: 3.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  text-align: left;
}

.pillar-card {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 1.8rem;
  background: var(--ivory);
  border: 1px solid rgba(140, 131, 120, .18);
  border-radius: 4px;
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(140, 131, 120, .3);
}
/* Tap feedback — hover above never fires on a phone, so this is what
   actually responds to touch. Needs the touchstart listener in main.js
   for :active to trigger at all on non-form elements in iOS Safari. */
.pillar-card:active {
  transform: translateY(-4px) scale(.97);
  box-shadow: var(--shadow-soft);
  border-color: rgba(140, 131, 120, .3);
  transition-duration: .12s;
}

/* Gold accent line draws in left-to-right instead of just appearing —
   replaces the old static border-top. Starts shortly after the card
   itself finishes fading/lifting into view. */
.pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .8s var(--ease) .15s;
}
.pillar-card.in-view::before { width: 100%; }

/* Icon pops in with a brief overshoot just after the accent line starts
   — draws the eye to it first, once, rather than looping forever. */
@keyframes pillarIconPop {
  0% { opacity: 0; transform: scale(.4); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.pillar-icon {
  width: 30px;
  height: 30px;
  color: var(--gold);
  margin-bottom: 1.4rem;
  opacity: 0;
  transform: scale(.4);
}
.pillar-card.in-view .pillar-icon {
  animation: pillarIconPop .55s var(--ease) .3s both;
}

.pillar-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: .6rem;
}

.pillar-card p {
  font-size: .92rem;
  color: var(--taupe-text);
}

@media (min-width: 640px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .pillars-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Onde estamos
   ========================================================================== */
.location { background: var(--ivory); padding-block: clamp(5rem, 12vw, 8rem); text-align: center; }
.location-inner { max-width: 720px; }

.location-cta { margin-top: 2rem; }

/* Connector between the CTA and the map: a thin line draws downward,
   ending in a small pin that gives one soft pulse once it "lands" — the
   path visually leads you from the button to the map instead of the map
   just appearing on its own. Google's embed is cross-origin, so nothing
   here touches the iframe itself; it's purely our own decoration sitting
   in the gap above it. */
.location-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 52px;
  margin-top: .3rem;
  /* Overrides the generic [data-animate] fade — the container itself
     shouldn't fade/slide, only the line and pin inside it should
     animate, timed purely off when this scrolls into view. */
  opacity: 1;
  transform: none;
  transition: none;
}
.location-path-line {
  width: 1.5px;
  height: 0;
  background: linear-gradient(to bottom, var(--gold), rgba(194, 164, 104, .15));
  transition: height .7s var(--ease) .1s;
}
.location-path.in-view .location-path-line { height: 30px; }

.location-path-pin {
  position: relative;
  width: 30px;
  height: 30px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .3s var(--ease) .75s, transform .4s var(--ease) .75s;
}
.location-path.in-view .location-path-pin { opacity: 1; transform: scale(1); }
.location-path-pin .icon { width: 14px; height: 14px; }
.location-path-pin::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
}
.location-path.in-view .location-path-pin::before {
  animation: locationPinPulse 2.4s var(--ease) 1.1s infinite;
}
@keyframes locationPinPulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Map "focuses in" rather than just fading up — overrides the generic
   [data-animate] transform (translateY only) with one that also scales,
   same trigger (.in-view), same timing. */
.location-map {
  margin-top: .6rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 16 / 9;
  transform: translateY(22px) scale(.96);
}
.location-map.in-view { transform: translateY(0) scale(1); }
.location-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(.15) contrast(1.02);
}

@media (min-width: 640px) {
  .location-map { aspect-ratio: 21 / 9; }
}

/* ==========================================================================
   Contato
   ========================================================================== */
.contact { background: var(--sand); padding-block: clamp(5rem, 12vw, 8rem); }

.contact-inner {
  display: grid;
  gap: 3.2rem;
}

.contact-text {
  color: var(--taupe-text);
  max-width: 420px;
  margin-top: 1.2rem;
}

.contact-links {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-weight: 600;
  font-size: .95rem;
  transition: color var(--dur-s) var(--ease), gap var(--dur-s) var(--ease);
}
.contact-links a:hover { color: var(--gold); gap: 1.1rem; }
.contact-links em { color: var(--taupe-text); font-style: italic; font-weight: 400; font-size: .82rem; }
.contact-links .icon { width: 1.3em; height: 1.3em; }

.contact-form {
  background: var(--ivory);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.field { display: flex; flex-direction: column; gap: .5rem; }
.field label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--taupe-text);
}
.field input {
  border: none;
  border-bottom: 1.5px solid rgba(140, 131, 120, .35);
  background: transparent;
  padding: .7rem .2rem;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--dur-s) var(--ease);
}
.field input::placeholder { color: rgba(140, 131, 120, .55); }
.field input:focus { border-color: var(--gold); outline: none; }

.form-submit { justify-content: center; margin-top: .6rem; }

@media (min-width: 900px) {
  .contact-inner { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  --footer-text: #CFC7BC;
  position: relative;
  background: var(--ink);
  color: var(--footer-text);
}
.site-footer::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--gold);
}

.footer-grid {
  padding-block: clamp(3rem, 7vw, 4.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.8rem;
  text-align: center;
}

.footer-col { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.footer-col--brand { gap: .6rem; }

.footer-col-title {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .2rem;
}

.footer-logo { display: inline-flex; }
.footer-signature {
  font-family: var(--font-script);
  font-size: 1.2rem;
  color: var(--gold);
}
.footer-location {
  display: block;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--taupe);
  transition: color var(--dur-s);
}
.footer-location:hover { color: var(--gold); }

.footer-links { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.footer-links a {
  font-size: .89rem;
  color: var(--footer-text);
  transition: color var(--dur-s);
}
.footer-links a:hover { color: var(--gold); }

.footer-social { display: flex; gap: 1.1rem; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: var(--footer-text);
  transition: border-color var(--dur-s), color var(--dur-s), transform var(--dur-s);
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.footer-social .icon { width: 1rem; height: 1rem; }

.footer-handles { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.footer-handles span { font-size: .85rem; color: var(--footer-text); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .09); }
.footer-bottom-inner {
  padding-block: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-align: center;
}
.footer-copy, .footer-policy { font-size: .77rem; color: var(--taupe); }
.footer-policy { transition: color var(--dur-s); }
.footer-policy:hover { color: var(--gold); }

/* Mobile/tablet only (desktop layout above, at 860px+, is untouched).
   Compact 2-up grid instead of one long stacked column: brand block
   full-width on top, Navegação + Contato side by side, Redes full-width
   below — everything left-aligned. */
@media (max-width: 859px) {
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 1.4rem;
    row-gap: 1.6rem;
    text-align: left;
    padding-block: clamp(2.2rem, 8vw, 3rem);
  }
  .footer-col {
    align-items: flex-start;
    text-align: left;
    gap: .7rem;
  }
  /* Explicit rows (not just column) so Navegação/Contato can't drift
     onto different rows regardless of browser auto-placement quirks. */
  .footer-col--brand { grid-column: 1 / -1; grid-row: 1; }
  .footer-col:nth-child(2) { grid-column: 1; grid-row: 2; }
  .footer-col:nth-child(3) { grid-column: 2; grid-row: 2; }
  .footer-col:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }

  .footer-links,
  .footer-handles {
    align-items: flex-start;
    text-align: left;
  }

  .footer-bottom-inner {
    padding-top: 1rem;
    /* Extra clearance so the fixed WhatsApp button (bottom-right, ~76px
       tall footprint) never sits on top of the © line once the page is
       scrolled all the way down. */
    padding-bottom: 6.5rem;
  }
}

@media (min-width: 860px) {
  .footer-grid {
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    text-align: left;
  }
  .footer-col { align-items: flex-start; }
  .footer-col--brand { flex: 1.3; }
  .footer-col:not(.footer-col--brand) { flex: 1; }
  .footer-links { align-items: flex-start; }
  .footer-handles { align-items: flex-start; }

  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.fab-whatsapp {
  --wa-green: #25D366;
  position: fixed;
  right: clamp(1.1rem, 3vw, 1.8rem);
  bottom: clamp(1.1rem, 3vw, 1.8rem);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(19, 128, 71, .55);
  z-index: 80;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.fab-whatsapp::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--wa-green);
  opacity: .5;
  animation: fabPulse 2.6s var(--ease) infinite;
}
.fab-whatsapp .icon { width: 30px; height: 30px; }
.fab-whatsapp:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 38px -10px rgba(19, 128, 71, .65); }

@keyframes fabPulse {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.25); opacity: 0; }
}

@media (max-width: 859px) {
  .fab-whatsapp { bottom: 1.5rem; }
}

/* ==========================================================================
   Section reveal base state safety (no-JS fallback)
   ========================================================================== */
.no-js [data-animate] { opacity: 1; transform: none; }

/* ==========================================================================
   Link-in-bio page (linktree.html)
   ========================================================================== */
.linktree-page {
  min-height: 100svh;
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(3.2rem, 10vw, 5rem) var(--gutter) 3rem;
  position: relative;
  overflow: hidden;
}

/* Same soft gold light-pool used behind the header logo, just larger,
   fixed to the viewport corners, and drifting slowly so the page feels
   alive without needing hover/scroll (most traffic here is mobile) —
   decorative only, hidden from a11y and pointer events. */
.linktree-page::before,
.linktree-page::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
}
.linktree-page::before {
  top: -12%;
  left: -18%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(194, 164, 104, .28) 0%, transparent 70%);
  animation: orbDrift-a 26s ease-in-out infinite;
}
.linktree-page::after {
  bottom: -18%;
  right: -18%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(227, 208, 196, .45) 0%, transparent 70%);
  animation: orbDrift-b 30s ease-in-out infinite;
}
@keyframes orbDrift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4vw, 5vw) scale(1.08); }
}
@keyframes orbDrift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4vw, -4vw) scale(1.1); }
}

.linktree-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

/* ---------- Entrance choreography ---------------------------------------
   One orchestrated reveal on load — avatar, then name, tagline, then
   each link in rhythm — instead of scattered hover tricks. Hover barely
   exists on a phone, so this single moment carries the "premium" feel. */
@keyframes linktreeReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.linktree-avatar { animation: linktreeReveal .7s var(--ease) both; }
.linktree-name { animation: linktreeReveal .7s var(--ease) .1s both; }
.linktree-tagline { animation: linktreeReveal .7s var(--ease) .2s both, taglineShine 6.5s linear infinite 1.7s; }
.linktree-links .linktree-link:nth-child(1) { animation: linktreeReveal .7s var(--ease) .34s both; }
.linktree-links .linktree-link:nth-child(2) { animation: linktreeReveal .7s var(--ease) .43s both; }
.linktree-links .linktree-link:nth-child(3) { animation: linktreeReveal .7s var(--ease) .52s both; }
.linktree-links .linktree-link:nth-child(4) { animation: linktreeReveal .7s var(--ease) .61s both; }
.linktree-links .linktree-link:nth-child(5) { animation: linktreeReveal .7s var(--ease) .70s both; }
.linktree-links .linktree-link:nth-child(6) { animation: linktreeReveal .7s var(--ease) .79s both; }
.linktree-footer { animation: linktreeReveal .7s var(--ease) .94s both; }

/* ---------- Avatar -------------------------------------------------------
   Kept deliberately quiet: a thin gold ring (static, like a frame) and a
   faint breathing glow behind it. An earlier version added a spinning
   conic-gradient ring plus a multi-step brightness flicker — read as a
   loading wheel / glitch rather than "premium", so both are gone. The
   only motion left is the shared entrance fade (.linktree-avatar
   inherits linktreeReveal) and this slow, low-amplitude glow. */
.linktree-avatar {
  position: relative;
  width: 112px;
  height: 112px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4.5px rgba(194, 164, 104, .5), var(--shadow-soft);
}
.linktree-avatar::before {
  content: '';
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 164, 104, .3) 0%, rgba(194, 164, 104, .1) 45%, transparent 75%);
  filter: blur(10px);
  animation: avatarAuraPulse 4.4s ease-in-out infinite;
}
.linktree-avatar img {
  width: 68%;
  height: auto;
}
@keyframes avatarAuraPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.035); }
}

.linktree-name {
  margin-top: 1.3rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  color: var(--ink);
}

/* Slow gold sheen sweeping through the script tagline — light catching
   foil, not a loading bar: long duration, linear, no pause needed since
   it's already gentle at this speed. */
.linktree-tagline {
  display: inline-block;
  margin-top: .35rem;
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 3.4vw, 1.4rem);
  background: linear-gradient(100deg, var(--gold) 25%, var(--gold-soft) 42%, #fff 50%, var(--gold-soft) 58%, var(--gold) 75%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@keyframes taglineShine {
  0% { background-position: 200% 0; }
  100% { background-position: -140% 0; }
}

.linktree-links {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.linktree-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(140, 131, 120, .25);
  background: var(--ivory);
  text-align: left;
  transition: transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.linktree-link:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--shadow-soft);
}
/* Tap feedback matters more than hover here — most visits are mobile,
   where :hover never fires but :active fires on every tap. */
.linktree-link:active {
  transform: scale(.96);
  transition-duration: .12s;
}

.linktree-link--primary {
  position: relative;
  overflow: hidden;
  background: var(--gold);
  border-color: var(--gold);
}
.linktree-link--primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
/* A single quiet light sweep across the primary CTA every few seconds —
   mostly at rest, one pass, then a long pause. Faster or looping tighter
   reads as a loading spinner instead of a shine. */
.linktree-link--primary::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg) translateX(-260%);
  animation: primaryShimmer 5.5s ease-in-out infinite 1.8s;
}
@keyframes primaryShimmer {
  0%, 20% { transform: skewX(-18deg) translateX(-260%); }
  38%, 100% { transform: skewX(-18deg) translateX(320%); }
}

.linktree-link-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 39, 35, .06);
  color: var(--ink);
}
.linktree-link--primary .linktree-link-icon { background: rgba(255, 255, 255, .4); }
.linktree-link-icon .icon { width: 1.25em; height: 1.25em; }

.linktree-link-text { flex: 1; min-width: 0; }
.linktree-link-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .98rem;
  color: var(--ink);
}
.linktree-link-subtitle {
  margin-top: .1rem;
  font-size: .82rem;
  color: var(--taupe-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linktree-link--primary .linktree-link-subtitle { color: rgba(43, 39, 35, .72); }

.linktree-link-arrow {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  color: var(--taupe);
  opacity: .7;
  transition: transform var(--dur-s) var(--ease);
}
.linktree-link:hover .linktree-link-arrow { transform: translate(2px, -2px); }
.linktree-link--primary .linktree-link-arrow { color: var(--ink); }

.linktree-footer {
  position: relative;
  z-index: 1;
  margin-top: 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}

/* Small brand lockup — logo chip + name side by side, nothing else. The
   logo's neon-white strokes only read against a dark ground (see the
   header/footer, which are both ink-colored for exactly this reason), so
   the chip stays small and dark rather than sitting bare on the ivory
   page background. */
.linktree-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  transition: opacity var(--dur-s) var(--ease);
}
.linktree-footer-brand:active { opacity: .7; }
.linktree-footer-logo {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.linktree-footer-logo img { width: 65%; height: auto; display: block; }
.linktree-footer-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink);
}

.linktree-footer p { font-size: .76rem; color: var(--taupe-text); }