/* ==========================================================================
   TMR — components.css
   Nav, buttons, screenshot frames, forms, accordion, lightbox, price rows,
   sticky action bar, footer, shared CTA band, testimonials (dormant).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s8);
  min-height: 48px;
  padding: var(--s12) var(--s24);
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease,
              color var(--t-fast) ease, opacity var(--t-fast) ease;
}

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { opacity: 0.86; }

.btn--ghost { border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--text); }

.btn--wa { background: var(--whatsapp); color: var(--whatsapp-ink); font-weight: 500; }
.btn--wa:hover { opacity: 0.88; }

.btn--wide { width: 100%; }
.btn--lg { min-height: 56px; padding-inline: var(--s32); }

/* Quiet WhatsApp text link (hero) */
.wa-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  min-height: 44px;
  color: var(--text-muted);
  transition: color var(--t-fast) ease;
}
.wa-link:hover { color: var(--text); }
.wa-link .icon-wa { width: 18px; height: 18px; fill: var(--whatsapp); stroke: none; flex: none; }

.icon-wa { width: 1.15em; height: 1.15em; fill: currentColor; stroke: none; flex: none; }

/* --------------------------------------------------------------------------
   2. TAGS / PILLS
   -------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--s8); }

.tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  padding: var(--s8) var(--s12);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-nav) ease, border-color var(--t-nav) ease;
}

.nav.is-stuck {
  background: rgba(8, 9, 10, 0.72);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Phones: the blur is repainted on every scroll frame, which is exactly
   where a mid-range Android GPU drops frames. An opaque bar looks the same
   on a dark page and costs nothing. The nav also slides away while you scroll
   down (main.js) and comes straight back when you scroll up. */
@media (max-width: 767px) {
  .nav { transition: background-color var(--t-nav) ease, border-color var(--t-nav) ease,
                     transform var(--t-nav) var(--ease); }
  .nav.is-stuck {
    background: rgba(8, 9, 10, 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav.is-away { transform: translateY(-100%); }
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s24);
  width: 100%;
}

.nav__brand { display: flex; align-items: baseline; gap: var(--s12); min-height: 44px; padding-block: var(--s8); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.nav__lockup { display: none; }
@media (min-width: 480px) { .nav__lockup { display: block; } }

.nav__links { display: none; }

@media (min-width: 1024px) {
  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--s32);
  }
  .nav__links a {
    font-size: 0.9375rem;
    color: var(--text-muted);
    transition: color var(--t-fast) ease;
    padding-block: var(--s12);
  }
  .nav__links a:hover { color: var(--text); }
}

.nav__actions { display: flex; align-items: center; gap: var(--s12); }
.nav__cta { display: none; }
@media (min-width: 768px) { .nav__cta { display: inline-flex; min-height: 44px; padding: var(--s8) var(--s16); font-size: 0.9375rem; } }

.nav__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  font-size: 0.9375rem;
  color: var(--text-muted);
  min-height: 44px;
  transition: color var(--t-fast) ease;
}
.nav__back:hover { color: var(--text); }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-btn);
  border: 1px solid var(--border);
  color: var(--text);
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger .icon { width: 20px; height: 20px; }

/* Full-screen mobile overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: var(--s24);
  padding-bottom: calc(var(--s24) + env(safe-area-inset-bottom));
}
.menu[hidden] { display: none; }

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-h);
}

.menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--s24);
  margin-top: var(--s48);
  flex: 1;
}
.menu__links a {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.menu__foot { display: grid; gap: var(--s12); }

/* --------------------------------------------------------------------------
   4. STICKY MOBILE ACTION BAR
   -------------------------------------------------------------------------- */
.actionbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  padding: var(--s8) var(--s16);
  padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom));
  background: rgba(8, 9, 10, 0.96);
  border-top: 1px solid var(--border);
  transition: transform var(--t-nav) var(--ease);
}
/* Always on. The only time it steps aside is while a form field has focus,
   so it can never sit on top of the input someone is typing into or ride up
   on the keyboard. main.js toggles this class. */
.actionbar.is-hidden { transform: translateY(110%); }
.actionbar .btn { min-height: 48px; font-size: 1rem; padding-inline: var(--s16); }

