/* AIMotion Blog — brand-matched article styles.
   Standalone (no Tailwind). Shared by /blog/ and /es/blog/.
   Tokens mirror index.html so articles feel like aimotion.tech. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --ink:#0D0D0D; --ink-2:#5A5A5A; --ink-3:#8A8A8A;
  --bg:#FFFFFF; --bg-2:#F7F8FA;
  --line:#ECECEC; --line-2:#E0E0E0;
  --brand:#1a73e8; --brand-2:#1765cc; --brand-weak:#e8f0fe;
  --g-blue:#4285F4; --g-red:#EA4335; --g-yellow:#FBBC04; --g-green:#34A853;
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:.22s;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.011em;
}
img{ max-width:100%; height:auto; }
a{ color:var(--brand); }

.wrap{ max-width:1120px; margin:0 auto; padding:0 1.5rem; }
.col{ max-width:720px; margin:0 auto; }

.display{ font-weight:700; letter-spacing:-0.04em; line-height:1.06; }
.serif-i{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-0.01em; color:var(--brand); }
.eyebrow{ font-size:.8rem; font-weight:600; color:var(--brand); letter-spacing:.02em; text-transform:uppercase; margin:0 0 .75rem; }
.hairline{ border-top:1px solid var(--line); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.95rem; font-weight:600; padding:.82rem 1.6rem; border-radius:9999px;
  cursor:pointer; border:1px solid transparent; white-space:nowrap; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-fast) var(--ease-out-expo), background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.btn-brand{ background:var(--brand); color:#fff; box-shadow:0 6px 18px -6px rgba(26,115,232,.5); }
.btn-brand:hover{ background:var(--brand-2); box-shadow:0 14px 32px -8px rgba(26,115,232,.55); transform:translateY(-2px); }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-line:hover{ background:var(--bg-2); border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-weak); transform:translateY(-1px); }
.btn-full{ width:100%; }

/* ---------- nav ---------- */
.b-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border-bottom:1px solid var(--line);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .b-nav{ background:#fff; }
}
.b-nav-in{ display:flex; align-items:center; justify-content:space-between; height:4rem; gap:1rem; }
.b-logo{ font-weight:700; letter-spacing:-.02em; font-size:1.1rem; color:var(--ink); text-decoration:none; }
.b-logo span{ color:var(--brand); }
.b-nav-links{ display:flex; align-items:center; gap:1.5rem; }
.navlink{ font-size:.92rem; color:var(--ink-2); text-decoration:none; transition:color .15s ease; }
.navlink:hover{ color:var(--ink); }
.b-nav-right{ display:flex; align-items:center; gap:.75rem; }
.b-lang{ display:flex; align-items:center; gap:.25rem; font-size:.82rem; color:var(--ink-3); }
.b-lang a{ padding:0 .35rem; text-decoration:none; color:var(--ink-3); }
.b-lang a.on{ color:var(--ink); font-weight:500; }
@media (max-width:820px){ .b-nav-links{ display:none; } }
@media (max-width:520px){ .b-nav .btn{ padding:.6rem 1.05rem; font-size:.85rem; } }

/* ---------- post header ---------- */
.b-head{ padding:3.5rem 0 1.75rem; }
.b-head h1{ font-size:clamp(2rem,4.6vw,3.1rem); margin:0 0 1rem; }
.b-lede{ font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.55; color:var(--ink-2); margin:0 0 1.5rem; }
.b-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  font-size:.85rem; color:var(--ink-3); padding-bottom:1.5rem; border-bottom:1px solid var(--line);
}
.b-meta .dot{ color:var(--line-2); }
.b-tag{
  display:inline-block; font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--brand); background:var(--brand-weak);
  padding:.28rem .6rem; border-radius:9999px;
}

