/* ============================================================================
   ATIVA PILATES — components.css
   ==========================================================================*/

/* ---------------------------------------------------------------- grain  */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ preloader  */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--bg-deep);
  color: var(--sage-100);
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
html:not(.js) .preloader { display: none; }

.preloader__inner { display: grid; justify-items: center; gap: 1.1rem; }
.preloader__mark { inline-size: 78px; block-size: 78px; }
.preloader .pl-p {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: draw 1.05s var(--ease-out) forwards;
}
.preloader .pl-p:nth-child(2) { animation-delay: .1s; }
.preloader .pl-p:nth-child(3) { animation-delay: .2s; }
.preloader .pl-p:nth-child(4) { animation-delay: .3s; }

.preloader__word {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: .05em;
  opacity: 0;
  animation: fade-up .7s var(--ease-out) .5s forwards;
}
@keyframes fade-up { from { opacity: 0; transform: translate3d(0,8px,0); } to { opacity: 1; transform: none; } }

.preloader__bar {
  inline-size: 120px;
  block-size: 2px;
  background: rgba(233, 238, 222, .2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.preloader__bar span {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: var(--sage-200);
  transform-origin: left;
  transform: scaleX(0);
  animation: load 1.25s var(--ease-in-out) .2s forwards;
}
@keyframes load { to { transform: scaleX(1); } }

/* --------------------------------------------------------------- brand   */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-block-size: 44px;
}
.brand__mark {
  inline-size: 42px;
  block-size: 42px;
  color: var(--accent);
  flex: none;
  transition: transform .8s var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(90deg); }
.brand__text { display: grid; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.brand__sub {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: .2rem;
}

/* -------------------------------------------------------------- buttons  */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-block-size: 48px;
  padding: .8rem 1.5rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.btn svg { inline-size: 18px; block-size: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: 60ms; }

/* sheen sweep on hover — transform only */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .75s var(--ease-out);
}
.btn:hover::after { transform: translateX(110%); }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-contrast);
  --btn-bd: var(--accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); box-shadow: var(--shadow-glow); }

.btn--outline { --btn-bd: var(--line-strong); --btn-fg: var(--text); }
.btn--outline:hover { --btn-bd: var(--accent); --btn-fg: var(--accent); --btn-bg: var(--accent-soft); }

.btn--ghost { --btn-fg: var(--text); --btn-bd: transparent; }
.btn--ghost:hover { --btn-bg: var(--accent-soft); --btn-fg: var(--accent); }

.btn--light { --btn-bg: var(--cream-100); --btn-fg: var(--sage-800); --btn-bd: var(--cream-100); }
.btn--light:hover { --btn-bg: #FFFFFF; --btn-bd: #FFFFFF; box-shadow: 0 18px 44px rgba(0,0,0,.3); }

.btn--ghost-light { --btn-fg: var(--text-on-deep); --btn-bd: var(--line-on-deep); }
.btn--ghost-light:hover { --btn-bg: rgba(255,255,255,.1); --btn-bd: rgba(255,255,255,.36); }

.btn--sm { min-block-size: 44px; padding: .6rem 1.15rem; font-size: var(--fs-xs); }
.btn--lg { min-block-size: 56px; padding: 1rem 2rem; font-size: var(--fs-body); }
.btn--block { display: flex; inline-size: 100%; }

/* icon-only buttons keep a 44px hit area and always carry an aria-label    */
.icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-pill);
  color: var(--text);
  border: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.icon-btn svg { inline-size: 20px; block-size: 20px; }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn:active { transform: scale(.94); }
.icon-btn--outline { border-color: var(--line-strong); }
.icon-btn--outline:hover { border-color: var(--accent); }
.icon-btn:disabled { opacity: .38; pointer-events: none; }

/* --------------------------------------------------------------- header  */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  block-size: var(--nav-h);
  transition: block-size var(--dur-base) var(--ease-out);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}
.site-header.is-stuck .site-header__inner { block-size: 66px; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition-property: background-color, box-shadow, transform; }

/* hero is dark, so the header inverts until it sticks */
.site-header:not(.is-stuck) .brand__name,
.site-header:not(.is-stuck) .nav__link,
.site-header:not(.is-stuck) .icon-btn { color: var(--sage-50); }
.site-header:not(.is-stuck) .brand__sub { color: var(--sage-300); }
.site-header:not(.is-stuck) .brand__mark { color: var(--sage-200); }
.site-header:not(.is-stuck) .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

