/* =========================================================
   Respondo — English (US) site: additive styles only.
   Loads AFTER respondo.css. Reuses all base tokens/classes;
   adds only what the EN pages need (primary button, language
   toggle, service/link cards). Does NOT touch the ES styles.
   ========================================================= */

/* Primary (indigo) button — EN CTAs use email, not WhatsApp green */
.btn-primary{
  background:linear-gradient(180deg,#5b52ec,var(--indigo-deep));
  color:#fff;
  box-shadow:0 14px 30px -12px rgba(79,70,229,.55);
}
.btn-primary:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 18px 40px -12px rgba(79,70,229,.7), 0 0 0 6px rgba(79,70,229,.15);
}

/* Language toggle (EN | ES) */
.lang-toggle{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--border-2); border-radius:999px;
  padding:3px; background:var(--surface); font-size:13px; font-weight:700;
}
.lang-toggle a{
  padding:5px 11px; border-radius:999px; color:var(--muted);
  text-decoration:none; line-height:1; transition:background .2s ease, color .2s ease;
}
.lang-toggle a.active{ background:var(--indigo-soft); color:var(--indigo); }
.lang-toggle a:hover{ color:var(--indigo); }
.nav-cta .lang-toggle{ margin-right:4px; }

/* Clickable service card (home) */
a.svc-card{ display:block; text-decoration:none; color:inherit; }
a.svc-card .svc-more{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  color:var(--indigo); font-weight:700; font-size:15px;
}
a.svc-card .svc-more svg{ width:18px; height:18px; transition:transform .2s ease; }
a.svc-card:hover .svc-more svg{ transform:translateX(4px); }

/* Simple "who it's for" chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:820px; margin:0 auto; }
.chip-row span{
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:9px 16px; font-size:14.5px; color:var(--text); font-weight:600;
}

/* Example conversation block (lightweight, no heavy mock) */
.mini-chat{
  max-width:520px; margin:0 auto; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.mini-chat .b{ max-width:82%; padding:10px 14px; border-radius:14px; font-size:15px; margin:7px 0; line-height:1.4; }
.mini-chat .b.in{ background:var(--surface-2); border:1px solid var(--border); border-top-left-radius:4px; }
.mini-chat .b.out{ background:linear-gradient(180deg,#5b52ec,var(--indigo-deep)); color:#fff; margin-left:auto; border-top-right-radius:4px; }
.mini-chat .cap{ text-align:center; color:var(--muted-2); font-size:12.5px; margin-top:12px; }

/* Footer language row */
.foot-lang{ margin-top:10px; }

/* ===== Blog ===== */
.page-top{ padding-top:124px; }
.article{ max-width:740px; margin:0 auto; }
.article-head{ text-align:center; margin-bottom:38px; }
.article-head .eyebrow{ justify-content:center; }
.article-head h1{ font-size:clamp(28px,4.4vw,42px); line-height:1.15; margin-top:10px; }
.article-meta{ color:var(--muted-2); font-size:14px; margin-top:16px; }
.prose{ font-size:17px; line-height:1.75; color:var(--text); }
.prose h2{ font-size:25px; margin:38px 0 12px; }
.prose h3{ font-size:19px; margin:26px 0 8px; }
.prose p{ margin:0 0 18px; color:var(--text); }
.prose ul{ margin:0 0 18px; padding-left:22px; }
.prose li{ margin:0 0 9px; }
.prose a{ color:var(--indigo); font-weight:600; }
.prose strong{ font-weight:700; }
.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin:0 auto; }
@media (max-width:820px){ .blog-grid{ grid-template-columns:1fr; } }
a.blog-card{ display:block; text-decoration:none; color:inherit; }
a.blog-card .tag{ display:inline-block; margin-bottom:12px; }
a.blog-card h3{ font-size:20px; margin-bottom:8px; }
a.blog-card p{ color:var(--muted); font-size:15.5px; }
a.blog-card .svc-more{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--indigo); font-weight:700; font-size:15px; }
a.blog-card .svc-more svg{ width:18px; height:18px; transition:transform .2s ease; }
a.blog-card:hover .svc-more svg{ transform:translateX(4px); }