/* ---------- article prose ---------- */
.prose{ padding:2rem 0 1rem; font-size:1.05rem; line-height:1.72; color:#2f2f2f; }
.prose > p{ margin:0 0 1.35rem; }
.prose h2{
  font-family:'Inter',system-ui,sans-serif; font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.45rem,2.6vw,1.85rem); line-height:1.2;
  margin:3rem 0 .9rem; color:var(--ink); scroll-margin-top:5.5rem;
}
.prose h3{
  font-weight:700; letter-spacing:-.02em; font-size:1.16rem; line-height:1.35;
  margin:2.1rem 0 .6rem; color:var(--ink); scroll-margin-top:5.5rem;
}
.prose ul,.prose ol{ margin:0 0 1.35rem; padding-left:1.35rem; }
.prose li{ margin:.5rem 0; }
.prose li::marker{ color:var(--brand); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--brand); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--brand-2); }
.prose hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
.prose blockquote{
  margin:1.75rem 0; padding:.35rem 0 .35rem 1.25rem;
  border-left:3px solid var(--brand); color:var(--ink-2); font-size:1.06rem;
}
.prose code{
  background:var(--bg-2); border:1px solid var(--line);
  padding:.08rem .35rem; border-radius:5px; font-size:.88em;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.table-scroll{ overflow-x:auto; margin:1.6rem 0; border:1px solid var(--line); border-radius:14px; }
.prose table{ border-collapse:collapse; width:100%; min-width:520px; font-size:.94rem; }
.prose th,.prose td{ padding:.7rem .9rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.prose th{ background:var(--bg-2); font-weight:600; color:var(--ink); font-size:.86rem; letter-spacing:.01em; }
.prose tbody tr:last-child td{ border-bottom:0; }

/* numbered step markers */
.step-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.65rem; height:1.65rem; border-radius:50%; margin-right:.55rem;
  background:var(--brand-weak); color:var(--brand); font-size:.82rem; font-weight:700;
  vertical-align:.05em;
}

/* ---------- table of contents ---------- */
.b-toc{
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:1.15rem 1.35rem; margin:2rem 0 .5rem;
}
.b-toc p{ margin:0 0 .6rem; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.b-toc ol{ margin:0; padding-left:1.15rem; font-size:.95rem; }
.b-toc li{ margin:.35rem 0; }
.b-toc a{ color:var(--ink-2); text-decoration:none; }
.b-toc a:hover{ color:var(--brand); text-decoration:underline; }

/* ---------- mid-article callout ---------- */
.b-callout{
  margin:2.25rem 0; padding:1.15rem 1.35rem;
  background:var(--bg-2); border:1px solid var(--line);
  border-left:3px solid var(--g-green); border-radius:12px;
  font-size:.98rem; line-height:1.62; color:var(--ink-2);
}
.b-callout strong{ color:var(--ink); }
.b-callout.warn{ border-left-color:var(--g-yellow); }
.b-callout.brand{ border-left-color:var(--brand); }
.b-callout p{ margin:0 0 .6rem; }
.b-callout p:last-child{ margin:0; }

/* ---------- inline lead form ---------- */
.b-form-card{
  margin:2.75rem 0; padding:1.6rem 1.5rem 1.4rem;
  border:1px solid var(--line-2); border-radius:20px; background:var(--bg);
  box-shadow:0 22px 50px -34px rgba(26,115,232,.45);
}
.b-form-card h3{ margin:.15rem 0 .45rem; font-size:1.3rem; font-weight:700; letter-spacing:-.025em; line-height:1.25; color:var(--ink); }
.b-form-card .sub{ margin:0 0 1.1rem; font-size:.95rem; line-height:1.6; color:var(--ink-2); }
.b-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:560px){ .b-grid2{ grid-template-columns:1fr; } }
.b-form-card input,.b-form-card select{
  width:100%; font-family:inherit; font-size:.92rem; color:var(--ink);
  border:1px solid var(--line-2); border-radius:12px; padding:.78rem 1rem;
  background:#fff; margin-bottom:.7rem; transition:border-color .15s ease, box-shadow .15s ease;
}
.b-form-card input:focus,.b-form-card select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-weak);
}
.b-form-card input::placeholder{ color:var(--ink-3); }
.b-fine{ margin:.85rem 0 0; font-size:.76rem; line-height:1.5; color:var(--ink-3); text-align:center; }
.b-fine a{ color:var(--ink-3); text-decoration:underline; }
.b-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem .95rem;
  margin:.9rem 0 0; font-size:.78rem; color:var(--ink-3);
}
.b-trust span{ display:inline-flex; align-items:center; gap:.3rem; }
.hp{ position:absolute; left:-9999px; }
.b-ok{
  display:none; text-align:center; padding:1.25rem .5rem;
}
.b-ok svg{ margin-bottom:.6rem; }
.b-ok h3{ margin:0 0 .4rem; font-size:1.2rem; font-weight:700; color:var(--ink); }
.b-ok p{ margin:0; font-size:.95rem; color:var(--ink-2); line-height:1.6; }
.is-done .b-form-body{ display:none; }
.is-done .b-ok{ display:block; }

