/* =============================================================
   Ciclo — Reusable component primitives
   Buttons + small atoms shared across landing and future pages.
   Section-specific styles live in landing.css.
   ============================================================= */

/* ---------- Button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: transform 160ms var(--ease-out),
              background-color 160ms var(--ease-out),
              color 160ms var(--ease-out),
              border-color 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-ink {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 14, 20, 0.18), 0 8px 18px -10px rgba(11, 14, 20, 0.45);
}
.btn-ink:hover {
  background: #000713; border-color: #000713;
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(11, 14, 20, 0.18), 0 12px 24px -10px rgba(11, 14, 20, 0.5);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--bright-white); }

.btn-brand {
  /* --brand-deep, not --brand: white text on --brand is 3.93:1 (fails AA);
     white on --brand-deep is 6.32:1. See tokens.css brand comment. */
  background: var(--brand-deep);
  color: #FFFFFF;
  border-color: var(--brand-deep);
  box-shadow: 0 1px 2px rgba(29, 41, 61, 0.08), 0 4px 8px -2px rgba(29, 41, 61, 0.08);
}
.btn-brand:hover {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(29, 41, 61, 0.08), 0 8px 14px -4px rgba(29, 41, 61, 0.12);
}

.btn-arrow::after {
  content: '↗';
  font-family: var(--font-mono);
  font-weight: 400;
  margin-left: 2px;
  transition: transform 160ms var(--ease-out);
}
.btn-arrow:hover::after { transform: translate(2px, -2px); }

/* ---------- sr-only — visually-hidden but screen-reader-legible ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Thread — the conversation-as-UI primitive ----------
   The recurring visual form of the page: hero, arc, AI-assistant section.
   Own palette only — no WhatsApp green, no bubble tails, no device chrome.
   Type sizes are fixed px (not viewport-relative) so a single component
   reads cleanly whether it sits in a 390px mobile column or the arc's
   ~570px desktop column. */

.thread-frame {
  background: var(--off-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(16px, 4vw, 28px);
}

.thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.thread-msg { display: flex; }
.thread-msg--customer { justify-content: flex-start; }
.thread-msg--ciclo { justify-content: flex-end; }

.thread-bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 78%;
  padding: 10px 14px;
  border-radius: var(--radius-xl);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
}

.thread-text { white-space: pre-wrap; }

.thread-msg--customer .thread-bubble {
  background: var(--bright-white);
  border: 1px solid var(--hairline);
  color: var(--ink);
}

.thread-msg--ciclo .thread-bubble {
  /* --brand-deep, not --brand — see tokens.css brand comment; white text
     on --brand is 3.93:1 (fails AA), on --brand-deep it's 6.32:1. */
  background: var(--brand-deep);
  color: var(--bright-white);
}

.thread-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
}
.thread-divider-line {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.thread-divider-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--body-muted);
  white-space: nowrap;
}