.site-header__progress {
  block-size: 2px;
  background: transparent;
}
.site-header__progress span {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--gold-deco));
}

.nav__list { display: flex; align-items: center; gap: .3rem; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0 .85rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: .85rem;
  inline-size: calc(100% - 1.7rem);
  block-size: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover, .nav__link.is-active { color: var(--accent); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.site-header:not(.is-stuck) .nav__link:hover,
.site-header:not(.is-stuck) .nav__link.is-active { color: #fff; }

.site-header__actions { display: flex; align-items: center; gap: .5rem; }
.menu-btn { display: none; }

@media (max-width: 1024px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .site-header__cta { display: none; }
}

/* ---------------------------------------------------------- mobile menu  */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 28, 19, .5);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.mobile-menu.is-open::before { opacity: 1; }

.mobile-menu__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(420px, 100%);
  padding: 1.1rem var(--gutter) calc(1.6rem + env(safe-area-inset-bottom));
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .46s var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.mobile-menu.is-open .mobile-menu__panel { transform: none; }

.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__list { display: grid; gap: .2rem; }
.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  min-block-size: 56px;
  padding-block: .5rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  border-block-end: 1px solid var(--line);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), color var(--dur-base);
}
.mobile-menu.is-open .mobile-menu__list a { opacity: 1; transform: none; }
.mobile-menu__list li:nth-child(1) a { transition-delay: .10s; }
.mobile-menu__list li:nth-child(2) a { transition-delay: .15s; }
.mobile-menu__list li:nth-child(3) a { transition-delay: .20s; }
.mobile-menu__list li:nth-child(4) a { transition-delay: .25s; }
.mobile-menu__list li:nth-child(5) a { transition-delay: .30s; }
.mobile-menu__list li:nth-child(6) a { transition-delay: .35s; }
.mobile-menu__list li:nth-child(7) a { transition-delay: .40s; }
.mobile-menu__list a:hover { color: var(--accent); }
.mobile-menu__idx {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--accent);
}
.mobile-menu__foot { margin-block-start: auto; display: grid; gap: var(--space-md); }
.mobile-menu__addr { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------- rating  */
.rating { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rating__stars { display: inline-flex; gap: .12rem; color: var(--gold-deco); }
.rating__stars svg { inline-size: 17px; block-size: 17px; }
.rating__text { font-size: var(--fs-sm); }
.rating__text strong { font-weight: 700; }

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: .6rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------- cards   */
.feature-card,
.mod-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
}
.feature-card { padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.feature-card:hover,
.mod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--sage-300); }

.feature-card__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--space-md);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  transition: transform .5s var(--ease-spring);
}
.feature-card:hover .feature-card__icon { transform: rotate(-8deg) scale(1.06); }
.feature-card__icon svg { inline-size: 26px; block-size: 26px; }
.feature-card h3 { margin-block-end: .5rem; }
.feature-card p { font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- tags   */
.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: var(--space-md); }
.tag-list li {
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- stats   */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-xl);
  border-block-start: 1px solid var(--line);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-block-start: .45rem;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-muted);
}

/* ------------------------------------------------------------ accordion  */
.accordion { display: grid; gap: .6rem; }
.acc {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.acc.is-open { border-color: var(--sage-300); box-shadow: var(--shadow-sm); }
.acc h3 { font: inherit; }
.acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  inline-size: 100%;
  min-block-size: 60px;
  padding: 1rem 1.25rem;
  text-align: start;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  transition: color var(--dur-base) var(--ease-out);
}
.acc__trigger:hover { color: var(--accent); }
.acc__icon {
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  color: var(--accent);
  transition: transform .4s var(--ease-spring);
}
.acc.is-open .acc__icon { transform: rotate(135deg); }

/* grid-template-rows animates without touching layout height directly      */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease-out);
}
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner p {
  padding: 0 1.25rem 1.25rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------- carousel  */
.carousel { margin-block-start: var(--space-xl); }
.carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: .4rem;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: var(--space-lg); }