@media (min-width: 1024px) { .actionbar { display: none; } }

/* Space for the bar is reserved on the whole page, not just the footer, and
   anchor jumps and keyboard focus stop short of it — so the bar never covers
   the last line of the page or a field that has just been focused. */
@media (max-width: 1023px) {
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--s16)); }
}

/* --------------------------------------------------------------------------
   5. SCREENSHOT FRAMES
   -------------------------------------------------------------------------- */
.shot { margin: 0; }

.shot__frame {
  display: block;
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: var(--shadow-2);
  transition: transform var(--t-fast) ease, border-color var(--t-fast) ease;
}
.shot__frame img { width: 100%; height: auto; display: block; }

button.shot__frame { padding: 0; cursor: zoom-in; }
button.shot__frame:hover { transform: scale(1.01); border-color: var(--border-strong); }

.shot__cap {
  display: block;
  margin-top: var(--s12);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Wide dashboards on small screens: scroll rather than shrink to mush */
.shot--wide .shot__scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r12);
  background: var(--bg-raised);
  -webkit-overflow-scrolling: touch;
}
.shot--wide .shot__scroll > .shot__frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 720px;
}
.shot__hint {
  display: block;
  margin-top: var(--s8);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
@media (min-width: 768px) {
  .shot--wide .shot__scroll { overflow-x: visible; border: 0; border-radius: 0; background: none; }
  .shot--wide .shot__scroll > .shot__frame {
    border: 1px solid var(--border);
    border-radius: var(--r12);
    box-shadow: var(--shadow-2);
    min-width: 0;
  }
  .shot__hint { display: none; }
}

/* Placeholder that preserves the exact aspect ratio of a missing asset */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s24);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  aspect-ratio: var(--ph-ratio, 4 / 5);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   6. LIGHTBOX
   -------------------------------------------------------------------------- */
.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--text);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(8, 9, 10, 0.92); }

.lightbox__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s16);
  gap: var(--s12);
  opacity: 0;
  transition: opacity var(--t-nav) ease;
}
.lightbox[open] .lightbox__inner { opacity: 1; }

.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s16); }

.lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  color: var(--text);
  flex: none;
}
.lightbox__close .icon { width: 18px; height: 18px; }

.lightbox__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r12);
  border: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   7. ACCORDION (details / summary)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); }

.faq__item { border-bottom: 1px solid var(--border); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s24);
  padding-block: var(--s24);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color var(--t-fast) ease;
  min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--text-muted); }

@media (min-width: 768px) { .faq__q { font-size: 1.1875rem; } }

.faq__sign {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 6px;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--text-muted);
  transition: transform var(--t-accordion) var(--ease), opacity var(--t-accordion) var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(90deg) scaleX(0); opacity: 0; }

.faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-accordion) var(--ease);
}
.faq__item[open] .faq__body { grid-template-rows: 1fr; }
.faq__body > div { overflow: hidden; }
.faq__body p {
  color: var(--text-muted);
  max-width: 62ch;
  padding-bottom: var(--s24);
}

/* --------------------------------------------------------------------------
   8. PRICE ROWS
   -------------------------------------------------------------------------- */
.price-group { padding-block: var(--s32); border-bottom: 1px solid var(--border); }
.price-group:first-of-type { border-top: 1px solid var(--border); }

.price-group__head {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin-bottom: var(--s16);
}
@media (min-width: 768px) {
  .price-group__head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s32);
  }
}

.price-value {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text);
  white-space: nowrap;
}
.price-value--quiet { color: var(--text-muted); }

.price-group--quiet .price-group__head { opacity: 0.82; }

.price-note {
  margin-top: var(--s32);
  color: var(--text-muted);
  max-width: 62ch;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s24); }

.field { display: grid; gap: var(--s8); }

.field__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}
.field__req { color: var(--text-muted); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  font-size: 16px;
  line-height: 1.4;
  padding: var(--s12) var(--s16);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--s8);
  color: var(--text);
  transition: border-color var(--t-fast) ease;
  -webkit-appearance: none;
  appearance: none;
}
.textarea { min-height: 140px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }

.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s48);
}
.select option { background: var(--bg-raised); color: var(--text); }

[aria-invalid='true'] { border-color: #FF6B6B; }

.field__error {
  font-size: 0.875rem;
  color: #FF8A8A;
  min-height: 0;
}
.field__error:empty { display: none; }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s12);
  cursor: pointer;
  min-height: 44px;
  padding-block: var(--s8);
}
.check input {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  accent-color: var(--text);
}
.check span { font-size: 0.9375rem; color: var(--text-muted); }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status {
  border: 1px solid var(--border);
  border-radius: var(--s8);
  padding: var(--s16);
  background: var(--bg-inset);
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.form__status:empty { display: none; }
.form__status[data-state='ok'] { border-color: rgba(37, 211, 102, 0.4); color: var(--text); }
.form__status[data-state='error'] { border-color: rgba(255, 107, 107, 0.4); color: var(--text); }

/* --------------------------------------------------------------------------
   10. CONTACT CHANNEL BLOCKS
   -------------------------------------------------------------------------- */
.channel {
  display: flex;
  align-items: center;
  gap: var(--s16);
  min-height: 56px;
  padding: var(--s16);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  background: var(--bg-inset);
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.channel:hover { border-color: var(--border-strong); }
.channel__icon { flex: none; width: 24px; height: 24px; }
.channel__text { display: grid; gap: 2px; min-width: 0; }
.channel__text b { font-weight: 500; font-size: 1rem; }
.channel__text span { font-size: 0.875rem; color: var(--text-muted); overflow-wrap: anywhere; }

.channel--wa { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--whatsapp-ink); }
.channel--wa:hover { opacity: 0.9; border-color: var(--whatsapp); }
.channel--wa .channel__text span { color: rgba(6, 17, 10, 0.72); }
.channel--wa .channel__icon { fill: var(--whatsapp-ink); stroke: none; }

/* --------------------------------------------------------------------------
   11. SHARED CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { border-top: 1px solid var(--border); background: var(--bg-raised); }
.cta-band__inner { display: grid; gap: var(--s32); }
@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--s64);
  }
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-top: var(--s64);
}

.footer__grid { display: grid; gap: var(--s48); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s64); } }

.footer__col h2 { font-size: 0.6875rem; }
.footer__list { display: grid; gap: var(--s12); }
.footer__list a {
  color: var(--text-muted);
  font-size: 0.9375rem;
  transition: color var(--t-fast) ease;
  display: inline-block;
  min-height: 24px;
}
.footer__list a:hover { color: var(--text); }

.footer__bottom {
  margin-top: var(--s64);
  border-top: 1px solid var(--border);
  padding-block: var(--s24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s16);
  align-items: center;
  justify-content: space-between;
}
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* --------------------------------------------------------------------------
   13. TESTIMONIALS — dormant. The markup is commented out in the pages;
       this CSS is deliberately unused until real testimonials exist.
   -------------------------------------------------------------------------- */
.testimonials { display: grid; gap: var(--s32); }
@media (min-width: 900px) { .testimonials { grid-template-columns: repeat(3, 1fr); gap: var(--s48); } }

.testimonial { border-top: 1px solid var(--border); padding-top: var(--s24); }
.testimonial blockquote { font-size: 1.0625rem; line-height: 1.55; color: var(--text); max-width: 42ch; }
.testimonial figcaption { margin-top: var(--s16); }
.testimonial figcaption b { display: block; font-weight: 500; font-size: 0.9375rem; }
.testimonial figcaption span { font-size: 0.875rem; color: var(--text-muted); }

/* Footer + CTA spacing helpers (kept here so no page needs an inline style) */
.footer__pitch { max-width: 34ch; margin-top: var(--s12); }
.footer__sub { margin-top: var(--s32); }
.cta-band__lead { margin-top: var(--s16); }

/* On a narrow phone the two hero buttons stay on one row rather than stacking. */
@media (max-width: 420px) {
  .hero__buttons .btn--lg { padding-inline: var(--s16); flex: 1 1 auto; }
}

/* Spacing for the testimonial block, for when it is activated. */
.testimonials--spaced { margin-top: var(--s96); }