/* ---------- end-of-post CTA ---------- */
.b-cta{
  position:relative; overflow:hidden;
  margin:3rem 0 1rem; padding:2.4rem 2rem; border-radius:24px;
  background:linear-gradient(135deg,#0f2a52 0%,#12356b 45%,#0d4a3a 100%);
  color:#fff; text-align:center;
}
.b-cta h2{ margin:0 0 .7rem; font-size:clamp(1.5rem,3.2vw,2.05rem); font-weight:700; letter-spacing:-.035em; line-height:1.15; color:#fff; }
.b-cta p{ margin:0 auto 1.5rem; max-width:34rem; font-size:1rem; line-height:1.62; color:rgba(255,255,255,.82); }
.b-cta .btn-brand{ background:#fff; color:#0f2a52; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); }
.b-cta .btn-brand:hover{ background:#f2f6ff; }
.b-cta-fine{ margin:1.1rem 0 0!important; font-size:.8rem!important; color:rgba(255,255,255,.62)!important; }

/* ---------- author / share ---------- */
.b-author{
  display:flex; align-items:center; gap:.85rem;
  margin:2.5rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line);
}
.b-avatar{
  width:2.75rem; height:2.75rem; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--g-blue),var(--brand));
  color:#fff; font-weight:700; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
}
.b-author-t{ font-size:.92rem; font-weight:600; color:var(--ink); margin:0; }
.b-author-s{ font-size:.85rem; color:var(--ink-3); margin:.1rem 0 0; line-height:1.5; }

/* ---------- blog index ---------- */
.b-index-head{ padding:4rem 0 2.5rem; text-align:center; }
.b-index-head h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin:0 0 1rem; }
.b-index-head .b-lede{ max-width:38rem; margin:0 auto; }
.b-cards{ display:grid; gap:1.25rem; padding:.5rem 0 1rem; }
@media (min-width:780px){ .b-cards{ grid-template-columns:1fr 1fr; } }
.b-card{
  display:flex; flex-direction:column; padding:1.5rem 1.5rem 1.35rem;
  border:1px solid var(--line); border-radius:20px; background:var(--bg);
  text-decoration:none; color:inherit;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.b-card:hover{ border-color:var(--line-2); transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(0,0,0,.25); }
.b-card.feat{ border-color:var(--brand-weak); background:linear-gradient(180deg,#fbfcff 0%,#fff 60%); }
@media (min-width:780px){ .b-card.feat{ grid-column:1 / -1; } }
.b-card h2{ margin:.75rem 0 .5rem; font-size:1.25rem; font-weight:700; letter-spacing:-.025em; line-height:1.3; color:var(--ink); }
.b-card.feat h2{ font-size:clamp(1.4rem,2.6vw,1.75rem); }
.b-card p{ margin:0 0 1.1rem; font-size:.95rem; line-height:1.62; color:var(--ink-2); }
.b-card-meta{ margin-top:auto; font-size:.82rem; color:var(--ink-3); }
.arrow-link{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.92rem; color:var(--brand); }
.arrow-link svg{ transition:transform .2s ease; }
.b-card:hover .arrow-link svg{ transform:translateX(3px); }
.b-soon{
  margin:2.5rem 0 0; padding:1.5rem; text-align:center;
  border:1px dashed var(--line-2); border-radius:20px; background:var(--bg-2);
}
.b-soon p{ margin:0 0 .35rem; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.b-soon ul{ margin:.75rem 0 0; padding:0; list-style:none; font-size:.95rem; color:var(--ink-2); line-height:1.9; }

/* ---------- footer ---------- */
.b-foot{ margin-top:3.5rem; padding:2.5rem 0 6rem; border-top:1px solid var(--line); }
.b-foot-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; font-size:.88rem; color:var(--ink-3);
}
.b-foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; }
.b-foot-addr{ margin-top:1rem; text-align:center; font-size:.8rem; color:var(--ink-3); }
.b-foot-legal{ margin-top:.5rem; text-align:center; font-size:.75rem; color:var(--ink-3); }
.b-foot-legal a{ color:inherit; text-decoration:underline; opacity:.75; }

/* ---------- floating whatsapp ---------- */
.float-wa{
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:60;
  width:3.4rem; height:3.4rem; border-radius:50%;
  background:#25D366; box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease-out-expo);
}
.float-wa:hover{ transform:scale(1.07); }