.testimonial {
  scroll-snap-align: center;
  flex: 0 0 min(430px, 82vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.testimonial.is-current { box-shadow: var(--shadow-md); }
.testimonial__quote { inline-size: 30px; block-size: 30px; color: var(--sage-300); flex: none; }
.testimonial__text p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  line-height: 1.45;
}
.testimonial__who {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block-start: auto;
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--line);
}
.avatar {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.testimonial__name { display: block; font-weight: 600; font-size: var(--fs-sm); }
.testimonial__meta { display: block; font-size: var(--fs-xs); color: var(--text-soft); }

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}
.carousel__dots { display: flex; gap: .5rem; }
.carousel__dot {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
}
.carousel__dot::before {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background-color var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.carousel__dot[aria-selected="true"]::before { background: var(--accent); transform: scale(1.35); }
.carousel__arrows { display: flex; gap: .5rem; }

/* ---------------------------------------------------------------- forms  */
.form {
  display: grid;
  gap: var(--space-lg);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.form__intro { font-size: var(--fs-sm); color: var(--text-muted); }

.field { display: grid; gap: .35rem; }
.field__label { font-size: var(--fs-sm); font-weight: 600; }
.field__optional { font-weight: 400; color: var(--text-soft); }
.field__input {
  min-block-size: 48px;
  padding: .75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  color: var(--text);
  font-size: var(--fs-body);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.field__input::placeholder { color: var(--text-soft); }
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field__input--area { min-block-size: 96px; resize: vertical; }
.field__input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%235A6450' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-inline-end: 2.6rem;
}
.field__hint { font-size: var(--fs-xs); color: var(--text-soft); }
/* Errors sit next to the field they belong to, never only in a summary.    */
.field__error {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #A33A28;
}
.field.has-error .field__input { border-color: #A33A28; }
.field.has-error .field__hint { display: none; }

.form__status { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); min-block-size: 1.2em; }
.form__privacy { font-size: var(--fs-xs); color: var(--text-soft); }

/* --------------------------------------------------------------- marquee */
.marquee {
  overflow: hidden;
  padding-block: 1.1rem;
  background: var(--sage-800);
  color: var(--sage-100);
  border-block: 1px solid rgba(255,255,255,.07);
}
.marquee__track { display: flex; inline-size: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; }
.marquee__group span {
  padding-inline: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.85rem);
  white-space: nowrap;
}
.marquee__group svg { inline-size: 15px; block-size: 15px; opacity: .6; flex: none; }

/* ------------------------------------------------------------- floating  */
.floating {
  position: fixed;
  inset-block-end: max(1.1rem, env(safe-area-inset-bottom));
  inset-inline-end: 1.1rem;
  z-index: 90;
  display: grid;
  gap: .6rem;
  justify-items: end;
}
.fab {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
}
.fab svg { inline-size: 26px; block-size: 26px; position: relative; z-index: 1; }
.fab:hover { transform: scale(1.07); }
.fab:active { transform: scale(.95); }
.fab--wa { background: #1FA855; color: #fff; }
.fab--top {
  inline-size: 46px;
  block-size: 46px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}
.fab--top svg { inline-size: 20px; block-size: 20px; }
.fab--top.is-visible { opacity: 1; visibility: visible; transform: none; }

.fab__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #1FA855;
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}
.fab__tip {
  position: absolute;
  inset-inline-end: calc(100% + .6rem);
  white-space: nowrap;
  padding: .45rem .8rem;
  border-radius: var(--r-sm);
  background: var(--sage-900);
  color: var(--sage-50);
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.fab--wa:hover .fab__tip, .fab--wa:focus-visible .fab__tip { opacity: 1; transform: none; }
@media (max-width: 640px) { .fab__tip { display: none; } }

/* ------------------------------------------------------------- lightbox  */
.lightbox {
  inline-size: min(1000px, 92vw);
  max-block-size: 90vh;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.lightbox::backdrop { background: rgba(20, 24, 17, .78); backdrop-filter: blur(6px); }
.lightbox__close {
  position: absolute;
  inset-block-start: .6rem;
  inset-inline-end: .6rem;
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--line);
}
.lightbox__fig img { inline-size: 100%; max-block-size: 76vh; object-fit: contain; background: var(--sage-800); }
.lightbox__fig figcaption {
  padding: .9rem 1.25rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-block-start: 1px solid var(--line);
}

/* --------------------------------------------------------------- links   */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-block-size: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}
.link-arrow svg { inline-size: 16px; block-size: 16px; transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.prose p + p { margin-block-start: var(--space-md); }
.prose { color: var(--text-muted); }
.prose strong { color: var(--text); font-weight: 600; }