/* ============================================================
   COMPONENTS — buttons, nav, footer, cards, floats
   Shared across every page. Becomes WP template parts later.
   ============================================================ */

/* ---------------- Buttons ---------------- */
.btn {
  --btn-py: 1.05em;
  --btn-px: 1.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-capsule);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Primary — gold gradient */
.btn--primary {
  background: var(--gold-gradient);
  color: #fff7ea;
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { box-shadow: 0 16px 38px rgba(143, 106, 60, 0.38); }

/* Secondary — dark espresso */
.btn--dark {
  background: var(--espresso);
  color: var(--porcelain);
}
.btn--dark:hover { background: var(--night); }

/* Tertiary — outlined */
.btn--outline {
  background: transparent;
  color: var(--espresso);
  border-color: var(--champagne);
}
.btn--outline:hover { border-color: var(--gold-dark); background: rgba(195,154,94,0.07); }

/* On dark sections */
.bg-night .btn--outline, .bg-espresso .btn--outline {
  color: var(--porcelain);
  border-color: rgba(226, 196, 146, 0.5);
}
.bg-night .btn--outline:hover, .bg-espresso .btn--outline:hover {
  border-color: var(--gold-light); background: rgba(226,196,146,0.1);
}

.btn--sm { --btn-py: 0.85em; --btn-px: 1.4em; font-size: 0.7rem; }
.btn--block { width: 100%; }

/* WhatsApp variant */
.btn--whatsapp { background: #1f8a5b; color: #fff; }
.btn--whatsapp:hover { background: #1a7a50; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: 0.85em; }
.bg-night .link-arrow, .bg-espresso .link-arrow { color: var(--gold-light); }

/* ---------------- Announcement bar ---------------- */
.announce {
  background: var(--night);
  color: var(--gold-light);
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.7em var(--gutter);
  position: relative;
  z-index: calc(var(--z-nav) + 1);
}
.announce b { color: #fff7ea; font-weight: 600; }
.announce .dot { opacity: 0.5; margin-inline: 0.7em; }

/* ---------------- Navigation ---------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--ivory) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav.is-scrolled { background: color-mix(in srgb, var(--ivory) 96%, transparent); box-shadow: var(--shadow-sm); }
.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand__mark { width: auto; height: 46px; flex: none; }
.footer__brand .footer__logo { height: 96px; width: auto; margin-bottom: 0.4rem; }
.brand__text {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--espresso);
  line-height: 1.05;
}
.brand__text small { display: block; font-size: 0.56rem; letter-spacing: 0.42em; color: var(--gold-dark); margin-top: 3px; }

.nav__menu { display: flex; align-items: center; gap: clamp(0.9rem, 0.2rem + 1.3vw, 1.9rem); }
.nav__link {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: 0.4em 0;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--gold-dark);
  transition: width var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--espresso); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--espresso); }

.nav__right { display: flex; align-items: center; gap: 1.1rem; }
.nav__ig { color: var(--gold-dark); display: inline-flex; transition: color var(--dur-fast) var(--ease); }
.nav__ig:hover { color: var(--espresso); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 50%;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 18px; height: 1.5px; background: var(--espresso);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(4.5px); }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform: rotate(-45deg); }

/* ---------------- Cards ---------------- */
.card {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.card:hover, .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--champagne); }
.card--dark { background: rgba(255,255,255,0.03); border-color: var(--line-light); }

.icon-badge {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold-gradient-soft);
  color: var(--gold-dark);
  border: 1px solid var(--line);
}
.icon-badge svg { width: 24px; height: 24px; }

/* Price row */
.price-row {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.price-row__name { font-family: var(--font-display); font-size: 1.2rem; color: var(--espresso); }
.price-row__dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.price-row__price { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; color: var(--gold-dark); white-space: nowrap; }
.price-row__note { display: block; font-size: 0.8rem; color: color-mix(in srgb, var(--ink) 65%, transparent); font-weight: 400; letter-spacing: normal; }

/* Pill / tag */
.pill {
  display: inline-block;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.5em 1em;
  border-radius: var(--radius-capsule);
  background: var(--blush);
  color: var(--gold-dark);
}
.pill--gold { background: var(--gold-gradient); color: #fff7ea; }
.pill--outline { background: transparent; border: 1px solid var(--champagne); color: var(--gold-dark); }
.bg-night .pill--outline, .bg-espresso .pill--outline { color: var(--gold-light); border-color: rgba(226,196,146,0.4); }
.pill--dark { background: rgba(20,14,8,0.78); color: var(--porcelain); border: 1px solid rgba(226,196,146,0.35); backdrop-filter: blur(4px); }
.pill--ghost { background: transparent; color: var(--porcelain); border: 1px solid rgba(255,255,255,0.55); }

/* ---------------- Floating WhatsApp ---------------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 1.25em 0.85em 0.95em;
  background: #1f8a5b;
  color: #fff;
  border-radius: var(--radius-capsule);
  box-shadow: 0 12px 30px rgba(31, 138, 91, 0.4);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wa-float:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 36px rgba(31,138,91,0.5); }
.wa-float svg { width: 22px; height: 22px; flex: none; }
.wa-float__label { display: inline; }
@media (max-width: 560px) {
  .wa-float { padding: 0.95em; border-radius: 50%; }
  .wa-float__label { display: none; }
}

/* ---------------- Footer ---------------- */
.footer { background: var(--night); color: color-mix(in srgb, var(--porcelain) 78%, transparent); }
.footer a { transition: color var(--dur-fast) var(--ease); }
.footer a:hover { color: var(--gold-light); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}
.footer__brand .brand__text { color: var(--porcelain); }
.footer__brand p { margin-top: 1.2rem; max-width: 34ch; font-size: 0.92rem; }
.footer__col h5 {
  font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 1.2rem;
}
.footer__col li + li { margin-top: 0.7rem; }
.footer__col a { font-size: 0.92rem; }
.footer__social { display: flex; gap: 0.8rem; margin-top: 1.4rem; }
.footer__social a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-light);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-light);
}
.footer__social a:hover { border-color: var(--gold-light); background: rgba(226,196,146,0.08); }
.footer__bar {
  border-top: 1px solid var(--line-light);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  font-size: 0.78rem; letter-spacing: 0.04em;
}
.footer__bar nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ---------------- Mobile nav ---------------- */
@media (max-width: 940px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 360px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: calc(var(--nav-h) + 2rem) 2rem 2rem;
    background: var(--ivory);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
  }
  .nav.is-open .nav__menu { transform: translateX(0); }
  .nav__link { font-size: 0.92rem; padding: 0.7em 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav__menu .btn { margin-top: 1rem; }
  .nav-backdrop {
    position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
    background: rgba(27,19,11,0.4); opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  }
  .nav.is-open ~ .nav-backdrop, body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
}

@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer__grid { grid-template-columns: 1fr; }
  .brand__text { font-size: 0.92rem; }
}