:root { --ink:#0a0a0a; --grey-950:#0a0a0a; --grey-900:#171717; --grey-800:#262626; --grey-700:#404040; --grey-600:#525252; --grey-500:#737373; --grey-400:#a3a3a3; --grey-300:#d4d4d4; --grey-200:#e5e5e5; --grey-100:#f5f5f5; --grey-50:#fafafa; --muted:#525252; --primary-950:#431105; --primary-900:#752612; --primary-800:#8e2d12; --primary-700:#ae3a0f; --primary-600:#d2570d; --orange:#e57411; --primary-400:#f49c2b; --primary-300:#f6b653; --primary-200:#f9d28e; --primary-100:#fceac9; --primary-50:#fef7ec; --error:#ef4444; --animation-shadow:0 0 0 1px rgba(10,10,10,.025),0 0 24px rgba(10,10,10,.075); --floating-shadow:0 0 14px rgba(10,10,10,.07); --card-title-size:14px; --card-title-lh:20px; --card-body-size:12px; --card-body-lh:16px; --card-step-size:11px; --card-step-lh:15px; --card-meta-size:10px; --card-meta-lh:14px; --chat-text-size:10px; --chat-text-lh:14px; --chat-meta-size:8px; --chat-meta-lh:10px; --demo-phone-width:240px; --demo-phone-height:480px; --demo-chat-bottom:61px; --demo-chat-top:28px; }
* { box-sizing:border-box; }
html { font-family:"IBM Plex Sans",sans-serif; background:#fff; }
body { margin:0; color:var(--ink); }
.hero { position:relative; isolation:isolate; min-height:820px; overflow:clip; padding:103px 40px 50vh; background:#fef7ec; }
.hero::after { content:""; position:absolute; z-index:-2; top:50%; left:calc(50% + 410px); width:720px; height:720px; translate:-50% -50%; border-radius:50%; background:radial-gradient(circle,rgba(246,182,83,.42) 0%,rgba(252,234,201,.25) 45%,rgba(255,250,243,0) 72%); pointer-events:none; }
.brand { position:absolute; z-index:3; top:20px; left:max(80px,calc(50% - 584px)); display:flex; align-items:center; gap:8px; width:max-content; height:36px; color:var(--grey-700); text-decoration:none; }
.brand__symbol { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; }
.brand__symbol img { width:30px; height:30px; }
.brand__wordmark { display:block; width:55px; height:18px; }
.brand__divider { width:1px; height:20px; margin:0 12px; background:var(--grey-300); }
.brand__tagline { color:var(--orange); white-space:nowrap; font:600 16px/24px "IBM Plex Sans",sans-serif; }
.brand__tagline-normal { color:var(--grey-700); font-weight:400; }
.brand-separator { position:absolute; z-index:2; top:78px; left:50%; width:min(1280px,calc(100% - 80px)); height:1px; translate:-50% 0; opacity:.42; background:linear-gradient(90deg,rgba(212,212,212,0),var(--grey-300) 8%,var(--grey-300) 92%,rgba(212,212,212,0)); }
.trusted__heading { position:relative; z-index:2; margin:0 auto 8px; color:#737373; text-align:center; font:500 18px/26px "IBM Plex Sans",sans-serif; }
.trusted__heading strong { color:var(--ink); font-weight:600; }
.trusted { position:relative; z-index:2; width:min(1280px,100%); height:86px; margin:0 auto; overflow:hidden; padding:14px 0; background:transparent; }
.trusted::before,.trusted::after { content:""; position:absolute; z-index:2; top:0; bottom:0; width:120px; pointer-events:none; }
.trusted::before { left:0; background:linear-gradient(90deg,#fef7ec 20%,rgba(254,247,236,0)); }
.trusted::after { right:0; background:linear-gradient(270deg,#fef7ec 20%,rgba(254,247,236,0)); }
.trusted__track { display:flex; align-items:center; width:max-content; padding:14px 0; animation:trusted-marquee 30s linear infinite; will-change:transform; }
.trusted__group { display:flex; align-items:center; gap:48px; padding-right:48px; }
.trusted__track img { display:block; flex:0 0 160.385px; width:160.385px; height:30px; object-fit:contain; }
.trusted-separator { position:relative; z-index:2; width:min(1280px,100%); height:1px; margin:0 auto 40px; opacity:.42; background:linear-gradient(90deg,rgba(212,212,212,0),var(--grey-300) 8%,var(--grey-300) 92%,rgba(212,212,212,0)); }
@keyframes trusted-marquee { to { transform:translateX(-50%); } }
/* Logos de clientes (assets/clientes): cada uno conserva su proporción dentro de una altura común,
   en escala de grises y tenues; se ven a color al pasar el mouse. */
section.trusted { height:96px; padding:10px 0; }
section.trusted .trusted__track { padding:8px 0; animation-duration:60s; }
section.trusted .trusted__group { gap:80px; padding-right:80px; }
section.trusted .trusted__track img { flex:none; width:auto; max-width:150px; height:44px; object-fit:contain; filter:grayscale(1) brightness(.62) contrast(1.25); opacity:.75; transition:filter .3s ease, opacity .3s ease; }
section.trusted .trusted__track img:hover { filter:none; opacity:1; }
@media (max-width:620px) {
  section.trusted { height:72px; padding:6px 0; }
  section.trusted .trusted__track { padding:6px 0; animation-duration:45s; }
  section.trusted .trusted__group { gap:44px; padding-right:44px; }
  section.trusted .trusted__track img { flex-basis:auto; width:auto; max-width:110px; height:34px; }
}
.hero__layout { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:80px; width:min(1280px,100%); margin:0 auto 80px; }
.hero__content { width:100%; max-width:600px; text-align:left; }
h1 { max-width:600px; margin:0 0 24px; font-family:Manrope,sans-serif; font-size:clamp(48px,5vw,72px); font-weight:500; line-height:1.11; letter-spacing:-.035em; }
h1 strong { font-weight:600; }
.hero-title__accent { color:var(--orange); }
.hero__copy { max-width:680px; margin:0; color:#404040; font:400 24px/32px "IBM Plex Sans",sans-serif; }
.hero-copy-group { display:flex; flex-direction:column; gap:20px; }
.hero__copy strong { display:block; margin:0; color:var(--ink); font-weight:600; }
.client-form { display:flex; flex-direction:column; gap:28px; width:100%; padding:28px; border:1px solid var(--grey-300); border-radius:28px; background:var(--grey-100); box-shadow:0 0 5px rgba(20,21,26,.08); }
.problem-static-intro { position:relative; left:50%; z-index:2; width:100vw; padding:80px 32px; text-align:center; translate:-50% 0; background:#fff; }
.problem-static-intro h2 { max-width:1022px; margin:20px auto 0; color:#0a0a0a; font:600 56px/64px Manrope,sans-serif; letter-spacing:0; }
.problem-static-title__line { display:block; }
.problem-static-intro h2 em { color:var(--orange); font-style:normal; }
.problem-static-intro__copy { max-width:1022px; margin:12px auto 0; color:#525252; font:400 18px/26px "IBM Plex Sans",sans-serif; }
.problem-static-intro__copy span { display:block; }
.problem-static-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; width:min(1280px,100%); margin:64px auto 0; text-align:left; }
.problem-static-card { display:flex; flex-direction:column; align-items:flex-start; gap:48px; padding:24px; border:1px solid #e5e5e5; border-radius:12px; color:#0a0a0a; background:#fff; font-family:Manrope,sans-serif; }
.problem-static-card .flow-bubble__icon { display:grid; flex:0 0 64px; width:64px; height:64px; padding:8px; place-items:center; border:1px solid #e5e5e5; border-radius:8px; background:#fafafa; }
.problem-static-card .flow-bubble__icon::after { display:none; }
.problem-static-card .flow-bubble__icon>img:not(.problem-static-card__status) { width:32px; height:32px; object-fit:contain; filter:invert(47%) sepia(94%) saturate(1860%) hue-rotate(5deg) brightness(96%) contrast(91%); }
.problem-static-card .flow-bubble__icon>.problem-static-card__status { position:absolute; top:-8px; right:-8px; display:block; width:24px; height:24px; object-fit:contain; filter:brightness(0) saturate(100%) invert(21%) sepia(97%) saturate(4445%) hue-rotate(351deg) brightness(92%) contrast(88%); }
.problem-static-card__content { display:flex; width:100%; flex-direction:column; align-items:flex-start; gap:8px; }
.problem-static-card strong { width:100%; font-size:24px; font-weight:600; line-height:32px; overflow-wrap:anywhere; }
.problem-static-card__content p { width:100%; margin:0; color:#525252; font:400 16px/24px "IBM Plex Sans",sans-serif; }
.integrations-ecosystem-section { position:relative; left:50%; z-index:2; width:100vw; margin-top:80px; padding:80px 32px; translate:-50% 0; background:#fff; }
.integrations-section__eyebrow { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:4px; width:max-content; min-height:32px; margin:0 auto 20px; padding:6px 10px; border:1px solid rgba(229,116,17,.3); border-radius:16px; color:#e57411; background:#fff; text-align:center; font:500 14px/20px "IBM Plex Sans",sans-serif; }
.integrations-section__eyebrow-icon { position:relative; display:block; width:20px; height:20px; overflow:hidden; }
.integrations-section__star { position:absolute; display:block; }
.integrations-section__star--main { top:5px; left:4.4px; width:10.6px; height:10.6px; }
.integrations-section__star--tiny { top:2.5px; left:2.5px; width:5px; height:5px; }
.integrations-section__title { position:relative; z-index:2; display:flex; flex-direction:column; gap:0; max-width:1022px; margin:0 auto; color:var(--ink); text-align:center; font-family:Manrope,sans-serif; font-size:56px; font-weight:600; line-height:64px; letter-spacing:0; }
.integrations-section__title-primary { display:block; }
.integrations-section__title-primary { color:var(--ink); font-weight:600; }
.integrations-section__title em { color:var(--orange); font-style:normal; }
.integrations-section__description { position:relative; z-index:2; max-width:1022px; margin:12px auto 0; color:#525252; text-align:center; font:400 18px/26px "IBM Plex Sans",sans-serif; }
.capta-phone { position:relative; width:280px; height:560px; border:9px solid #0a0a0a; border-radius:42px; background:#0a0a0a; box-shadow:0 28px 60px rgba(10,10,10,.22); }
.capta-phone-screen { position:absolute; inset:0; z-index:0; border-radius:33px; background:radial-gradient(circle at 70% 15%,rgba(229,116,17,.11),transparent 38%),#fef7ec; }
.problem-chip { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:32px; padding:6px 10px; border:1px solid rgba(229,116,17,.3); border-radius:16px; color:var(--orange); background:#fff; font:500 14px/20px "IBM Plex Sans",sans-serif; white-space:nowrap; }
.problem-chip__icon { position:relative; flex:0 0 20px; width:20px; height:20px; overflow:hidden; }
.problem-chip__star { position:absolute; display:block; }
.problem-chip__star--main { top:5px; left:4.4px; width:10.6px; height:10.6px; }
.problem-chip__star--top { top:2.5px; left:2.5px; width:5px; height:5px; }
.problem-chip__star--bottom { top:13.33px; left:11.67px; width:5px; height:5px; }
.capta-phone-demo--internal { margin-top:52px; padding-top:24px; padding-bottom:0; }
.capta-phone--internal { width:370px; height:740px; overflow:hidden; }
.capta-phone--internal .capta-phone-screen { background:#FEF7EC; }
.capta-phone-demo--internal .capta-phone-screen::after { content:""; position:absolute; inset:0; border-radius:inherit; background-image:url("assets/capta-phone-tile.svg?v=1"); background-repeat:repeat; background-position:center; background-size:52px 56px; opacity:.2; }
.capta-phone-demo--internal .capta-conversation { inset:0; gap:14px; padding:var(--demo-chat-top) 14px 86px; overflow:hidden; }
.capta-phone-demo--internal .capta-message-row--in { padding-right:34px; }
.capta-phone-demo--internal .capta-message-row--out { padding-left:34px; }
.capta-phone-demo--internal .capta-bubble { max-width:100%; }
.capta-phone-demo--internal .capta-bubble--out { color:#fff; background:#F6B653; }
.capta-phone-demo--internal .capta-bubble--out .capta-message-meta { opacity:1; }
.capta-phone-demo--internal .capta-bubble--out .capta-message-meta > :not(.capta-checks) { opacity:.62; }
.capta-phone-demo--internal .capta-bubble--out .capta-checks { display:inline-block; width:auto; height:auto; margin-left:1px; color:#D2570D; opacity:1; letter-spacing:-4px; font-weight:600; line-height:1; }
.flow-bubble__icon { position:relative; display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border-radius:10px; background:#FEF7EC; }
.flow-bubble__icon::after { position:absolute; top:-7px; right:-7px; display:grid; width:17px; height:17px; place-items:center; border:2px solid #fff; border-radius:50%; content:"×"; color:#fff; background:#dc2626; box-shadow:0 2px 6px rgba(153,27,27,.22); font:700 13px/13px Arial,sans-serif; }
.flow-bubble__icon img { display:block; width:22px; height:22px; object-fit:contain; filter:none; }
.phone-composer { position:absolute; right:10px; bottom:10px; left:10px; z-index:5; display:flex; align-items:center; gap:7px; min-height:48px; padding:6px; border:1px solid rgba(23,26,36,.1); border-radius:24px; background:rgba(255,255,255,.94); box-shadow:0 8px 24px rgba(23,26,36,.14); backdrop-filter:blur(8px); }
.phone-composer__field { flex:1; min-width:0; overflow:hidden; margin-right:2px; padding:6px 0 6px 2px; color:#737373; font:400 12px/18px "IBM Plex Sans",sans-serif; white-space:nowrap; }
.phone-composer__action,.phone-composer__send { display:grid; flex:0 0 auto; place-items:center; border:0; }
.phone-composer__action { position:relative; width:34px; height:34px; padding:0; border-radius:50%; color:#525252; background:#f5f5f5; font-size:0; line-height:0; }
.phone-composer__action::before,.phone-composer__action::after { content:""; position:absolute; top:50%; left:50%; width:14px; height:2px; border-radius:2px; background:currentColor; transform:translate(-50%,-50%); }
.phone-composer__action::after { transform:translate(-50%,-50%) rotate(90deg); }
.phone-composer__send { position:relative; width:36px; height:36px; padding:0; border-radius:50%; color:#fff; background:var(--orange); box-shadow:0 4px 12px rgba(229,116,17,.3); }
.phone-composer__send svg { position:absolute; top:50%; left:50%; display:block; width:18px; height:18px; overflow:visible; fill:currentColor; transform:translate(-50%,-50%); }
.capta-conversation { position:absolute; inset:0 -90px; z-index:3; display:flex; flex-direction:column; gap:16px; padding:32px 6px 24px; overflow:visible; }
.capta-message-row { display:flex; flex-direction:column; animation:message-in 460ms cubic-bezier(.22,1,.36,1) both; }
.capta-message-row--in { align-items:flex-start; padding-right:64px; }
.capta-message-row--out { align-items:flex-end; padding-left:64px; }
.capta-bubble { max-width:88%; overflow:hidden; font:400 13.5px/1.5 "IBM Plex Sans",sans-serif; box-shadow:0 7px 22px rgba(19,23,35,.2),0 2px 6px rgba(19,23,35,.09); }
.capta-bubble--in { color:#0a0a0a; background:#fff; border-radius:4px 16px 16px; }
.capta-bubble--out { color:#fff; background:var(--orange); border-radius:16px 4px 16px 16px; }
.capta-message-text { padding:10px 14px 2px; animation:text-in 220ms ease 80ms both; }
.capta-message-meta { display:flex; align-items:center; gap:5px; padding:0 14px 8px; font-size:10px; opacity:.62; }
.capta-agent-name { margin-right:auto; font-weight:500; }
.capta-checks { width:14px; height:14px; fill:currentColor; }
/* "Escribiendo" en em: escala con el texto del chat (--chat-text-size) y comparte proporciones con Retención. */
.capta-typing { display:flex; align-items:center; gap:.4em; height:3em; padding:0 1em; }
.capta-typing span { width:.5em; height:.5em; border-radius:50%; background:currentColor; opacity:.72; animation:dot 550ms ease-in-out infinite; }
.capta-typing span:nth-child(2) { animation-delay:160ms; }
.capta-typing span:nth-child(3) { animation-delay:320ms; }
@keyframes message-in { from { opacity:0; transform:translateY(-34px) scale(.92); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes text-in { from { opacity:0; } to { opacity:1; } }
@keyframes dot { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-.3em); } }
.form-field { display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; font-family:"IBM Plex Sans",sans-serif; }
.form-field label { width:100%; color:var(--grey-700); font-size:12px; font-weight:500; line-height:16px; }
.input-shell { display:flex; align-items:center; width:100%; min-height:58px; padding:15px; border:1px solid var(--grey-300); border-radius:8px; background:#fff; transition:border-color .15s ease,box-shadow .15s ease; }
.input-shell:focus-within { padding:14px; border:2px solid var(--orange); box-shadow:0 0 0 3px rgba(229,116,17,.12); }
.input-shell input { min-width:0; flex:1; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:400 16px/24px "IBM Plex Sans",sans-serif; }
.input-shell input::placeholder { color:var(--muted); opacity:1; }
.field-description { width:100%; margin:-2px 0 0; color:var(--muted); font:400 12px/16px "IBM Plex Sans",sans-serif; }
.form-field:has(input[aria-invalid="true"]) .input-shell { padding:14px; border:2px solid var(--error); box-shadow:none; }
.form-submit { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; padding:12px 14px; border:0; border-radius:8px; background:var(--orange); color:#fff; cursor:pointer; font:500 16px/24px "IBM Plex Sans",sans-serif; transition:background-color .15s ease,transform .15s ease; }
.form-submit img { width:24px; height:24px; }
.form-submit:hover { background:#8e2d12; }
.form-submit:active { background:#ae3a0f; transform:translateY(1px); }
.form-submit:focus-visible { outline:3px solid rgba(229,116,17,.3); outline-offset:3px; }
@media (max-width:1040px) {
  .hero { padding-top:103px; }
  .hero__layout { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
  .client-form { width:100%; padding:24px; }
  h1 { font-size:clamp(46px,5.5vw,62px); }
}
@media (max-width:820px) {
  .flow-bubble__icon { flex-basis:30px; width:30px; height:30px; }
  .flow-bubble__icon img { width:18px; height:18px; }
  .hero { min-height:680px; padding:97px 20px 50vh; }
  .brand { top:20px; left:36px; }
  .brand-separator { top:76px; width:calc(100% - 40px); }
  .trusted__heading { white-space:nowrap; font-size:clamp(11px,2vw,16px); line-height:20px; }
  .brand__tagline { font-size:14px; line-height:20px; }
  .trusted { height:76px; padding:9px 0; }
  .trusted-separator { width:100%; margin-bottom:36px; }
  .trusted::before,.trusted::after { width:72px; }
  .trusted__track { animation-duration:24s; }
  section.trusted .trusted__group { gap:44px; padding-right:44px; }
  .hero::after { top:72%; left:50%; width:620px; height:620px; }
  .hero__layout { grid-template-columns:1fr; gap:48px; }
  .hero__content { max-width:680px; }
  h1 { font-size:clamp(38px,11vw,52px); line-height:1.08; letter-spacing:-.045em; }
  .hero__copy { max-width:520px; font-size:18px; line-height:26px; }
  .client-form { width:min(424px,100%); margin:0 auto; padding:24px; }
  .capta-phone-demo--internal { margin-top:40px; padding:32px 20px 0; }
  .capta-phone { width:220px; height:440px; border-radius:40px; }
  .capta-phone--internal { width:280px; height:560px; }
  .capta-phone-screen { border-radius:31px; }
  .capta-conversation { inset-inline:-40px; gap:12px; padding-top:24px; }
  :root { --demo-chat-top:22px; }
  .capta-phone-demo--internal .capta-conversation { inset:0; gap:10px; padding:var(--demo-chat-top) 10px 76px; }
  .phone-composer { right:7px; bottom:7px; left:7px; min-height:43px; gap:5px; padding:5px; }
  .phone-composer__action { width:30px; height:30px; font-size:20px; }
  .phone-composer__send { width:32px; height:32px; }
  .capta-phone-demo--internal .capta-message-row--in { padding-right:24px; }
  .capta-phone-demo--internal .capta-message-row--out { padding-left:24px; }
  .capta-message-row--in { padding-right:40px; }
  .capta-message-row--out { padding-left:40px; }
  .capta-bubble { font-size:11.5px; }
  .form-field { width:100%; }
}
@media (max-width:430px) {
  .hero { min-height:700px; padding-inline:16px; }
  .brand { left:32px; }
  h1 { font-size:39px; }
  .trusted__heading { font-size:clamp(8px,2.45vw,10.5px); letter-spacing:-.01em; }
  .client-form { padding:20px 16px; gap:24px; }
}
@media (prefers-reduced-motion:reduce) { .trusted__track,.capta-message-row,.capta-message-text,.capta-typing span { animation:none; } }

/* Capability story · 01 Acquisition */
.capability-story { position:relative; left:50%; width:100vw; padding:72px 32px 64px; translate:-50% 0; background:#fff; }
.capability-card { position:relative; width:min(1022px,100%); margin:0 auto; border:0; background:transparent; }
.capability-card__copy { position:relative; z-index:4; padding:0; background:#fff; }
.capability-card__eyebrow { display:inline-flex; align-items:center; gap:10px; margin-bottom:24px; color:#d2570d; font:600 14px/20px "IBM Plex Sans",sans-serif; }
.capability-card__eyebrow > span { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; color:#fff; background:#e57411; font-size:12px; }
.capability-card__eyebrow--chip { gap:4px; min-height:32px; padding:6px 10px; border:1px solid rgba(229,116,17,.3); border-radius:16px; color:var(--orange); background:#fff; font-weight:500; }
.capability-card__eyebrow--chip > .capability-chip__icon { position:relative; display:block; width:20px; height:20px; overflow:hidden; border-radius:0; color:inherit; background:transparent; }
.capability-chip__star { position:absolute; display:block; }
.capability-chip__star--main { top:5px; left:4.4px; width:10.6px; height:10.6px; }
.capability-chip__star--top { top:2.5px; left:2.5px; width:5px; height:5px; }
.capability-chip__star--bottom { top:13.33px; left:11.67px; width:5px; height:5px; }
.capability-card h2 { max-width:800px; margin:0; color:#0a0a0a; font:600 clamp(36px,3vw,44px)/1.16 Manrope,sans-serif; letter-spacing:-.03em; }
.capability-card__accent { color:var(--orange); }
.capability-card__copy>p { max-width:760px; margin:20px 0 0; color:#525252; font:400 18px/28px "IBM Plex Sans",sans-serif; }
.acquisition-stage { position:relative; height:100vh; min-height:0; margin-top:16px; }
.acquisition-visual { position:sticky; top:24px; z-index:5; width:100%; height:calc(100vh - 48px); overflow:hidden; background:#fff; }
.capability-next-section { --crm-cut:0px; position:relative; left:50%; z-index:20; display:grid; width:100vw; margin:0; padding:80px 32px; place-items:center; border:0; translate:-50% 0; background:#fff; }
.capability-followup-section { position:relative; left:50%; z-index:20; display:grid; width:100vw; padding:80px 32px 120px; place-items:center; translate:-50% 0; background:#fff; }
.capability-optimization-section { position:relative; left:50%; z-index:20; display:grid; width:100vw; padding:80px 32px; place-items:center; translate:-50% 0; background:#fff; }
.capability-retention-section { position:relative; left:50%; z-index:20; display:grid; width:100vw; padding:80px 32px; place-items:center; translate:-50% 0; background:#fff; }
@keyframes retention-dot { 0%,70%,100% { opacity:.35; transform:translateY(0); } 35% { opacity:1; transform:translateY(-2px); } }
.campaign-signal { position:relative; width:min(900px,100%); height:360px; margin:40px auto 0; overflow:hidden; border-radius:24px; background:#fef7ec; box-shadow:0 0 28px rgba(23,26,36,.06); }
.capability-followup-section .capability-card--static { min-height:0; }
.capability-followup-section .capability-card__copy { min-height:0; padding:0; }
.followup-phone-demo { position:relative; width:min(900px,100%); height:640px; margin:16px auto 0; padding:0; }
.followup-phone { position:absolute; top:0; left:50%; width:320px; height:640px; overflow:hidden; transform:translateX(-50%) scale(1); transform-origin:center; transition:top .8s cubic-bezier(.22,1,.36,1),left .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1); }
.demo-phone .capta-phone-screen { background:#fef7ec; }
/* Fondo propio de los celulares; capta-pattern-tile.svg es el de las tarjetas y no debe cambiar a los celulares. */
.demo-phone .capta-phone-screen::after { position:absolute; inset:0; border-radius:inherit; content:""; opacity:.14; background-image:url("assets/capta-phone-tile.svg?v=1"); background-repeat:repeat; background-position:center; background-size:52px 56px; }
.followup-conversation { inset:0; gap:10px; padding:72px 12px 82px; overflow:hidden; }
.followup-conversation .capta-message-row--in { padding-right:28px; }
.followup-conversation .capta-message-row--out { padding-left:28px; }
.followup-conversation .capta-bubble { max-width:100%; font-size:12px; line-height:1.4; }
.followup-conversation .capta-bubble--out { color:#fff; background:#f6b653; }
.followup-conversation .capta-bubble--out .capta-message-meta { opacity:1; }
.followup-conversation .capta-bubble--out .capta-message-meta>:not(.capta-checks) { opacity:.66; }
.followup-conversation .capta-checks { color:#d2570d; letter-spacing:-4px; font-weight:600; }
.followup-crm-card { position:absolute; top:50%; right:4%; width:390px; overflow:hidden; border:1px solid #e5e5e5; border-radius:16px; opacity:0; background:#fff; box-shadow:0 0 20px rgba(23,26,36,.07); font-family:"IBM Plex Sans",sans-serif; transform:translateY(-50%) translateX(30px) scale(.96); transition:opacity .55s ease .38s,transform .7s cubic-bezier(.22,1,.36,1) .38s; pointer-events:none; }
.followup-crm-card__body { padding:16px; background:#fafafa; }
.followup-crm-current { display:inline-flex; align-items:center; gap:8px; min-height:32px; margin-top:8px; padding:6px 12px; border-radius:64px; color:#0284c7; background:#e0f2fe; transition:color .3s ease,background-color .3s ease,transform .35s cubic-bezier(.22,1,.36,1); }
.followup-crm-current>span { display:grid; width:8px; height:8px; place-items:center; border-radius:50%; background:currentColor; }
.followup-crm-current img { display:none; width:24px; height:24px; }
.followup-crm-current strong { font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:500; }
.followup-crm-history { display:flex; flex-direction:column; margin-top:14px; padding-top:8px; border-top:1px solid #e5e5e5; }
.followup-crm-history>div { display:flex; align-items:flex-start; gap:9px; padding:6px 0; }
.followup-crm-history i { flex:0 0 6px; width:6px; height:6px; margin-top:5px; border-radius:50%; background:#16a34a; }
.followup-crm-history .is-warning i { background:#d97706; }
.followup-crm-history span,.followup-crm-history strong,.followup-crm-history small { display:block; }
.followup-crm-history span { flex:1; }
.followup-crm-history strong { color:#262626; font-size:var(--card-step-size); line-height:var(--card-step-lh); font-weight:500; }
.followup-crm-history small { margin-top:1px; color:#737373; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); }
.followup-phone-demo.is-conversation-complete .followup-phone { top:0; left:20%; transform:translateX(-50%) scale(.84); transform-origin:top center; }
.followup-phone-demo.is-conversation-complete .followup-crm-card { opacity:1; transform:translateY(-50%) translateX(0) scale(1); }
.followup-phone-demo.is-attended .followup-crm-current { color:#16a34a; background:#f0fdf4; transform:scale(1.02); }
.followup-phone-demo.is-attended .followup-crm-current>span { width:24px; height:24px; border-radius:0; background:transparent; }
.followup-phone-demo.is-attended .followup-crm-current img { display:block; }
.capability-card--static { display:block; height:auto; min-height:520px; overflow:visible; }
.capability-card--static .capability-card__copy { position:relative; min-height:0; padding-block:40px 0; background:transparent; transform:none; }
.crm-automation { display:grid; width:min(600px,84%); margin:36px auto 0; place-items:center; }
.crm-lead-card { width:100%; overflow:hidden; border:1px solid #e5e5e5; border-radius:16px; background:#fff; box-shadow:0 0 20px rgba(23,26,36,.07); font-family:"IBM Plex Sans",sans-serif; }
.crm-lead-card__header { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid #e5e5e5; }
.crm-lead-card__avatar { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border-radius:50%; color:#d2570d; background:#fef7ec; font-weight:600; font-size:var(--card-body-size); line-height:var(--card-body-lh); font-family:"IBM Plex Sans",sans-serif; }
.crm-lead-card__identity { display:flex; flex:1; flex-direction:column; min-width:0; gap:3px; }
.crm-lead-card__identity strong { color:#0a0a0a; font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:500; }
.crm-lead-card__identity small { display:flex; align-items:center; gap:5px; color:#737373; font-size:var(--card-body-size); line-height:var(--card-body-lh); }
.crm-lead-card__identity small img { width:16px; height:16px; object-fit:contain; }
.crm-lead-card__identity i { color:#a3a3a3; font-style:normal; }
.crm-lead-card__menu { color:#a3a3a3; font-size:16px; letter-spacing:2px; }
.crm-lead-card__body { position:relative; display:flex; min-height:0; flex-direction:column; align-items:flex-start; gap:8px; padding:16px; background:#fafafa; }
.crm-lead-card__label { color:#737373; font-size:var(--card-body-size); line-height:var(--card-body-lh); font-weight:400; }
.crm-lead-card__status { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:6px 12px; border-radius:64px; color:#d97706; background:#fffbeb; transition:color .28s ease,background-color .28s ease,transform .28s ease; }
.crm-lead-card__status strong { font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:500; }
.crm-lead-card__status-icon { position:relative; display:block; width:8px; height:8px; border-radius:50%; background:currentColor; }
.crm-lead-card__status-icon img { display:none; width:24px; height:24px; }
.crm-lead-card__whatsapp { position:absolute; top:16px; right:16px; display:flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid #bbf7d0; border-radius:9px; opacity:0; color:#15803d; background:#f0fdf4; box-shadow:0 6px 18px rgba(22,163,74,.1); font-size:var(--card-step-size); line-height:var(--card-step-lh); font-weight:500; transform:translateY(8px) scale(.94); transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1); }
.crm-lead-card__whatsapp img { width:18px; height:18px; }
.crm-lead-card__footer { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; color:#737373; font-size:var(--card-body-size); line-height:var(--card-body-lh); }
.crm-lead-card__footer strong { color:#525252; font-weight:500; }
.crm-lead-card__history { display:flex; width:100%; flex-direction:column; gap:0; margin-top:8px; padding-top:8px; border-top:1px solid #e5e5e5; }
.crm-history-item { display:flex; align-items:flex-start; gap:9px; max-height:0; overflow:hidden; opacity:0; transform:translateY(5px); transition:max-height .35s ease,opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1),padding .35s ease; }
.crm-history-item>i { flex:0 0 6px; width:6px; height:6px; margin-top:5px; border-radius:50%; background:#d97706; }
.crm-history-item>span,.crm-history-item strong,.crm-history-item small { display:block; }
.crm-history-item>span { flex:1; }
.crm-history-item strong { color:#262626; font-size:var(--card-step-size); line-height:var(--card-step-lh); font-weight:500; }
.crm-history-item small { margin-top:1px; color:#737373; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); }
.crm-history-item--visited>i,.crm-history-item--added>i { background:#0284c7; }
.crm-history-item--recovery>i,.crm-history-item--complete>i { background:#16a34a; }
.crm-automation[data-stage="visited"] .crm-history-item--visited,
.crm-automation[data-stage="added"] .crm-history-item--visited,
.crm-automation[data-stage="added"] .crm-history-item--added,
.crm-automation[data-stage="abandoned"] .crm-history-item--visited,
.crm-automation[data-stage="abandoned"] .crm-history-item--added,
.crm-automation[data-stage="abandoned"] .crm-history-item--abandoned,
.crm-automation[data-stage="recovery"] .crm-history-item--visited,
.crm-automation[data-stage="recovery"] .crm-history-item--added,
.crm-automation[data-stage="recovery"] .crm-history-item--abandoned,
.crm-automation[data-stage="recovery"] .crm-history-item--recovery,
.crm-automation[data-stage="complete"] .crm-history-item { max-height:42px; padding:5px 0; opacity:1; transform:translateY(0); }
.crm-automation[data-stage="visited"] .crm-lead-card__status,
.crm-automation[data-stage="added"] .crm-lead-card__status { color:#0284c7; background:#e0f2fe; }
.crm-automation[data-stage="abandoned"] .crm-lead-card__status { color:#d97706; background:#fffbeb; }
.crm-automation[data-stage="recovery"] .crm-lead-card__status { color:#15803d; background:#f0fdf4; }
.crm-automation[data-stage="recovery"] .crm-lead-card__whatsapp { opacity:1; transform:translateY(0) scale(1); }
.crm-automation[data-stage="complete"] .crm-lead-card__status { color:#16a34a; background:#f0fdf4; transform:scale(1.02); }
.crm-automation[data-stage="complete"] .crm-lead-card__status-icon { width:24px; height:24px; border-radius:0; background:transparent; }
.crm-automation[data-stage="complete"] .crm-lead-card__status-icon img { display:block; }
.crm-automation[data-stage="complete"] .crm-lead-card__whatsapp { opacity:0; transform:translateY(-6px) scale(.96); }
.crm-ecosystem { position:relative; isolation:isolate; width:min(900px,100%); height:560px; margin:48px auto 0; overflow:hidden; }
.crm-ecosystem::before { position:absolute; z-index:0; top:50%; left:50%; width:520px; height:520px; border:2px solid rgba(229,116,17,.11); border-radius:50%; content:""; translate:-50% -50%; box-shadow:0 0 70px rgba(249,210,142,.16); animation:crm-waves 8s ease-in-out infinite alternate; }
.crm-ecosystem__rings { position:absolute; z-index:1; top:50%; left:50%; width:440px; height:440px; translate:-50% -50%; border:4px solid rgba(229,116,17,.22); border-radius:50%; box-shadow:0 0 26px rgba(229,116,17,.08),inset 0 0 70px rgba(249,210,142,.12); }
.crm-ecosystem__rings::before,.crm-ecosystem__rings::after { position:absolute; top:50%; left:50%; border:3px solid rgba(229,116,17,.14); border-radius:50%; content:""; translate:-50% -50%; }
.crm-ecosystem__rings::before { width:320px; height:320px; }
.crm-ecosystem__rings::after { width:200px; height:200px; }
.crm-ecosystem__center { position:absolute; z-index:3; top:50%; left:50%; display:grid; width:180px; height:180px; place-items:center; translate:-50% -50%; border:1px solid rgba(229,116,17,.2); border-radius:50%; background:rgba(255,255,255,.32); box-shadow:inset 0 0 28px rgba(255,255,255,.38),0 0 30px rgba(23,26,36,.07),0 0 70px rgba(229,116,17,.1); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.crm-ecosystem__center img { width:92px; height:92px; }
.crm-ecosystem__app { --float-x:8px; --float-y:-12px; position:absolute; z-index:2; top:calc(50% + var(--orbit-y)); left:calc(50% + var(--orbit-x)); display:grid; width:72px; height:72px; place-items:center; translate:-50% -50%; border:1px solid rgba(229,116,17,.16); border-radius:20px; background:rgba(255,255,255,.26); box-shadow:inset 0 0 18px rgba(255,255,255,.38),0 0 22px rgba(23,26,36,.07); -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px); animation:crm-float var(--float-duration,6s) ease-in-out var(--float-delay,0s) infinite alternate; will-change:transform; }
.crm-ecosystem__app img { display:block; width:52px; height:52px; object-fit:contain; }
.crm-ecosystem__app--hubspot { --orbit-x:0px; --orbit-y:-220px; --float-duration:5.8s; --float-delay:-.8s; }
.crm-ecosystem__app--instagram { --orbit-x:95px; --orbit-y:-198px; --float-duration:7.2s; --float-delay:-3.4s; }
.crm-ecosystem__app--woocommerce { --orbit-x:172px; --orbit-y:-137px; --float-duration:7.1s; --float-delay:-5.3s; }
.crm-ecosystem__app--shopify { --orbit-x:215px; --orbit-y:-49px; --float-duration:7.5s; --float-delay:-4.2s; }
.crm-ecosystem__app--slack { --orbit-x:215px; --orbit-y:49px; --float-duration:6.9s; --float-delay:-1.7s; }
.crm-ecosystem__app--pipedrive { --orbit-x:172px; --orbit-y:137px; --float-duration:7.3s; --float-delay:-4.1s; }
.crm-ecosystem__app--calendar { --orbit-x:95px; --orbit-y:198px; --float-duration:6.2s; --float-delay:-2.8s; }
.crm-ecosystem__app--salesforce { --orbit-x:0px; --orbit-y:220px; --float-duration:6.6s; --float-delay:-3.7s; }
.crm-ecosystem__app--gmail { --orbit-x:-95px; --orbit-y:198px; --float-duration:7s; --float-delay:-5.1s; }
.crm-ecosystem__app--typeform { --orbit-x:-172px; --orbit-y:137px; --float-duration:6.5s; --float-delay:-2.4s; }
.crm-ecosystem__app--tiktok { --orbit-x:-215px; --orbit-y:49px; --float-duration:7.4s; --float-delay:-4.6s; }
.crm-ecosystem__app--messenger { --orbit-x:-215px; --orbit-y:-49px; --float-duration:6.8s; --float-delay:-2.1s; }
.crm-ecosystem__app--notion { --orbit-x:-172px; --orbit-y:-137px; --float-duration:6.1s; --float-delay:-3.1s; }
.crm-ecosystem__app--whatsapp { --orbit-x:-95px; --orbit-y:-198px; --float-duration:6.4s; --float-delay:-1.2s; }
@keyframes crm-float {
  0% { transform:translate3d(0,0,0) rotate(-2deg); }
  50% { transform:translate3d(calc(var(--float-x) * -.16),calc(var(--float-y) * -.16),0) rotate(1deg); }
  100% { transform:translate3d(calc(var(--float-x) * .35),calc(var(--float-y) * .35),0) rotate(2deg); }
}
@keyframes crm-waves {
  0% { opacity:.54; transform:scale(.96) rotate(0deg); }
  100% { opacity:.82; transform:scale(1.04) rotate(8deg); }
}
.channel-orbit { position:absolute; inset:0; z-index:4; pointer-events:none; }
.channel-chip { position:absolute; display:flex; align-items:center; gap:10px; min-width:132px; padding:10px 14px 10px 10px; border:1px solid #e5e5e5; border-radius:14px; opacity:var(--chip-opacity,1); background:#fff; box-shadow:0 8px 26px rgba(23,26,36,.12); transform:translate(var(--chip-x,0),var(--chip-y,0)) scale(var(--chip-scale,1)); }
.channel-chip span { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; background:#f5f5f5; }
.channel-chip img { width:24px; height:24px; object-fit:contain; }
.channel-chip b { color:#404040; font-weight:500; font-size:var(--card-body-size); line-height:var(--card-body-lh); font-family:"IBM Plex Sans",sans-serif; }
.channel-chip--whatsapp { top:36px; left:4%; }
.channel-chip--instagram { top:36px; left:29%; }
.channel-chip--inbox { top:36px; right:auto; left:54%; }
.channel-chip--shopify { top:36px; right:auto; left:79%; }
.acquisition-dashboard { position:absolute; z-index:2; top:var(--dashboard-y,53%); left:50%; width:min(600px,84%); padding:16px; border:1px solid #e5e5e5; border-radius:16px; opacity:var(--dashboard-opacity,.28); background:#fff; box-shadow:0 0 24px rgba(23,26,36,.1),0 0 56px rgba(23,26,36,.06); font-family:"IBM Plex Sans",sans-serif; transform:translate(-50%,-50%) scale(var(--dashboard-scale,.77)); transform-origin:center; }
.dash-header,.dash-title-row { display:flex; align-items:center; justify-content:space-between; }
.dash-header { padding-bottom:12px; border-bottom:1px solid #e5e5e5; }
.dash-brand { display:flex; align-items:center; gap:8px; color:#0a0a0a; font-weight:500; font-size:var(--card-body-size); line-height:var(--card-body-lh); font-family:"IBM Plex Sans",sans-serif; letter-spacing:0; }
.dash-brand img { width:22px; height:22px; }
.dash-title-row { padding:14px 0 12px; }
.dash-title-row small { display:block; color:#e57411; font-weight:500; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); font-family:"IBM Plex Sans",sans-serif; text-transform:uppercase; letter-spacing:.06em; }
.dash-title-row h3 { margin:2px 0 0; color:#0a0a0a; font:500 18px/24px "IBM Plex Sans",sans-serif; letter-spacing:0; }
.dash-title-row>span { padding:6px 8px; border:1px solid #e5e5e5; border-radius:8px; color:#737373; font-weight:400; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); font-family:"IBM Plex Sans",sans-serif; }
.dash-total { display:grid; grid-template-columns:1fr auto; padding:12px; border:1px solid #e5e5e5; border-radius:12px; background:#fafafa; }
.dash-total>span { color:#525252; font-weight:500; font-size:var(--card-step-size); line-height:var(--card-step-lh); font-family:"IBM Plex Sans",sans-serif; }
.dash-total>strong { grid-row:1/3; grid-column:2; align-self:center; color:#0a0a0a; font:500 28px/36px "IBM Plex Sans",sans-serif; }
.dash-total em { margin-top:4px; color:#737373; font-weight:400; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); font-family:"IBM Plex Sans",sans-serif; font-style:normal; }
.dash-total em b { color:#17804b; }
.dash-channels { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px; }
.dash-channel { display:grid; grid-template-columns:24px 1fr; gap:4px 8px; padding:10px; border:1px solid #e5e5e5; border-radius:10px; opacity:var(--data-progress,0); transform:translateY(var(--data-rise,10px)); }
.dash-channel img { grid-row:1/3; width:22px; height:22px; align-self:center; object-fit:contain; }
.dash-channel span { overflow:hidden; color:#737373; font-weight:400; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); font-family:"IBM Plex Sans",sans-serif; text-overflow:ellipsis; }
.dash-channel strong { color:#262626; font:500 14px/20px "IBM Plex Sans",sans-serif; }
.dash-channel>i { grid-column:1/3; height:3px; overflow:hidden; border-radius:3px; background:#e5e5e5; }
.dash-channel>i b { display:block; width:var(--share); height:100%; border-radius:inherit; background:#e57411; transform:scaleX(var(--data-progress,0)); transform-origin:left; }
.dash-bottom { display:grid; grid-template-columns:1.35fr .9fr; gap:8px; margin-top:8px; }
.dash-chart,.dash-new-leads { min-height:116px; padding:12px; border:1px solid #e5e5e5; border-radius:12px; }
.dash-chart>span,.dash-new-leads>span { color:#525252; font-weight:500; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); font-family:"IBM Plex Sans",sans-serif; }
.dash-chart svg { display:block; width:100%; height:72px; margin-top:8px; overflow:visible; }
.dash-chart__area { fill:rgba(229,116,17,.12); opacity:var(--data-progress,0); }
.dash-chart__line { fill:none; stroke:#e57411; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:var(--chart-offset,420); }
.dash-new-leads>div { display:flex; align-items:center; gap:8px; margin-top:10px; opacity:var(--data-progress,0); transform:translateX(var(--data-shift,8px)); }
.dash-new-leads>div>i { flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:#f9d28e; }
.dash-new-leads p { margin:0; }
.dash-new-leads b,.dash-new-leads small { display:block; font-family:"IBM Plex Sans",sans-serif; }
.dash-new-leads b { color:#262626; font-size:var(--card-step-size); line-height:var(--card-step-lh); font-weight:500; }
.dash-new-leads small { color:#737373; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); }

@media (max-width:820px) {
  .capability-next-section { --crm-cut:0px; margin:0; padding-top:64px; }
}

@media (max-width:980px) {
  .capability-card h2 { max-width:650px; }
  .capability-card__copy>p { max-width:680px; margin-top:16px; }
  .channel-chip--whatsapp { --tx:220px; --ty:155px; }
  .channel-chip--instagram { --tx:-220px; --ty:155px; }
  .channel-chip--inbox { --tx:230px; --ty:-155px; }
  .channel-chip--shopify { --tx:-230px; --ty:-155px; }
}
@media (max-width:620px) {
  .capability-story { padding:56px 20px 48px; }
  .capability-card { width:100%; }
  .capability-card__copy { padding:0; }
  .capability-card__eyebrow { margin-bottom:14px; }
  .capability-card h2 { font-size:clamp(28px,8vw,32px); line-height:1.2; letter-spacing:-.025em; }
  .capability-card__copy>p { margin-top:16px; font-size:16px; line-height:24px; }
  .capability-next-section { --crm-cut:0px; min-height:0; margin:0; padding:64px 20px; }
  .capability-card--static,.capability-card--static .capability-card__copy { min-height:480px; }
  .acquisition-stage { height:100vh; min-height:0; margin-top:12px; }
  .acquisition-visual { top:12px; height:calc(100vh - 24px); }
  .acquisition-dashboard { top:var(--dashboard-y,46%); width:calc(100% - 20px); padding:12px; border-radius:15px; transform:translate(-50%,-50%) scale(var(--dashboard-scale,.77)); transform-origin:center; }
  .dash-title-row { padding:11px 0 9px; }
  .dash-title-row h3 { font-size:15px; line-height:19px; }
  .dash-total { padding:10px; }
  .dash-total>strong { font-size:23px; line-height:27px; }
  .dash-channels { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .dash-channel { grid-template-columns:18px 1fr; gap:3px 4px; padding:6px 4px; }
  .dash-channel img { width:17px; height:17px; }
  .dash-channel strong { font-size:11px; line-height:13px; }
  .dash-bottom { grid-template-columns:1.15fr .9fr; gap:5px; }
  .dash-chart,.dash-new-leads { display:block; min-height:91px; padding:7px; }
  .dash-chart svg { height:51px; }
  .dash-new-leads>div { gap:5px; margin-top:6px; }
  .dash-new-leads>div>i { flex-basis:18px; width:18px; height:18px; }
  .channel-chip { width:22%; min-width:0; gap:3px; padding:5px 4px; border-radius:10px; }
  .channel-chip span { flex:0 0 24px; width:24px; height:24px; }
  .channel-chip img { width:16px; height:16px; }
  .channel-chip b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .channel-chip--whatsapp { top:8px; left:2%; }
  .channel-chip--instagram { top:8px; right:auto; left:27%; }
  .channel-chip--inbox { top:8px; right:auto; bottom:auto; left:52%; }
  .channel-chip--shopify { top:8px; right:auto; bottom:auto; left:77%; }
}
@media (max-width:380px) {
  .capability-story { padding-inline:14px; }
  .capability-card h2 { font-size:27px; }
  .capability-card__copy>p { font-size:15px; line-height:22px; }
  .dash-title-row>span { display:none; }
}

/* Mobile layout */
@media (max-width:620px) {
  html,body { width:100%; overflow-x:hidden; }

  .hero { min-height:0; padding:96px 16px 64px; }
  .brand { top:18px; left:20px; max-width:calc(100% - 40px); }
  .brand__divider { margin-inline:8px; }
  .brand__tagline { font-size:13px; line-height:18px; white-space:nowrap; }
  .brand-separator { top:72px; width:calc(100% - 32px); }
  .trusted__heading { width:100%; margin-bottom:6px; font-size:clamp(9px,2.65vw,11px); line-height:16px; }
  .trusted { height:64px; padding:6px 0; }
  .trusted::before,.trusted::after { width:36px; }
  .trusted__group { gap:24px; padding-right:24px; }
  .trusted__track img { flex-basis:126px; width:126px; height:26px; }
  .trusted-separator { margin-bottom:32px; }
  .hero__layout { gap:40px; }
  h1 { max-width:none; margin-bottom:20px; font-size:clamp(34px,10.25vw,42px); line-height:1.1; }
  .hero__copy { font-size:17px; line-height:25px; }
  .hero-copy-group { gap:14px; }
  .client-form { width:100%; padding:20px 16px; gap:22px; border-radius:20px; }
  .input-shell { min-height:54px; padding:13px 14px; }
  .input-shell:focus-within,.form-field:has(input[aria-invalid="true"]) .input-shell { padding:12px 13px; }
  .integrations-ecosystem-section { margin-top:48px; padding:56px 16px 64px; }
  .integrations-section__eyebrow { margin-bottom:20px; }
  .integrations-section__title { max-width:520px; font-size:36px; line-height:44px; letter-spacing:0; }
  .integrations-section__description { max-width:520px; margin-top:12px; font-size:16px; line-height:24px; }
  .capta-phone-demo--internal { margin-top:32px; padding:24px 0 0; }
  .capta-phone--internal { width:min(300px,calc(100vw - 52px)); height:min(600px,calc((100vw - 52px) * 2)); }
  .flow-bubble__icon { flex-basis:27px; width:27px; height:27px; }

  .capability-story { padding:56px 16px 48px; }
  .capability-card__eyebrow { margin-bottom:16px; }
  .capability-card h2 { font-size:30px; line-height:1.18; }
  .capability-card__copy>p { margin-top:16px; font-size:16px; line-height:24px; }
  .acquisition-stage { height:100svh; min-height:600px; margin-top:8px; }
  .acquisition-visual { position:relative; top:0; height:calc(100svh - 16px); min-height:584px; }
  .channel-chip { top:6px; width:23%; gap:4px; padding:6px 5px; }
  .channel-chip span { flex-basis:25px; width:25px; height:25px; }
  .channel-chip img { width:17px; height:17px; }
  .channel-chip--whatsapp { left:0; }
  .channel-chip--instagram { left:25.66%; }
  .channel-chip--inbox { left:51.33%; }
  .channel-chip--shopify { left:77%; }
  .acquisition-dashboard { top:var(--dashboard-y,56px); width:min(330px,calc(100% - 32px)); padding:10px; border-radius:14px; box-shadow:0 0 18px rgba(23,26,36,.1),0 0 38px rgba(23,26,36,.06); transform:translateX(-50%) scale(var(--dashboard-scale,.77)); transform-origin:center; }
  .dash-title-row h3 { font-size:14px; line-height:18px; }
  .dash-total { padding:9px; }
  .dash-channel { padding:6px 3px; }
  .dash-bottom { grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr); }
  .dash-chart,.dash-new-leads { min-width:0; }
  .capability-next-section { padding:56px 16px 64px; }
  .capability-followup-section { padding:56px 16px 72px; }
  .followup-phone-demo { height:min(560px,calc((100vw - 64px) * 2)); margin-top:12px; padding-top:0; }
  .followup-phone { top:0; width:min(280px,calc(100vw - 64px)); height:min(560px,calc((100vw - 64px) * 2)); }
  .followup-conversation { gap:8px; padding:64px 10px 70px; }
  .followup-conversation .capta-message-row--in { padding-right:20px; }
  .followup-conversation .capta-message-row--out { padding-left:20px; }
  .followup-conversation .capta-bubble { font-size:10.5px; }
  .followup-phone-demo.is-conversation-complete .followup-phone { top:0; left:21%; transform:translateX(-50%) scale(.58); transform-origin:top center; }
  .followup-crm-card { top:min(162.5px,calc(58vw - 37.12px)); right:0; width:50%; transform:translateY(-50%) translateX(16px) scale(.96); }
  .followup-phone-demo.is-conversation-complete .followup-crm-card { transform:translateY(-50%) translateX(0) scale(1); }
  .followup-crm-card .crm-lead-card__header { gap:6px; padding:8px; }
  .followup-crm-card .crm-lead-card__avatar { flex-basis:28px; width:28px; height:28px; }
  .followup-crm-card .crm-lead-card__identity small { gap:3px; }
  .followup-crm-card .crm-lead-card__identity small img { width:12px; height:12px; }
  .followup-crm-card .crm-lead-card__menu { display:none; }
  .followup-crm-card__body { padding:10px; }
  .followup-crm-current { gap:5px; min-height:26px; margin-top:5px; padding:4px 7px; }
  .followup-crm-history { margin-top:8px; padding-top:5px; }
  .followup-crm-history>div { gap:6px; padding:4px 0; }
  .followup-crm-history i { flex-basis:5px; width:5px; height:5px; margin-top:4px; }
  .followup-phone-demo.is-attended .followup-crm-current>span { width:18px; height:18px; }
  .followup-phone-demo.is-attended .followup-crm-current img { width:18px; height:18px; }
  .capability-card--static,.capability-card--static .capability-card__copy { min-height:0; }
  .capability-card--static .capability-card__copy { padding-block:0; }
  .crm-automation { width:min(330px,calc(100% - 32px)); margin:28px auto 0; }
  .crm-lead-card__header { padding:14px; }
  .crm-lead-card__body { min-height:0; padding:14px; }
  .crm-lead-card__whatsapp { top:14px; right:14px; }
  .crm-lead-card__footer { padding:11px 14px; }
  .crm-ecosystem { height:440px; margin-top:36px; }
  .crm-ecosystem::before { width:340px; height:340px; }
  .crm-ecosystem__rings { width:280px; height:280px; border-width:3px; }
  .crm-ecosystem__rings::before { width:205px; height:205px; border-width:2px; }
  .crm-ecosystem__rings::after { width:135px; height:135px; border-width:2px; }
  .crm-ecosystem__center { width:120px; height:120px; border-radius:50%; }
  .crm-ecosystem__center img { width:62px; height:62px; }
  .crm-ecosystem__app { width:48px; height:48px; border-radius:14px; }
  .crm-ecosystem__app img { width:36px; height:36px; }
  .crm-ecosystem__app--hubspot { --orbit-x:0px; --orbit-y:-140px; }
  .crm-ecosystem__app--instagram { --orbit-x:61px; --orbit-y:-126px; }
  .crm-ecosystem__app--woocommerce { --orbit-x:109px; --orbit-y:-87px; }
  .crm-ecosystem__app--shopify { --orbit-x:136px; --orbit-y:-31px; }
  .crm-ecosystem__app--slack { --orbit-x:136px; --orbit-y:31px; }
  .crm-ecosystem__app--pipedrive { --orbit-x:109px; --orbit-y:87px; }
  .crm-ecosystem__app--calendar { --orbit-x:61px; --orbit-y:126px; }
  .crm-ecosystem__app--salesforce { --orbit-x:0px; --orbit-y:140px; }
  .crm-ecosystem__app--gmail { --orbit-x:-61px; --orbit-y:126px; }
  .crm-ecosystem__app--typeform { --orbit-x:-109px; --orbit-y:87px; }
  .crm-ecosystem__app--tiktok { --orbit-x:-136px; --orbit-y:31px; }
  .crm-ecosystem__app--messenger { --orbit-x:-136px; --orbit-y:-31px; }
  .crm-ecosystem__app--notion { --orbit-x:-109px; --orbit-y:-87px; }
  .crm-ecosystem__app--whatsapp { --orbit-x:-61px; --orbit-y:-126px; }
}

@media (max-width:360px) {
  .brand { left:16px; max-width:calc(100% - 32px); }
  .brand__wordmark { width:50px; }
  .brand__tagline { font-size:12px; }
  h1 { font-size:34px; }
  .channel-chip b { display:none; }
  .channel-chip { justify-content:center; }
}

@media (prefers-reduced-motion:reduce) {
  .crm-ecosystem::before,.crm-ecosystem__app { animation:none; }
}

.growth-cta { position:relative; left:50%; width:100vw; padding:80px; translate:-50% 0; background:#fff; }
.growth-cta__panel { position:relative; isolation:isolate; display:grid; min-height:620px; overflow:hidden; place-items:center; border-radius:18px; background:linear-gradient(180deg,#fff 0%,#fafafa 100%); }
.growth-cta__orbit-art { position:absolute; z-index:-2; top:50%; left:50%; width:max(1100px,109.3%); height:auto; translate:-50% -50%; mix-blend-mode:color-burn; pointer-events:none; }
.growth-cta__decoration { position:absolute; z-index:-1; top:-270px; width:620px; height:620px; opacity:.9; pointer-events:none; }
.growth-cta__decoration--left { left:-180px; }
.growth-cta__decoration--right { right:-180px; }
.growth-cta__content { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:48px; width:min(720px,calc(100% - 32px)); text-align:center; }
.growth-cta__chip { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:32px; padding:6px 10px; border:1px solid rgba(229,116,17,.3); border-radius:16px; color:var(--orange); background:#fff; font:500 14px/20px "IBM Plex Sans",sans-serif; }
.growth-cta__sparkles { display:grid; width:20px; height:20px; place-items:center; font-size:16px; line-height:20px; }
.growth-cta__copy { display:flex; flex-direction:column; align-items:center; gap:16px; }
.growth-cta__copy h2 { width:min(700px,100%); margin:0; color:#0a0a0a; font:600 56px/64px Manrope,sans-serif; letter-spacing:0; }
.growth-cta__copy p { max-width:710px; margin:0; color:#525252; font:400 20px/28px "IBM Plex Sans",sans-serif; }

@media (max-width:760px) {
  .growth-cta { padding:56px 16px; }
  .growth-cta__panel { min-height:650px; }
  .growth-cta__content { gap:32px; width:calc(100% - 32px); }
  .growth-cta__copy h2 { font-size:40px; line-height:48px; }
  .growth-cta__copy p { max-width:480px; font-size:18px; line-height:26px; }
  .growth-cta__orbit-art { width:900px; }
  .growth-cta__decoration { top:-180px; width:430px; height:430px; }
  .growth-cta__decoration--left { left:-250px; }
  .growth-cta__decoration--right { right:-250px; }
}

@media (max-width:420px) {
  .growth-cta__copy h2 { font-size:32px; line-height:40px; }
  .growth-cta__copy p { font-size:16px; line-height:24px; }
}

/* Shared CAPTA spacing and typography for capability sections 01–03 */
.capability-story,
.capability-next-section,
.capability-followup-section,
.capability-optimization-section,
.capability-retention-section { padding:80px; }
.capability-story,
.capability-next-section,
.capability-followup-section,
.capability-optimization-section,
.capability-retention-section { --journey-x:max(24px,calc(50% - 551px)); }
.capability-story::before,
.capability-next-section::before,
.capability-followup-section::before,
.capability-optimization-section::before,
.capability-retention-section::before { content:""; position:absolute; top:0; bottom:0; left:var(--journey-x); z-index:1; width:2px; background:#f5f5f5; }
.capability-story::after,
.capability-next-section::after,
.capability-followup-section::after,
.capability-optimization-section::after,
.capability-retention-section::after { content:""; position:absolute; top:92px; left:calc(var(--journey-x) - 8px); z-index:3; width:18px; height:18px; border:1px solid #e57411; border-radius:50%; background:radial-gradient(circle,#e57411 0 42%,#f49c2b 44% 62%,#fff 64%); box-shadow:0 -4px 7px rgba(229,116,17,.38),inset 0 2px 4px rgba(255,255,255,.5); }
.solution-intro + .capability-story::after { top:60px; }
.capability-next-section::after,
.capability-followup-section::after { top:132px; }
.capability-optimization-section::after { top:52px; }
.solution-intro { position:relative; left:50%; width:100vw; padding:104px 80px 56px; translate:-50% 0; background:#fff; }
.solution-intro__inner { width:min(1022px,100%); margin:0 auto; text-align:center; }
.solution-intro .solution-intro__chip { margin-bottom:20px; }
.solution-intro h2 { max-width:900px; margin:0 auto; color:#0a0a0a; font:600 56px/64px Manrope,sans-serif; letter-spacing:0; }
.solution-intro h2 span { color:var(--orange); }
.solution-intro p { max-width:720px; margin:12px auto 0; color:#525252; font:400 18px/26px "IBM Plex Sans",sans-serif; }
.solution-intro + .capability-story { padding-top:48px; }
.capability-card { width:min(1022px,100%); }
.capability-card__copy { width:100%; }
.capability-card__eyebrow { margin-bottom:24px; }
.capability-card h2 { width:min(800px,100%); max-width:none; margin:0; color:#0a0a0a; text-align:left; font-family:Manrope,sans-serif; font-size:34px; font-weight:600; line-height:42px; letter-spacing:0; }
.capability-card h2 .capability-card__accent { color:inherit; }
.capability-card__copy>p { width:min(800px,100%); max-width:none; margin:20px 0 0; text-align:left; font-family:"IBM Plex Sans",sans-serif; font-size:18px; font-weight:400; line-height:26px; }
.capability-retention-section { padding-bottom:0; }
.personalization-section + .integrations-ecosystem-section { margin-top:0; }

/* Recorrido CAPTA: espaciado unificado con la escala 80/64 de la guía. */
.solution-intro { padding:80px; }
.solution-intro + .capability-story,
.capability-story,
.capability-next-section,
.capability-followup-section,
.capability-optimization-section,
.capability-retention-section { padding:80px 80px 0; }
.capability-card--static .capability-card__copy,
.capability-followup-section .capability-card__copy { padding-block:0; }
.acquisition-stage,
.crm-automation,
.followup-phone-demo,
.campaign-signal { margin-top:64px; }
.capability-story::after,
.capability-next-section::after,
.capability-followup-section::after,
.capability-optimization-section::after,
.capability-retention-section::after,
.solution-intro + .capability-story::after { top:92px; }
.personalization-section + .integrations-ecosystem-section { margin-top:0; }

/* El recorrido comienza y termina en el centro de sus puntos extremos. */
.capability-story,
.capability-next-section,
.capability-followup-section,
.capability-optimization-section,
.capability-retention-section { --journey-x:max(36px,calc(50% - 539px)); }
.solution-intro + .capability-story::before { top:101px; }
.capability-retention-section::before { bottom:calc(100% - 101px); }

@media (max-width:980px) {
  .solution-intro { padding:64px 40px; }
  .solution-intro + .capability-story,
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section { padding:64px 40px 0; }
  .acquisition-stage,
  .crm-automation,
  .followup-phone-demo,
  .campaign-signal { margin-top:48px; }
  .capability-story::after,
  .capability-next-section::after,
  .capability-followup-section::after,
  .capability-optimization-section::after,
  .capability-retention-section::after,
  .solution-intro + .capability-story::after { top:76px; }
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section { --journey-x:28px; }
  .solution-intro + .capability-story::before { top:85px; }
  .capability-retention-section::before { bottom:calc(100% - 85px); }
}

@media (max-width:620px) {
  .solution-intro { padding:56px 24px; }
  .solution-intro + .capability-story,
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section { padding:56px 24px 0 36px; }
  .acquisition-stage,
  .crm-automation,
  .followup-phone-demo,
  .campaign-signal { margin-top:40px; }
  .campaign-signal { margin-top:40px; }
  .capability-story::after,
  .capability-next-section::after,
  .capability-followup-section::after,
  .capability-optimization-section::after,
  .capability-retention-section::after,
  .solution-intro + .capability-story::after { top:65px; }
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section { --journey-x:18px; }
  .solution-intro + .capability-story::before { top:74px; }
  .capability-retention-section::before { bottom:calc(100% - 74px); }
}

/* El cierre de Seguimiento usa la altura visual real del celular reducido. */
.followup-phone-demo.is-conversation-complete { height:538px; }

@media (max-width:620px) {
  .followup-phone-demo.is-conversation-complete { height:min(325px,calc(116vw - 74.24px)); }
}

/* Optimización: compra en Shopify, registro del cliente y evento enviado a Meta. */
.campaign-signal { position:relative; isolation:isolate; width:min(900px,100%); height:420px; overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; font-family:"IBM Plex Sans",sans-serif; }
.commerce-checkout { position:absolute; top:50%; left:50%; z-index:3; width:380px; padding:20px; border:1px solid #e5e5e5; border-radius:16px; background:#fff; box-shadow:var(--animation-shadow); transform:translate(-50%,-50%) scale(1); transform-origin:center; transition:left .8s cubic-bezier(.22,1,.36,1),width .8s cubic-bezier(.22,1,.36,1),padding .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1); }
.commerce-checkout__header { display:flex; align-items:center; gap:10px; padding-bottom:16px; border-bottom:1px solid #e5e5e5; }
.commerce-checkout__header>span { display:grid; flex:0 0 38px; width:38px; height:38px; padding:6px; place-items:center; border:1px solid #e5e5e5; border-radius:10px; background:#fafafa; }
.commerce-checkout__header img,.campaign-customer-card__header img { display:block; width:100%; height:100%; object-fit:contain; }
.commerce-checkout__header div,.commerce-checkout__product div,.campaign-customer-card__header div { display:flex; flex-direction:column; min-width:0; }
.commerce-checkout__header strong { color:#0a0a0a; font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:600; }
.commerce-checkout__header small { color:#737373; font-size:var(--card-body-size); line-height:var(--card-body-lh); }
.commerce-checkout__product { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:12px; padding:18px 0; }
.commerce-checkout__product-image { display:grid; width:58px; height:58px; padding:10px; place-items:center; border:1px solid #e5e5e5; border-radius:12px; background:#fef7ec; }
.commerce-checkout__product-image img { display:block; width:100%; height:100%; object-fit:contain; }
.commerce-checkout__product div strong { color:#262626; font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:600; }
.commerce-checkout__product div small { color:#737373; font-size:var(--card-body-size); line-height:var(--card-body-lh); }
.commerce-checkout__product>b { color:#262626; font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:600; }
.commerce-checkout__summary { display:flex; align-items:center; justify-content:space-between; padding:12px 0 16px; border-top:1px solid #e5e5e5; color:#525252; font-size:var(--card-body-size); line-height:var(--card-body-lh); }
.commerce-checkout__summary strong { color:#0a0a0a; font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:600; }
.commerce-checkout__buy { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px; border:0; border-radius:10px; color:#fff; background:#e57411; box-shadow:var(--floating-shadow); cursor:pointer; transition:background-color .3s ease,box-shadow .3s ease,transform .25s ease; }
.commerce-checkout__buy:hover { transform:scale(1.015); }
.campaign-signal.is-pressing .commerce-checkout__buy { transform:scale(.975); }
.commerce-checkout__buy strong { font-weight:600; font-size:var(--card-title-size); line-height:var(--card-title-lh); font-family:"IBM Plex Sans",sans-serif; }
.commerce-checkout__buy-check { display:none; width:20px; height:20px; place-items:center; border-radius:50%; color:#16a34a; background:#fff; font-size:13px; font-weight:700; }
.campaign-signal.is-purchased .commerce-checkout__buy { background:#16a34a; box-shadow:0 0 0 6px rgba(22,163,74,.1),var(--floating-shadow); }
.campaign-signal.is-purchased .commerce-checkout__buy-check { display:grid; }
/* Al separarse, el checkout se achica con su ancho real (no con scale) para conservar el tamaño del texto. */
.campaign-signal.is-splitting .commerce-checkout { left:21%; width:274px; padding:14px; transform:translate(-50%,-50%); }
.campaign-signal.is-splitting .commerce-checkout__product { grid-template-columns:46px 1fr auto; gap:8px; padding:12px 0; }
.campaign-signal.is-splitting .commerce-checkout__product-image { width:46px; height:46px; padding:8px; }
.campaign-customer-card { position:absolute; top:50%; right:3%; z-index:2; width:410px; overflow:hidden; border:1px solid #e5e5e5; border-radius:16px; opacity:0; background:#fff; box-shadow:var(--animation-shadow); transform:translate(28px,-50%) scale(.96); transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.campaign-signal.is-customer-visible .campaign-customer-card { opacity:1; transform:translate(0,-50%) scale(1); }
.campaign-customer-card__header { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #e5e5e5; }
.campaign-customer-card__avatar { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border-radius:50%; color:#fff; background:#e57411; font-size:var(--card-body-size); line-height:var(--card-body-lh); font-weight:600; }
.campaign-customer-card__header div>strong { color:#262626; font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:600; }
.campaign-customer-card__header small { display:flex; align-items:center; gap:5px; color:#737373; font-size:var(--card-body-size); line-height:var(--card-body-lh); }
.campaign-customer-card__header small img { width:14px; height:14px; }
.campaign-customer-card__body { padding:14px 16px 16px; background:#fafafa; }
.campaign-customer-card__label { display:block; margin-bottom:8px; color:#737373; font-size:var(--card-body-size); line-height:var(--card-body-lh); font-weight:500; }
.campaign-customer-step { position:relative; display:flex; align-items:center; gap:9px; max-height:0; padding:0; overflow:hidden; opacity:0; transform:translateY(5px); transition:max-height .35s ease,padding .35s ease,opacity .3s ease,transform .35s ease; }
.campaign-customer-step::after { position:absolute; top:0; bottom:-1px; left:10px; z-index:0; width:1px; content:""; background:#d4d4d4; }
.campaign-customer-step--one::after { top:50%; }
.campaign-customer-step--three::after { bottom:50%; }
.campaign-customer-step>i { position:relative; z-index:1; display:grid; flex:0 0 20px; width:20px; height:20px; place-items:center; border:0; border-radius:50%; background:#fff; }
.campaign-customer-step>i::before { width:13px; height:13px; border:3px solid #f9d28e; border-radius:50%; content:""; background:#e57411; }
.campaign-customer-step>i img { display:none; width:20px; height:20px; }
.campaign-customer-step>span { display:flex; flex-direction:column; }
.campaign-customer-step strong { color:#262626; font-size:var(--card-step-size); line-height:var(--card-step-lh); font-weight:500; }
.campaign-customer-step small { color:#737373; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); }
.campaign-signal.is-step-one .campaign-customer-step--one,
.campaign-signal.is-step-two .campaign-customer-step--one,
.campaign-signal.is-step-two .campaign-customer-step--two,
.campaign-signal.is-step-three .campaign-customer-step { max-height:44px; padding:6px 0; opacity:1; transform:translateY(0); }
.campaign-signal.is-step-three .campaign-customer-step--three>i { width:20px; height:20px; flex-basis:20px; border:0; background:#fff; }
.campaign-signal.is-step-three .campaign-customer-step--three>i::before { display:none; }
.campaign-signal.is-step-three .campaign-customer-step--three>i img { display:block; }
.campaign-signal.is-step-three .campaign-customer-step--three strong { color:#16a34a; font-weight:600; }
.campaign-meta-event { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; border:1px solid #bbf7d0; border-radius:12px; opacity:0; background:#f0fdf4; box-shadow:var(--floating-shadow); transform:translateY(8px) scale(.97); transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1); }
.campaign-meta-event__logo { display:grid; width:42px; height:42px; padding:7px; place-items:center; border:1px solid #e5e5e5; border-radius:10px; background:#fff; }
.campaign-meta-event__logo img { display:block; width:100%; height:100%; object-fit:contain; }
.campaign-meta-event__copy { display:flex; flex-direction:column; }
.campaign-meta-event__copy b { display:flex; align-items:center; gap:5px; color:#16a34a; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); font-weight:600; }
.campaign-meta-event__copy b img { width:14px; height:14px; }
.campaign-meta-event__copy strong { margin-top:1px; color:#262626; font-size:var(--card-step-size); line-height:var(--card-step-lh); font-weight:600; }
.campaign-signal.is-meta-sent .campaign-meta-event { opacity:1; transform:translateY(0) scale(1); }

@media (max-width:620px) {
  .campaign-signal { height:340px; margin-top:40px; }
  .commerce-checkout { width:min(300px,calc(100% - 28px)); padding:14px; }
  .commerce-checkout__header { padding-bottom:11px; }
  .commerce-checkout__product { grid-template-columns:46px 1fr auto; gap:8px; padding:12px 0; }
  .commerce-checkout__product-image { width:46px; height:46px; padding:8px; }
  .commerce-checkout__summary { padding:9px 0 11px; }
  .commerce-checkout__buy { height:40px; }
  .campaign-signal.is-splitting .commerce-checkout { left:22%; width:44%; padding:8px; transform:translate(-50%,-50%); }
  .campaign-signal.is-splitting .commerce-checkout__header { gap:6px; padding-bottom:8px; }
  .campaign-signal.is-splitting .commerce-checkout__header>span { flex-basis:24px; width:24px; height:24px; padding:3px; border-radius:6px; }
  .campaign-signal.is-splitting .commerce-checkout__product { grid-template-columns:28px 1fr auto; gap:6px; padding:8px 0; }
  .campaign-signal.is-splitting .commerce-checkout__product-image { width:28px; height:28px; padding:4px; border-radius:7px; }
  .campaign-signal.is-splitting .commerce-checkout__summary { padding:6px 0 8px; }
  .campaign-signal.is-splitting .commerce-checkout__buy { gap:4px; height:30px; border-radius:7px; }
  .campaign-signal.is-splitting .commerce-checkout__buy-check { width:14px; height:14px; font-size:9px; }
  .campaign-customer-card { right:0; width:53%; border-radius:12px; }
  .campaign-customer-card__header { gap:6px; padding:9px; }
  .campaign-customer-card__avatar { flex-basis:28px; width:28px; height:28px; }
  .campaign-customer-card__header small { gap:3px; }
  .campaign-customer-card__header small img { width:10px; height:10px; }
  .campaign-customer-card__body { padding:9px; }
  .campaign-customer-card__label { margin-bottom:4px; }
  .campaign-customer-step { gap:6px; }
  .campaign-signal.is-step-one .campaign-customer-step--one,
  .campaign-signal.is-step-two .campaign-customer-step--one,
  .campaign-signal.is-step-two .campaign-customer-step--two,
  .campaign-signal.is-step-three .campaign-customer-step { max-height:34px; padding:4px 0; }
  .campaign-meta-event { grid-template-columns:28px 1fr; gap:6px; margin-top:6px; padding:7px; border-radius:9px; }
  .campaign-meta-event__logo { width:28px; height:28px; padding:5px; border-radius:7px; }
  .campaign-meta-event__copy b { gap:3px; }
  .campaign-meta-event__copy b img { width:10px; height:10px; }
}

@media (prefers-reduced-motion:reduce) {
  .commerce-checkout,.campaign-customer-card,.campaign-customer-step,.campaign-meta-event { transition:none; }
}

/* Elevación unificada para las demostraciones del recorrido CAPTA. */
.capability-story,
.capability-next-section,
.capability-followup-section,
.capability-optimization-section,
.capability-retention-section { overflow:visible; }
.acquisition-visual { overflow:visible; }
.acquisition-dashboard,
.crm-lead-card,
.followup-crm-card,
.capta-phone--internal { box-shadow:var(--animation-shadow); }
.channel-chip { box-shadow:var(--floating-shadow); }

.acquisition-stage,
.crm-automation,
.followup-phone-demo { margin-top:40px; }
.acquisition-stage { margin-top:4px; }
.crm-automation,
.followup-phone-demo,
.campaign-signal { margin-top:clamp(180px,calc(53vh - 200px),320px); }
.followup-phone-demo { transition:height .8s cubic-bezier(.22,1,.36,1); }
.followup-phone-demo.is-conversation-complete { height:600px; }
.capability-followup-section { padding-bottom:calc(clamp(180px,calc(53vh - 200px),320px) - 40px); }
.capability-optimization-section { padding-top:40px; }

@media (max-width:980px) {
  .hero__layout { margin-bottom:64px; }
  .problem-static-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section { padding:64px 40px; }
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section { --journey-x:28px; }
  .capability-story::after,
  .capability-next-section::after,
  .capability-followup-section::after,
  .capability-optimization-section::after,
  .capability-retention-section::after { top:76px; }
  .solution-intro { padding:80px 40px 48px; }
  .solution-intro + .capability-story { padding-top:40px; }
  .solution-intro + .capability-story::after { top:52px; }
  .capability-next-section::after,
  .capability-followup-section::after { top:116px; }
  .capability-optimization-section::after { top:76px; }
  .acquisition-stage { margin-top:32px; }
  .crm-automation,
  .followup-phone-demo,
  .campaign-signal { margin-top:clamp(160px,calc(46vh - 150px),240px); }
  .capability-followup-section { padding-bottom:calc(clamp(160px,calc(46vh - 150px),240px) - 64px); }
}

@media (max-width:620px) {
  .hero__layout { margin-bottom:64px; }
  .problem-static-intro { padding:56px 24px 64px; }
  .problem-static-intro h2 { margin-top:20px; font-size:36px; line-height:44px; }
  .problem-static-intro__copy { margin-top:12px; font-size:16px; line-height:24px; }
  .problem-static-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:40px; }
  .problem-static-card { gap:16px; padding:14px; }
  .problem-static-card .flow-bubble__icon { flex-basis:42px; width:42px; height:42px; padding:7px; }
  .problem-static-card .flow-bubble__icon>img:not(.problem-static-card__status) { width:22px; height:22px; }
  .problem-static-card .flow-bubble__icon>.problem-static-card__status { top:-6px; right:-6px; width:18px; height:18px; }
  .problem-static-card strong { font-size:15px; line-height:20px; }
  .problem-static-card__content p { font-size:12px; line-height:18px; }
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section { padding:56px 24px 64px; }
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section { --journey-x:18px; padding-left:36px; }
  .capability-story::after,
  .capability-next-section::after,
  .capability-followup-section::after,
  .capability-optimization-section::after,
  .capability-retention-section::after { top:65px; }
  .solution-intro { padding:64px 24px 40px; }
  .solution-intro .solution-intro__chip { margin-bottom:20px; }
  .solution-intro h2 { font-size:36px; line-height:44px; letter-spacing:0; }
  .solution-intro p { margin-top:12px; font-size:16px; line-height:24px; }
  .solution-intro + .capability-story { padding-top:40px; }
  .solution-intro + .capability-story::after { top:49px; }
  .capability-card__eyebrow { margin-bottom:16px; }
  .capability-card h2 { font-size:28px; line-height:36px; letter-spacing:0; }
  .capability-card__copy>p { margin-top:16px; font-size:16px; line-height:24px; }
  .acquisition-stage,
  .crm-automation,
  .followup-phone-demo { margin-top:32px; }
  .acquisition-stage { margin-top:26px; }
  .crm-automation,
  .followup-phone-demo,
  .campaign-signal { margin-top:82px; }
  .followup-phone-demo.is-conversation-complete { height:410px; }
  .capability-followup-section { padding-bottom:50px; }
  .capability-optimization-section { padding-top:32px; }
  .capability-optimization-section::after { top:41px; }
  .campaign-signal { height:310px; margin-top:82px; border-radius:20px; }
}

/* Retención conecta directamente con integraciones, sin una banda intermedia. */
.capability-retention-section { padding-bottom:0; }
.personalization-section + .integrations-ecosystem-section { margin-top:0; }

/* Espaciado definitivo del recorrido según la escala de la guía CAPTA. */
.solution-intro { padding:80px; }
.solution-intro + .capability-story,
.capability-story,
.capability-next-section,
.capability-followup-section,
.capability-optimization-section,
.capability-retention-section { padding:80px 80px 40px; }
.capability-card--static .capability-card__copy,
.capability-followup-section .capability-card__copy { padding-block:0; }
.acquisition-stage,
.crm-automation,
.followup-phone-demo,
.campaign-signal { margin-top:64px; }
.capability-story::after,
.capability-next-section::after,
.capability-followup-section::after,
.capability-optimization-section::after,
.capability-retention-section::after,
.solution-intro + .capability-story::after { top:92px; }
.personalization-section + .integrations-ecosystem-section { margin-top:0; }

@media (max-width:980px) {
  .personalization-section + .integrations-ecosystem-section { padding-top:64px; }
  .solution-intro { padding:64px 40px; }
  .solution-intro + .capability-story,
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section { padding:64px 40px 36px; }
  .acquisition-stage,
  .crm-automation,
  .followup-phone-demo,
  .campaign-signal { margin-top:48px; }
  .capability-story::after,
  .capability-next-section::after,
  .capability-followup-section::after,
  .capability-optimization-section::after,
  .capability-retention-section::after,
  .solution-intro + .capability-story::after { top:76px; }
}

@media (max-width:620px) {
  .personalization-section + .integrations-ecosystem-section { padding-top:56px; }
  .solution-intro { padding:56px 24px; }
  .solution-intro + .capability-story,
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section { padding:56px 24px 32px 36px; }
  .acquisition-stage,
  .crm-automation,
  .followup-phone-demo,
  .campaign-signal { margin-top:40px; }
  .capability-story::after,
  .capability-next-section::after,
  .capability-followup-section::after,
  .capability-optimization-section::after,
  .capability-retention-section::after,
  .solution-intro + .capability-story::after { top:65px; }
}

/* Altura final de Seguimiento ajustada al celular inicial más compacto. */
.followup-phone-demo.is-conversation-complete { height:538px; }

@media (max-width:620px) {
  .followup-phone-demo.is-conversation-complete { height:min(325px,calc(116vw - 74.24px)); }
}

/* La animación de Optimización vive directamente sobre la sección, sin panel exterior. */
.campaign-signal { height:320px; margin-top:64px; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
.capability-optimization-section { z-index:21; padding-bottom:40px; }
.capability-retention-section { padding-top:80px; }
.capability-retention-section::after { top:92px; }
.capability-retention-section::before { bottom:calc(100% - 101px); }

@media (max-width:980px) {
  .campaign-signal { margin-top:48px; }
  .capability-optimization-section { padding-bottom:36px; }
  .capability-retention-section { padding-top:64px; }
  .capability-retention-section::after { top:76px; }
  .capability-retention-section::before { bottom:calc(100% - 85px); }
}

@media (max-width:620px) {
  .campaign-signal { height:234px; margin-top:40px; border-radius:0; background:transparent; box-shadow:none; }
  .capability-optimization-section { padding-bottom:32px; }
  .capability-retention-section { padding-top:56px; }
  .capability-retention-section::after { top:65px; }
  .capability-retention-section::before { bottom:calc(100% - 74px); }
}

/* Retención: recorrido, remarketing de 30 días, mensaje y recompra. */
.retention-repurchase-demo { position:relative; width:min(900px,100%); height:max(380px,var(--demo-phone-height)); margin:64px auto 0; overflow:visible; font-family:"IBM Plex Sans",sans-serif; }
.retention-journey-card { position:absolute; top:50%; left:50%; z-index:3; width:430px; overflow:hidden; border:1px solid #e5e5e5; border-radius:16px; opacity:0; background:#fff; box-shadow:var(--animation-shadow); transform:translate(-50%,-50%) scale(.96); transform-origin:center; transition:left .8s cubic-bezier(.22,1,.36,1),width .8s cubic-bezier(.22,1,.36,1),opacity .5s ease,transform .8s cubic-bezier(.22,1,.36,1); }
.retention-repurchase-demo.is-card-visible .retention-journey-card { opacity:1; transform:translate(-50%,-50%) scale(1); }
.retention-repurchase-demo.is-split .retention-journey-card { left:27%; width:352px; transform:translate(-50%,-50%); }
.retention-journey-card__header { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #e5e5e5; }
.retention-journey-card__avatar { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border-radius:50%; color:#fff; background:#e57411; font-size:var(--card-body-size); line-height:var(--card-body-lh); font-weight:600; }
.retention-journey-card__header>div { display:flex; flex-direction:column; min-width:0; }
.retention-journey-card__header strong { color:#262626; font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:600; }
.retention-journey-card__header small { display:flex; align-items:center; gap:5px; color:#737373; font-size:var(--card-body-size); line-height:var(--card-body-lh); }
.retention-journey-card__header small img { width:14px; height:14px; object-fit:contain; }
.retention-journey-card__body { padding:14px 16px 16px; background:#fafafa; }
.retention-journey-card__label { display:block; margin-bottom:7px; color:#737373; font-size:var(--card-body-size); line-height:var(--card-body-lh); font-weight:500; }
.retention-journey-step { position:relative; display:flex; align-items:center; gap:9px; min-height:38px; padding:5px 0; }
.retention-journey-step::after { position:absolute; top:0; bottom:-1px; left:10px; z-index:0; width:1px; content:""; background:#d4d4d4; }
.retention-journey-step:first-of-type::after { top:50%; }
.retention-journey-step:nth-of-type(5)::after { bottom:50%; }
.retention-journey-step>i { position:relative; z-index:1; display:grid; flex:0 0 20px; width:20px; height:20px; place-items:center; border:0; border-radius:50%; background:#fff; }
.retention-journey-step>i::before { width:13px; height:13px; border:3px solid #f9d28e; border-radius:50%; content:""; background:#e57411; }
.retention-journey-step>i img { display:none; width:20px; height:20px; }
.retention-journey-step--complete>i::before { display:none; }
.retention-journey-step--complete>i img { display:block; }
.retention-journey-step>span { display:flex; flex-direction:column; }
.retention-journey-step strong { color:#262626; font-size:var(--card-step-size); line-height:var(--card-step-lh); font-weight:500; }
.retention-journey-step small { color:#737373; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); }
.retention-remarketing-status { display:flex; align-items:center; gap:10px; margin-top:9px; padding:9px 10px; border:1px solid rgba(229,116,17,.2); border-radius:11px; opacity:.45; background:#fef7ec; transform:scale(.98); transition:opacity .4s ease,box-shadow .4s ease,transform .5s cubic-bezier(.22,1,.36,1); }
.retention-remarketing-status>span { display:grid; flex:0 0 42px; height:32px; place-items:center; border-radius:8px; color:#d2570d; background:#fceac9; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); font-weight:600; }
.retention-remarketing-status>div { display:flex; flex-direction:column; }
.retention-remarketing-status strong { color:#262626; font-size:var(--card-step-size); line-height:var(--card-step-lh); font-weight:600; }
.retention-remarketing-status small { color:#737373; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); }
.retention-repurchase-demo.is-remarketing .retention-remarketing-status { opacity:1; box-shadow:0 0 0 4px rgba(229,116,17,.08); transform:scale(1); }
.retention-repurchase-result { display:flex; align-items:center; gap:9px; max-height:0; padding:0 10px; overflow:hidden; border:0 solid #bbf7d0; border-radius:11px; opacity:0; background:#f0fdf4; transform:translateY(6px); transition:max-height .45s ease,margin-top .45s ease,padding .45s ease,border-width .45s ease,opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1); }
.retention-repurchase-result>img { flex:0 0 24px; width:24px; height:24px; }
.retention-repurchase-result>span { display:flex; flex-direction:column; }
.retention-repurchase-result strong { color:#16a34a; font-size:var(--card-step-size); line-height:var(--card-step-lh); font-weight:600; }
.retention-repurchase-result small { color:#737373; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); }
.retention-repurchase-demo.is-repurchase .retention-repurchase-result { max-height:56px; margin-top:9px; padding:9px 10px; border-width:1px; opacity:1; transform:translateY(0); }
.retention-phone { position:absolute; top:50%; right:8%; z-index:2; width:var(--demo-phone-width); height:var(--demo-phone-height); opacity:0; transform:translate(26px,-50%) scale(.94); transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1); }
.retention-repurchase-demo.is-phone-visible .retention-phone { opacity:1; transform:translate(0,-50%) scale(1); }
/* Como en WhatsApp: "escribiendo" y el mensaje aparecen justo encima de la barra de escribir. */
.retention-phone__conversation { position:absolute; inset:0; z-index:2; }
/* El mensaje de recompra va arriba del chat, a la misma altura donde empieza la conversación de Seguimiento. */
.retention-phone__typing { position:absolute; top:var(--demo-chat-top); left:10px; display:flex; align-items:center; gap:.4em; width:max-content; height:3em; padding:0 1em; border-radius:5px 14px 14px; opacity:0; background:#fff; box-shadow:var(--floating-shadow); font-size:var(--chat-text-size); transform:scale(.94); transform-origin:top left; }
.retention-phone__typing i { width:.5em; height:.5em; border-radius:50%; background:#d2570d; opacity:.4; animation:retention-dot .72s ease-in-out infinite; }
.retention-phone__typing i:nth-child(2) { animation-delay:.14s; }
.retention-phone__typing i:nth-child(3) { animation-delay:.28s; }
.retention-repurchase-demo.is-typing .retention-phone__typing { opacity:1; transform:scale(1); }
.retention-phone__message { position:absolute; top:var(--demo-chat-top); right:10px; left:10px; padding:10px 11px 8px; border-radius:6px 14px 14px; opacity:0; color:#fff; background:#f6b653; box-shadow:var(--floating-shadow); transform:scale(.95); transform-origin:top left; transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1); }
.retention-phone__message p { margin:0; font-size:var(--chat-text-size); line-height:var(--chat-text-lh); }
.retention-phone__message a { display:block; margin-top:8px; padding:7px 8px; border-radius:7px; color:#d2570d; background:#fff; text-decoration:none; font-size:var(--chat-meta-size); line-height:var(--chat-meta-lh); font-weight:600; }
.retention-phone__message time { display:flex; justify-content:flex-end; gap:4px; margin-top:5px; color:rgba(255,255,255,.8); font-size:var(--chat-meta-size); line-height:var(--chat-meta-lh); }
.retention-phone__message time { align-items:center; }
/* Doble palomita (trazo del check-check de Figma, nodo 7:948) con las dos palomitas iguales; escala con el texto del chat. */
.retention-phone__checks { display:inline-flex; flex:0 0 auto; color:#d2570d; }
.retention-phone__checks svg { display:block; width:1.8em; height:.95em; }
.retention-repurchase-demo.is-message-visible .retention-phone__message { opacity:1; transform:scale(1); }

@media (max-width:980px) {
  .retention-repurchase-demo { height:max(436px,var(--demo-phone-height)); margin-top:48px; }
}

@media (max-width:620px) {
  .retention-repurchase-demo { height:max(350px,var(--demo-phone-height)); margin-top:40px; }
  .retention-journey-card { width:min(240px,100%); border-radius:12px; }
  .retention-repurchase-demo.is-split .retention-journey-card { left:26%; width:52%; }
  .retention-journey-card__header { gap:6px; padding:8px 9px; }
  .retention-journey-card__avatar { flex-basis:26px; width:26px; height:26px; }
  .retention-journey-card__header small img { width:10px; height:10px; }
  .retention-journey-card__body { padding:8px 9px 9px; }
  .retention-journey-card__label { margin-bottom:3px; }
  .retention-journey-step { gap:6px; min-height:26px; padding:3px 0; }
  .retention-journey-step::after { left:7px; }
  .retention-journey-step>i { flex-basis:14px; width:14px; height:14px; }
  .retention-journey-step>i::before { width:9px; height:9px; border-width:2px; }
  .retention-journey-step>i img { width:14px; height:14px; }
  .retention-remarketing-status { gap:6px; margin-top:5px; padding:5px 6px; border-radius:8px; }
  .retention-remarketing-status>span { flex-basis:32px; height:22px; border-radius:6px; }
  .retention-repurchase-result { gap:6px; border-radius:8px; }
  .retention-repurchase-result>img { flex-basis:16px; width:16px; height:16px; }
  .retention-repurchase-demo.is-repurchase .retention-repurchase-result { margin-top:5px; padding:5px 6px; }
  .retention-phone { right:0; }
  .retention-phone__typing { left:7px; }
  .retention-phone__message { right:7px; left:7px; padding:8px; }
  .retention-phone__message a { margin-top:6px; padding:5px 6px; }
}

@media (prefers-reduced-motion:reduce) {
  .retention-journey-card,.retention-phone,.retention-phone__message,.retention-repurchase-result { transition:none; }
}

/* Seguimiento adopta la misma escala compacta de Retención. */
/* followup-animation.js ajusta --demo-phone-height (compartido con Retención) a la conversación completa; sin JS aplican los valores de :root. */
.followup-phone-demo { height:var(--followup-demo-height,var(--demo-phone-height)); }
.followup-phone { top:50%; left:50%; width:var(--demo-phone-width); height:var(--demo-phone-height); transform:translate(-50%,-50%) scale(1); transform-origin:center; }
/* Bajo la última burbuja solo queda la barra de escribir más la misma separación que hay entre mensajes (igual en Retención). */
.followup-phone-demo .followup-conversation { padding-bottom:var(--demo-chat-bottom); }
.followup-conversation .capta-message-row { width:100%; }
.followup-conversation .capta-message-row--in { align-items:flex-start; padding-right:16px; }
.followup-conversation .capta-message-row--out { align-items:flex-end; padding-left:16px; }
.followup-conversation .capta-bubble { flex:0 0 auto; width:fit-content; max-width:88%; padding:8px 9px 7px; overflow:visible; font-size:var(--chat-text-size); line-height:var(--chat-text-lh); box-shadow:var(--floating-shadow); }
.followup-conversation .capta-bubble--in { border-radius:14px 6px 14px 14px; }
.followup-conversation .capta-bubble--out { border-radius:6px 14px 14px; }
.followup-conversation .capta-message-text { padding:0; }
.followup-conversation .capta-message-meta { justify-content:flex-end; gap:4px; width:100%; padding:0; margin-top:4px; font-size:var(--chat-meta-size); line-height:var(--chat-meta-lh); white-space:nowrap; }
.followup-conversation .capta-agent-name { margin-right:auto; }
.followup-conversation [data-typing] .capta-bubble { padding:0; }
.followup-conversation .capta-message-meta { align-items:center; }
.followup-conversation .retention-phone__checks { width:auto; height:auto; margin-left:0; opacity:1; }
/* Celular compartido por Seguimiento y Retención: mismo marco, pantalla, fondo y barra de escribir. */
.demo-phone .phone-composer { right:7px; bottom:7px; left:7px; min-height:38px; padding:4px; }
.demo-phone .phone-composer__action,
.demo-phone .phone-composer__send { width:28px; height:28px; }
.demo-phone .phone-composer__field { font-size:var(--chat-meta-size); }
.followup-phone-demo.is-conversation-complete { height:var(--followup-demo-height,var(--demo-phone-height)); }
.followup-phone-demo.is-conversation-complete .followup-phone { top:50%; left:23%; transform:translate(-50%,-50%); transform-origin:center; }
.followup-crm-card { top:50%; right:3%; width:370px; }

@media (max-width:620px) {
  .demo-phone { border-width:5px; border-radius:24px; }
  .demo-phone .capta-phone-screen { border-radius:19px; }
  .followup-phone { top:50%; transform:translate(-50%,-50%) scale(1); }
  .followup-conversation .capta-message-row--in { padding-right:6px; }
  .followup-conversation .capta-message-row--out { padding-left:6px; }
  .followup-conversation .capta-bubble { width:fit-content; max-width:94%; padding:6px 7px 5px; overflow:visible; overflow-wrap:break-word; word-break:normal; hyphens:none; }
  .followup-conversation .capta-message-text { display:block; padding:0; white-space:normal; }
  .followup-conversation .capta-message-meta { display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:3px; width:100%; padding:0; margin-top:3px; white-space:nowrap; }
  .demo-phone .phone-composer { right:5px; bottom:5px; left:5px; min-height:28px; padding:3px; }
  .demo-phone .phone-composer__action,
  .demo-phone .phone-composer__send { width:22px; height:22px; }
  .followup-phone-demo.is-conversation-complete .followup-phone { top:50%; left:23%; transform:translate(-50%,-50%) scale(1); transform-origin:center; }
  .followup-crm-card { top:50%; right:0; width:52%; }
}

/* Escala tipográfica compartida por todas las tarjetas animadas (mismo tamaño en todas). */
@media (max-width:620px) {
  :root { --card-title-size:11px; --card-title-lh:15px; --card-body-size:9px; --card-body-lh:12px; --card-step-size:9px; --card-step-lh:12px; --card-meta-size:8px; --card-meta-lh:11px; --chat-text-size:9px; --chat-text-lh:13px; --chat-meta-size:6px; --chat-meta-lh:8px; --demo-phone-width:46%; --demo-phone-height:420px; --demo-chat-bottom:53px; }
}

/* Personalización: pasos en zigzag alrededor de una línea central (Figma "How CAPTA Works", nodo 661:6955). */
.personalization-section { position:relative; left:50%; z-index:20; width:100vw; padding:80px 80px 40px; translate:-50% 0; background:#fff; }
.personalization-section__header { width:min(1022px,100%); margin:0 auto; text-align:center; }
.personalization-section__chip { margin-bottom:20px; }
.personalization-section h2 { max-width:900px; margin:0 auto; color:#0a0a0a; font:600 56px/64px Manrope,sans-serif; letter-spacing:0; }
.personalization-section h2 span,
.personalization-section__statement span { display:block; color:var(--orange); }
.personalization-section__header p { max-width:720px; margin:12px auto 0; color:#525252; font:400 18px/26px "IBM Plex Sans",sans-serif; }
/* Subtítulo de los pasos: más chico y ligero que el título de cada paso (24/20/18px, 600) para no competir. */
.personalization-section__lead { margin:64px auto 0; color:#404040; text-align:center; font:500 20px/28px Manrope,sans-serif; text-wrap:balance; }
.personalization-steps { display:grid; gap:24px; width:min(1022px,100%); margin:40px auto 0; padding:0; list-style:none; }
.personalization-step { display:grid; grid-template-columns:1fr 18px 1fr; column-gap:48px; }
.personalization-step__card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.personalization-step--left .personalization-step__card { grid-column:1; grid-row:1; align-items:flex-end; text-align:right; }
.personalization-step--right .personalization-step__card { grid-column:3; grid-row:1; }
.personalization-step__icon { display:grid; width:64px; height:64px; margin-bottom:12px; place-items:center; border:1px solid #e5e5e5; border-radius:8px; background:#fafafa; }
.personalization-step__icon img { display:block; width:32px; height:32px; }
.personalization-step__number { margin-bottom:16px; color:#a3a3a3; font:500 18px/26px "IBM Plex Sans",sans-serif; }
.personalization-step h4 { margin:0; color:#000; font:600 24px/32px Manrope,sans-serif; }
.personalization-step p { max-width:440px; margin:8px 0 0; color:#737373; font:400 18px/26px "IBM Plex Sans",sans-serif; }
/* Punto naranja alineado al centro del ícono; la línea baja hasta el punto del siguiente paso. */
.personalization-step__marker { position:relative; grid-column:2; grid-row:1; }
.personalization-step__marker::before { content:""; position:absolute; top:23px; left:0; z-index:2; box-sizing:border-box; width:18px; height:18px; border:1px solid #e57411; border-radius:50%; background:radial-gradient(circle,#e57411 0 42%,#f49c2b 44% 62%,#fff 64%); box-shadow:0 -4px 7px rgba(229,116,17,.38),inset 0 2px 4px rgba(255,255,255,.5); }
.personalization-step:not(:last-child) .personalization-step__marker::after { content:""; position:absolute; top:32px; left:8px; width:2px; height:calc(100% + 24px); background:#f5f5f5; }
.personalization-section__closing { max-width:760px; margin:64px auto 0; color:#525252; text-align:center; font:400 18px/28px "IBM Plex Sans",sans-serif; }
.personalization-section__statement { max-width:760px; margin:16px auto 0; color:#0a0a0a; text-align:center; font:600 24px/32px Manrope,sans-serif; }

@media (max-width:980px) {
  .personalization-section { padding:64px 40px 36px; }
  .personalization-section__lead { margin-top:48px; font-size:18px; line-height:26px; }
  .personalization-step { column-gap:32px; }
  .personalization-step h4 { font-size:20px; line-height:28px; }
  .personalization-step__number,.personalization-step p { font-size:16px; line-height:24px; }
  .personalization-section__closing { margin-top:48px; }
}

@media (max-width:620px) {
  .personalization-section { padding:56px 24px 32px; }
  .personalization-section h2 { font-size:36px; line-height:44px; }
  .personalization-section__header p { font-size:16px; line-height:24px; }
  .personalization-section__lead { margin-top:40px; font-size:16px; line-height:24px; }
  .personalization-steps { margin-top:32px; }
  /* En celular, sin la línea de puntos: zigzag con bloques al 82% del ancho (1 a la izquierda, 2 a la derecha…). */
  .personalization-step { grid-template-columns:1fr; }
  .personalization-step__marker { display:none; }
  .personalization-step__card { width:82%; }
  .personalization-step--left .personalization-step__card { grid-column:1; justify-self:start; align-items:flex-start; text-align:left; }
  .personalization-step--right .personalization-step__card { grid-column:1; justify-self:end; align-items:flex-end; text-align:right; }
  .personalization-step__icon { width:52px; height:52px; margin-bottom:10px; }
  .personalization-step__icon img { width:26px; height:26px; }
  .personalization-step__number { margin-bottom:8px; }
  .personalization-step h4 { font-size:18px; line-height:26px; }
  .personalization-step p { font-size:15px; line-height:22px; }
  .personalization-section__closing { margin-top:40px; font-size:16px; line-height:24px; }
  .personalization-section__statement { font-size:20px; line-height:28px; }
}

/* Pie de página (Figma "Section - Footer", nodo 661:7564). */
.site-footer { display:flex; flex-direction:column; gap:80px; padding:80px 100px 56px; background:linear-gradient(180.3deg,#fff 8.81%,rgba(255,255,255,0) 12.79%,#e57411 99.19%); font-family:"IBM Plex Sans",sans-serif; }
.site-footer__content { display:flex; align-items:flex-start; gap:100px; }
.site-footer__company { display:flex; flex:0 0 387px; flex-direction:column; gap:24px; }
.site-footer__brand { display:flex; align-items:center; gap:8px; width:max-content; text-decoration:none; }
.site-footer__logo { position:relative; display:block; width:48px; height:48px; }
.site-footer__logo img { position:absolute; top:4px; left:4px; display:block; width:40px; height:40px; }
.site-footer__wordmark { display:block; width:72.6873px; height:24px; }
.site-footer__company p { margin:0; color:#525252; font-size:14px; line-height:20px; }
.site-footer__nav { display:flex; justify-content:space-between; width:552px; }
.site-footer__links { display:flex; flex-direction:column; gap:12px; min-width:103px; }
.site-footer__links h2 { margin:0; color:#0a0a0a; font:500 18px/26px "IBM Plex Sans",sans-serif; }
.site-footer__links ul { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.site-footer__links a { color:#525252; font-size:14px; line-height:20px; white-space:nowrap; text-decoration:none; transition:color .2s ease; }
.site-footer__links a:hover { color:#e57411; }
.site-footer__bottom { display:flex; align-items:center; gap:32px; padding-top:32px; border-top:1px solid rgba(255,255,255,.2); }
.site-footer__bottom p { flex:1 1 0; min-width:0; margin:0; color:#fff; font-size:16px; line-height:24px; }
.site-footer__social { display:flex; gap:12px; }
.site-footer__social-link { display:grid; width:32px; height:32px; place-items:center; border-radius:40px; background:rgba(255,255,255,.2); transition:background-color .2s ease; }
.site-footer__social-link:hover { background:rgba(255,255,255,.32); }
.site-footer__social-link img { display:block; max-width:16px; max-height:16px; }

@media (max-width:1180px) {
  .site-footer { padding-inline:40px; }
  .site-footer__content { gap:48px; }
  .site-footer__company { flex-basis:320px; }
  .site-footer__nav { flex:1 1 auto; width:auto; max-width:552px; gap:24px; }
}

@media (max-width:820px) {
  .site-footer { gap:56px; padding:64px 40px 48px; }
  .site-footer__content { flex-direction:column; gap:40px; }
  .site-footer__company { flex-basis:auto; max-width:420px; }
  .site-footer__nav { width:100%; max-width:none; }
}

@media (max-width:620px) {
  .site-footer { gap:48px; padding:56px 24px 40px; }
  .site-footer__nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; }
  .site-footer__bottom { flex-direction:column; align-items:flex-start; gap:20px; padding-top:24px; }
}

/* Espacio en blanco entre secciones (Figma: cada sección con 80px arriba y abajo → 160px entre contenidos).
   Tableta y móvil escalan con los paddings de la página: 64px (128px) y 56px (112px). */
.hero { padding-bottom:0; }
/* El formulario del hero es su último contenido: su margen inferior hace de padding de sección. */
.hero__layout { margin-bottom:80px; }
.problem-static-intro { padding-top:80px; padding-bottom:80px; }
/* El círculo de integraciones deja ~22px vacíos bajo los íconos dentro de su caja recortada. */
.crm-ecosystem { margin-bottom:-22px; }
.solution-intro + .capability-story,
.capability-story,
.capability-next-section,
.capability-followup-section,
.capability-optimization-section,
.capability-retention-section,
.personalization-section,
.integrations-ecosystem-section { padding-bottom:80px; }
.growth-cta { padding-block:80px; }

@media (max-width:980px) {
  .hero__layout { margin-bottom:64px; }
  .problem-static-intro { padding-top:64px; padding-bottom:64px; }
  .solution-intro + .capability-story,
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section,
  .personalization-section,
  .integrations-ecosystem-section { padding-bottom:64px; }
  .growth-cta { padding-block:64px; }
}

@media (max-width:620px) {
  .hero { padding-bottom:0; }
  .hero__layout { margin-bottom:56px; }
  .problem-static-intro { padding-top:56px; padding-bottom:56px; }
  .crm-ecosystem { margin-bottom:-55px; }
  .solution-intro + .capability-story,
  .capability-story,
  .capability-next-section,
  .capability-followup-section,
  .capability-optimization-section,
  .capability-retention-section,
  .personalization-section,
  .integrations-ecosystem-section { padding-bottom:56px; }
  .growth-cta { padding-block:56px; }
}

/* "La solución" es el título de las tarjetas de capacidades: la primera tarjeta arranca a la distancia
   de párrafo→contenido (64/48/40px), no a la de sección→sección. El punto y la línea siguen al título. */
.solution-intro { padding-bottom:0; }
.solution-intro + .capability-story { padding-top:64px; }
.solution-intro + .capability-story::after { top:76px; }
.solution-intro + .capability-story::before { top:85px; }
@media (max-width:980px) {
  .solution-intro { padding-bottom:0; }
  .solution-intro + .capability-story { padding-top:48px; }
  .solution-intro + .capability-story::after { top:60px; }
  .solution-intro + .capability-story::before { top:69px; }
}
@media (max-width:620px) {
  .solution-intro { padding-bottom:0; }
  .solution-intro + .capability-story { padding-top:40px; }
  .solution-intro + .capability-story::after { top:49px; }
  .solution-intro + .capability-story::before { top:58px; }
}

/* Párrafos del recorrido de capacidades: en tableta y celular se agrupan a la izquierda (82% del ancho),
   igual que los pasos de Personalización. En escritorio ya están limitados a 800px. */
@media (max-width:980px) {
  .capability-card__copy > p { width:82%; max-width:82%; }
}

/* Tarjeta fija de Adquisición, basada en el contenedor 661:7505 de la guía CAPTA. */
.acquisition-snapshot-section { position:relative; left:50%; width:100vw; padding:80px; translate:-50% 0; background:#fff; }
.acquisition-snapshot-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:48px; width:min(1280px,100%); margin:0 auto; padding:80px; overflow:hidden; border-radius:18px; background:#fef7ec; isolation:isolate; }
.acquisition-snapshot-card::before { position:absolute; inset:0; z-index:0; content:""; opacity:.28; background-image:url("assets/capta-pattern-tile.svg?v=2"); background-position:0 0; background-repeat:repeat; background-size:112px 96px; pointer-events:none; }
.acquisition-snapshot-card__copy,
.acquisition-snapshot { position:relative; z-index:1; }
.acquisition-snapshot-card__copy { display:flex; flex-direction:column; align-items:center; gap:16px; max-width:860px; text-align:center; }
.acquisition-snapshot-card__copy h2 { margin:0; color:#e57411; font:600 56px/64px Manrope,sans-serif; letter-spacing:-.03em; }
.acquisition-snapshot-card__copy p { max-width:760px; margin:0; color:#525252; font:400 20px/28px "IBM Plex Sans",sans-serif; }
.acquisition-snapshot { --data-progress:1; width:min(680px,100%); padding:16px; border:1px solid #e5e5e5; border-radius:16px; background:#fff; box-shadow:var(--animation-shadow); font-family:"IBM Plex Sans",sans-serif; }
.acquisition-snapshot .dash-channel { opacity:1; transform:none; }
.acquisition-snapshot .dash-channel>i b { transform:scaleX(1); }

@media (max-width:980px) {
  .acquisition-snapshot-section { padding:64px 40px; }
  .acquisition-snapshot-card { gap:40px; padding:64px 40px; }
  .acquisition-snapshot-card__copy h2 { font-size:44px; line-height:52px; }
  .acquisition-snapshot-card__copy p { font-size:18px; line-height:28px; }
}

@media (max-width:620px) {
  .acquisition-snapshot-section { padding:56px 16px; }
  .acquisition-snapshot-card { gap:32px; padding:40px 16px; border-radius:18px; }
  .acquisition-snapshot-card::before { display:none; }
  .acquisition-snapshot-card__copy { align-items:flex-start; text-align:left; }
  .acquisition-snapshot-card__copy h2 { font-size:30px; line-height:38px; letter-spacing:-.02em; }
  .acquisition-snapshot-card__copy p { font-size:16px; line-height:24px; }
  .acquisition-snapshot { padding:10px; border-radius:14px; }
  .acquisition-snapshot .dash-title-row { padding:11px 0 9px; }
  .acquisition-snapshot .dash-title-row h3 { font-size:14px; line-height:18px; }
  .acquisition-snapshot .dash-title-row>span { font-size:8px; }
  .acquisition-snapshot .dash-total { padding:9px; }
  .acquisition-snapshot .dash-total>strong { font-size:22px; line-height:28px; }
  /* Los 4 canales en una sola fila, igual que el dash animado en celular. */
  .acquisition-snapshot .dash-channels { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .acquisition-snapshot .dash-channel { grid-template-columns:18px 1fr; gap:3px 4px; padding:6px 4px; }
  .acquisition-snapshot .dash-channel img { width:17px; height:17px; }
  .acquisition-snapshot .dash-channel strong { font-size:11px; line-height:13px; }
}


/* Tarjetas de la solución: blanco arriba que degrada al crema de abajo; destellos naranjas solo en las esquinas de abajo. */
.snapshot-grid .acquisition-snapshot-card { background:linear-gradient(180deg,#fff 0%,#fef7ec 100%); }
.acquisition-snapshot-card::after { position:absolute; inset:0; z-index:0; content:""; pointer-events:none;
  background:
    radial-gradient(ellipse 38% 45% at 0% 100%, rgba(229,116,17,.14), rgba(229,116,17,0) 100%),
    radial-gradient(ellipse 38% 45% at 100% 100%, rgba(229,116,17,.14), rgba(229,116,17,0) 100%); }

/* Logos de canales del dash: WhatsApp, Instagram y Shopify traen ~20% de margen transparente por lado
   (el dibujo ocupa 107 de 176px); se amplían para verse del mismo tamaño que Inbox, que llena su lienzo. */
.dash-channel img[src*="whatsapp"],
.dash-channel img[src*="instagram"],
.dash-channel img[src*="shopify"] { transform:scale(1.64); }

/* Encabezado sobre la primera tarjeta de Adquisición: mismo formato que "La solución" (medidas del Figma). */
.snapshot-intro { width:min(1022px,100%); margin:0 auto 64px; text-align:center; }
.snapshot-intro .snapshot-intro__chip { margin-bottom:20px; }
.snapshot-intro h2 { max-width:900px; margin:0 auto; color:#0a0a0a; font:600 56px/64px Manrope,sans-serif; letter-spacing:0; }
.snapshot-intro h2 span { color:var(--orange); }
.snapshot-intro p { max-width:720px; margin:12px auto 0; color:#525252; font:400 18px/26px "IBM Plex Sans",sans-serif; }
@media (max-width:980px) {
  .snapshot-intro { margin-bottom:48px; }
}
@media (max-width:620px) {
  .snapshot-intro { margin-bottom:40px; }
  .snapshot-intro h2 { font-size:36px; line-height:44px; }
  .snapshot-intro p { font-size:16px; line-height:24px; }
}

/* Segunda tarjeta: CRM automatizado con el mismo fondo, título y párrafo que la primera; visual fijo del CRM en su estado final. */
.snapshot-card--crm .crm-snapshot { position:relative; z-index:1; margin:0; }

/* Tarjetas 1 (Adquisición) y 2 (CRM): sin patrón; el visual de CRM con el mismo formato que el dash de Adquisición. */
.acquisition-snapshot-card::before { display:none; }
.snapshot-card--crm .crm-snapshot { width:min(680px,100%); }
@media (max-width:620px) {
  .snapshot-card--crm .crm-snapshot { width:100%; }
  .snapshot-card--crm .crm-lead-card { border-radius:14px; }
}

/* Tarjetas de "La solución": dos por fila en escritorio; en tableta y celular una debajo de otra. */
.snapshot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; width:min(1280px,100%); margin:0 auto; }
.snapshot-grid .acquisition-snapshot-card { width:auto; margin:0; gap:40px; padding:56px 40px; }
.snapshot-grid .acquisition-snapshot-card__copy h2 { font-size:40px; line-height:48px; }
.snapshot-grid .acquisition-snapshot-card__copy p { font-size:18px; line-height:26px; }
.snapshot-grid .acquisition-snapshot,
.snapshot-grid .snapshot-card--crm .crm-snapshot { width:100%; }
@media (max-width:980px) {
  .snapshot-grid { grid-template-columns:1fr; gap:32px; }
  .snapshot-grid .acquisition-snapshot-card { padding:64px 40px; }
  .snapshot-grid .acquisition-snapshot-card__copy h2 { font-size:44px; line-height:52px; }
  .snapshot-grid .acquisition-snapshot,
  .snapshot-grid .snapshot-card--crm .crm-snapshot { width:min(680px,100%); }
}
@media (max-width:620px) {
  .snapshot-grid { gap:24px; }
  .snapshot-grid .acquisition-snapshot-card { gap:32px; padding:40px 16px; }
  .snapshot-grid .acquisition-snapshot-card__copy h2 { font-size:30px; line-height:38px; }
  .snapshot-grid .acquisition-snapshot-card__copy p { font-size:16px; line-height:24px; }
  .snapshot-grid .acquisition-snapshot,
  .snapshot-grid .snapshot-card--crm .crm-snapshot { width:100%; }
}

/* Historial de la tarjeta de CRM como pasos horizontales (Figma "Step Item", nodo 37:365, estado completado). */
.crm-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:16px 0 0; padding:16px 0 0; border-top:1px solid #e5e5e5; list-style:none; }
.crm-steps__item { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 4px; text-align:center; }
/* Conector de 2px desde el círculo hasta el círculo del siguiente paso. */
.crm-steps__item:not(:last-child)::after { position:absolute; top:11px; left:calc(50% + 12px); width:calc(100% - 24px); height:2px; content:""; background:#d2570d; }
.crm-steps__circle { display:grid; flex:0 0 auto; width:24px; height:24px; place-items:center; border-radius:9999px; color:#fff; background:#d2570d; font:500 12px/1 "IBM Plex Sans",sans-serif; }
.crm-steps__item strong { color:#404040; font:500 13px/18px "IBM Plex Sans",sans-serif; }
.crm-steps__item small { margin-top:-4px; color:#a3a3a3; font:400 11px/14px "IBM Plex Sans",sans-serif; }
@media (max-width:620px) {
  .crm-steps { margin-top:12px; padding-top:12px; }
  .crm-steps__item { gap:6px; padding:0 2px; }
  .crm-steps__item:not(:last-child)::after { top:9px; left:calc(50% + 10px); width:calc(100% - 20px); }
  .crm-steps__circle { width:20px; height:20px; font-size:10px; }
  .crm-steps__item strong { font-size:9px; line-height:12px; }
  .crm-steps__item small { margin-top:-3px; font-size:8px; line-height:10px; }
}

/* Tarjeta de CRM (sin "Última interacción") con la misma altura que el dash de Adquisición. */
.crm-snapshot .crm-lead-card__body { padding:12px 16px; }
.crm-snapshot .crm-steps { margin-top:14px; padding-top:13px; }
@media (max-width:620px) {
  .crm-snapshot .crm-lead-card__header { padding:6px 14px; }
  .crm-snapshot .crm-lead-card__body { gap:6px; padding:8px 14px; }
  .crm-snapshot .crm-lead-card__status { min-height:26px; padding:3px 10px; }
  .crm-snapshot .crm-steps { margin-top:8px; padding-top:8px; }
}

/* Tercera tarjeta: Seguimiento automatizado. Visual fijo del mismo tamaño que el dash, con la conversación
   de seguimiento (mismas burbujas, palomitas y fondo que los celulares), centrada en vertical. */
/* margin/padding en 0: anula los de .capta-phone-demo--internal, que se reutiliza solo por el estilo de las burbujas. */
.snapshot-card--followup .followup-snapshot { position:relative; z-index:1; display:flex; margin:0; padding:0; flex-direction:column; width:min(680px,100%); height:272px; overflow:hidden; border:1px solid #e5e5e5; border-radius:16px; background:#fff; box-shadow:var(--animation-shadow); }
.followup-snapshot__header { flex:0 0 auto; background:#fff; }
.followup-snapshot__status { margin:0 0 0 auto; }
.followup-snapshot .followup-snapshot__chat { position:relative; inset:auto; z-index:0; flex:1 1 auto; justify-content:center; gap:8px; min-height:0; padding:12px 14px; overflow:hidden; background:#fef7ec; }
.followup-snapshot__chat::before { position:absolute; inset:0; z-index:-1; content:""; opacity:.14; background:url("assets/capta-phone-tile.svg?v=1") center/52px 56px repeat; }
.followup-snapshot .capta-message-row { flex:0 0 auto; animation:none; }
.followup-snapshot .capta-bubble { max-width:72%; }
@media (max-width:620px) {
  .snapshot-card--followup .followup-snapshot { width:100%; height:211px; border-radius:14px; }
  .followup-snapshot__header { padding:6px 12px; }
  .followup-snapshot__status { min-height:24px; padding:3px 8px; }
  .followup-snapshot .followup-snapshot__chat { gap:6px; padding:8px 10px; }
  .followup-snapshot .capta-bubble { max-width:82%; }
}

/* Cuarta tarjeta: Optimización de campañas. Visual fijo del tamaño del dash: la compra (izquierda)
   y el evento de conversión de esa misma compra enviado a Meta Ads (derecha). */
.campaign-pair { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:min(680px,100%); height:272px; font-family:"IBM Plex Sans",sans-serif; }
.campaign-pair__card { display:flex; min-width:0; flex-direction:column; justify-content:space-between; gap:10px; padding:14px; overflow:hidden; border:1px solid #e5e5e5; border-radius:16px; background:#fff; box-shadow:var(--animation-shadow); }
.campaign-pair__header { display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid #e5e5e5; }
.campaign-pair__header div,.campaign-pair__product div,.campaign-pair__purchase div,.campaign-pair__signal div { display:flex; min-width:0; flex-direction:column; }
.campaign-pair strong { color:#0a0a0a; font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:600; }
.campaign-pair small { color:#737373; font-size:var(--card-body-size); line-height:var(--card-body-lh); }
.campaign-pair__store { display:grid; flex:0 0 34px; width:34px; height:34px; padding:5px; place-items:center; border:1px solid #e5e5e5; border-radius:10px; background:#fafafa; }
.campaign-pair__store img,.campaign-pair__product-image img,.campaign-pair__meta img { display:block; width:100%; height:100%; object-fit:contain; }
.campaign-pair__avatar { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border-radius:50%; color:#fff; background:#e57411; font-size:12px; font-weight:600; }
.campaign-pair__product { display:flex; align-items:center; gap:10px; }
.campaign-pair__product-image { display:grid; flex:0 0 40px; width:40px; height:40px; padding:7px; place-items:center; border:1px solid #e5e5e5; border-radius:10px; background:#fef7ec; }
.campaign-pair__total { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid #e5e5e5; color:#525252; font-size:var(--card-body-size); line-height:var(--card-body-lh); }
.campaign-pair__bought { display:flex; align-items:center; justify-content:center; gap:6px; min-height:38px; border-radius:10px; color:#fff; background:#16a34a; box-shadow:0 0 0 4px rgba(22,163,74,.1); }
.campaign-pair__bought span { display:grid; width:18px; height:18px; place-items:center; border-radius:50%; color:#16a34a; background:#fff; font-size:11px; font-weight:700; }
.campaign-pair__bought strong { color:#fff; }
.campaign-pair__purchase { display:flex; align-items:center; gap:8px; }
.campaign-pair__purchase img { flex:0 0 20px; width:20px; height:20px; }
.campaign-pair__purchase strong { color:#16a34a; }
.campaign-pair__signal { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #bbf7d0; border-radius:12px; background:#f0fdf4; }
.campaign-pair__meta { display:grid; flex:0 0 38px; width:38px; height:38px; padding:7px; place-items:center; border:1px solid #e5e5e5; border-radius:10px; background:#fff; }
.campaign-pair__signal b { display:flex; align-items:center; gap:4px; color:#16a34a; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); font-weight:600; }
.campaign-pair__signal b img { width:12px; height:12px; }
@media (max-width:620px) {
  .campaign-pair { gap:6px; width:100%; height:211px; }
  .campaign-pair__card { gap:6px; padding:8px; border-radius:12px; }
  .campaign-pair__header { gap:6px; padding-bottom:6px; }
  .campaign-pair__store,.campaign-pair__avatar { flex-basis:24px; width:24px; height:24px; padding:3px; border-radius:7px; font-size:9px; }
  .campaign-pair__avatar { border-radius:50%; }
  .campaign-pair__product { gap:6px; }
  .campaign-pair__product-image { flex-basis:28px; width:28px; height:28px; padding:4px; border-radius:7px; }
  .campaign-pair__total { padding-top:6px; }
  .campaign-pair__bought { min-height:28px; gap:4px; border-radius:8px; }
  .campaign-pair__bought span { width:14px; height:14px; font-size:9px; }
  .campaign-pair__purchase img { flex-basis:16px; width:16px; height:16px; }
  .campaign-pair__signal { gap:6px; padding:6px; border-radius:9px; }
  .campaign-pair__meta { flex-basis:26px; width:26px; height:26px; padding:4px; border-radius:7px; }
  .campaign-pair__signal b img { width:10px; height:10px; }
}

/* Quinta tarjeta: Retención y recompra. Mismo marco que Campañas: recorrido de recompra (izquierda)
   y el mensaje automático de recompra sobre el fondo de chat de los celulares (derecha). */
.retention-pair__source { display:inline-block; width:12px; height:11px; margin-right:2px; vertical-align:-1px; }
.retention-pair__remarketing { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid rgba(229,116,17,.2); border-radius:11px; background:#fef7ec; box-shadow:0 0 0 4px rgba(229,116,17,.08); }
.retention-pair__remarketing>span { display:grid; flex:0 0 42px; height:30px; place-items:center; border-radius:8px; color:#d2570d; background:#fceac9; font-size:var(--card-meta-size); line-height:var(--card-meta-lh); font-weight:600; }
.retention-pair__remarketing div,.retention-pair__result div { display:flex; min-width:0; flex-direction:column; }
.retention-pair__result { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid #bbf7d0; border-radius:11px; background:#f0fdf4; }
.retention-pair__result img { flex:0 0 20px; width:20px; height:20px; }
.retention-pair__result strong { color:#16a34a; }
.retention-pair__chat { justify-content:flex-start; gap:0; padding:0; }
.retention-pair__chat-header { flex:0 0 auto; gap:8px; padding:10px 12px; }
.retention-pair__chat-header .followup-snapshot__status { min-height:26px; padding:4px 9px; }
.retention-pair__chat-header .followup-snapshot__status strong { font-size:var(--card-meta-size); line-height:var(--card-meta-lh); white-space:nowrap; }
.retention-pair__chat-body { position:relative; display:flex; flex:1 1 auto; flex-direction:column; justify-content:center; min-height:0; padding:10px 12px; background:#fef7ec; isolation:isolate; }
.retention-pair__chat-body::before { position:absolute; inset:0; z-index:-1; content:""; opacity:.14; background:url("assets/capta-phone-tile.svg?v=1") center/52px 56px repeat; }
.retention-pair__message { padding:10px 11px 8px; border-radius:6px 14px 14px; color:#fff; background:#f6b653; box-shadow:var(--floating-shadow); }
.retention-pair__message p { margin:0; font-size:var(--chat-text-size); line-height:var(--chat-text-lh); }
.retention-pair__cta { display:block; margin-top:8px; padding:7px 8px; border-radius:7px; color:#d2570d; background:#fff; font-size:var(--chat-meta-size); line-height:var(--chat-meta-lh); font-weight:600; }
.retention-pair__message time { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:5px; color:rgba(255,255,255,.8); font-size:var(--chat-meta-size); line-height:var(--chat-meta-lh); }
@media (max-width:620px) {
  .retention-pair__remarketing,.retention-pair__result { gap:5px; padding:5px; border-radius:8px; }
  .retention-pair__remarketing>span { flex-basis:30px; height:24px; border-radius:6px; }
  .retention-pair__result img { flex-basis:16px; width:16px; height:16px; }
  .retention-pair__chat { padding:6px; }
  .retention-pair__message { padding:7px 7px 5px; }
  .retention-pair__cta { margin-top:5px; padding:4px 5px; }
}

.retention-pair__journey { justify-content:flex-start; gap:10px; }
@media (max-width:620px) {
  .retention-pair__chat-header { gap:5px; padding:6px 8px; }
  .retention-pair__chat-header .followup-snapshot__status { display:none; }
  .retention-pair__chat-header .crm-lead-card__avatar { flex-basis:24px; width:24px; height:24px; font-size:9px; }
  .retention-pair__chat-body { padding:6px; }
  .retention-pair__journey { gap:6px; }
  .retention-pair__remarketing small { display:none; }
}
.retention-pair__chat-header .crm-lead-card__identity { min-width:0; }
.retention-pair__chat-header .crm-lead-card__identity strong,
.retention-pair__chat-header .crm-lead-card__identity small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* Tarjetas de la solución a sangre inferior: el visual llega al borde de abajo y la tarjeta lo recorta.
   El visual crece --snapshot-bleed hacia abajo (relleno extra) para que lo recortado sea solo marco
   y el contenido quede donde estaba. Nunca se recorta a los lados. */
.snapshot-grid { --snapshot-bleed:32px; }
.snapshot-grid .acquisition-snapshot-card { padding-bottom:0; }
.snapshot-grid .acquisition-snapshot-card > :last-child { margin-top:auto; margin-bottom:calc(-1 * var(--snapshot-bleed)); }
.snapshot-grid .acquisition-snapshot { padding-bottom:calc(16px + var(--snapshot-bleed)); }
.snapshot-grid .crm-snapshot .crm-lead-card__body { padding-bottom:calc(12px + var(--snapshot-bleed)); }
.snapshot-grid .snapshot-card--followup .followup-snapshot { height:calc(272px + var(--snapshot-bleed)); }
.snapshot-grid .followup-snapshot .followup-snapshot__chat { padding-bottom:calc(12px + var(--snapshot-bleed)); }
.snapshot-grid .campaign-pair { height:calc(272px + var(--snapshot-bleed)); }
.snapshot-grid .campaign-pair__card { padding-bottom:calc(14px + var(--snapshot-bleed)); }
.snapshot-grid .retention-pair__chat { padding-bottom:0; }
.snapshot-grid .retention-pair__chat-body { padding-bottom:calc(10px + var(--snapshot-bleed)); }
@media (max-width:620px) {
  .snapshot-grid { --snapshot-bleed:24px; }
  .snapshot-grid .acquisition-snapshot { padding-bottom:calc(10px + var(--snapshot-bleed)); }
  .snapshot-grid .crm-snapshot .crm-lead-card__body { padding-bottom:calc(8px + var(--snapshot-bleed)); }
  .snapshot-grid .snapshot-card--followup .followup-snapshot { height:calc(211px + var(--snapshot-bleed)); }
  .snapshot-grid .followup-snapshot .followup-snapshot__chat { padding-bottom:calc(8px + var(--snapshot-bleed)); }
  .snapshot-grid .campaign-pair { height:calc(211px + var(--snapshot-bleed)); }
  .snapshot-grid .campaign-pair__card { padding-bottom:calc(8px + var(--snapshot-bleed)); }
  .snapshot-grid .retention-pair__chat-body { padding-bottom:calc(6px + var(--snapshot-bleed)); }
}
/* Separación entre tarjetas de la solución: 64/48/40px (escritorio/tableta/móvil). */
.snapshot-grid { gap:64px; }
@media (max-width:980px) { .snapshot-grid { gap:48px; } }
@media (max-width:620px) { .snapshot-grid { gap:40px; } }
/* Sombra en todo el contorno (sin desplazamiento), como las tarjetas del Figma. */
.snapshot-grid .acquisition-snapshot-card { box-shadow:var(--animation-shadow); }
/* Campañas y Retención: contenido agrupado arriba con separación fija; el recorte cae sobre espacio en blanco. */
.snapshot-grid .campaign-pair__card { justify-content:flex-start; gap:12px; }
.snapshot-grid .retention-pair__chat { gap:0; }
.snapshot-grid .retention-pair__chat-body { justify-content:flex-start; padding-top:14px; }
@media (max-width:620px) {
  .snapshot-grid .campaign-pair__card { gap:8px; }
  .snapshot-grid .retention-pair__chat-body { padding-top:8px; }
}
/* Con 64px de separación la columna mide 608px: 32px de relleno lateral conservan el visual en 544px. */
@media (min-width:981px) { .snapshot-grid .acquisition-snapshot-card { padding-left:32px; padding-right:32px; } }
/* Seguimiento: más aire entre las burbujas de la conversación. */
.snapshot-grid .followup-snapshot .followup-snapshot__chat { gap:20px; }
@media (max-width:620px) { .snapshot-grid .followup-snapshot .followup-snapshot__chat { gap:14px; } }
/* Fondo de chat anclado arriba: la primera fila del patrón empieza completa bajo el encabezado
   (centrado en vertical, la sangre inferior lo desplazaba y cortaba la fila de arriba). */
.snapshot-grid .followup-snapshot__chat::before,
.snapshot-grid .retention-pair__chat-body::before { background-position:center 6px; }

/* Número grande de fondo en cada tarjeta de la solución (01–05): Manrope, tono parejo #FCEAC9 al 50%,
   detrás del texto y del visual, anclado arriba a la derecha y cortado por el borde derecho. */
.snapshot-card__number { position:absolute; top:-0.14em; right:-0.08em; z-index:0; color:#fceac9; font:600 clamp(260px,34vw,460px)/1 Manrope,sans-serif; letter-spacing:-.06em; opacity:.5; pointer-events:none; user-select:none; }
.snapshot-grid .acquisition-snapshot-card__copy { position:relative; z-index:1; }
/* 02–05: se corren a la derecha para que salga de la tarjeta un tercio del segundo dígito. */
.snapshot-grid .acquisition-snapshot-card:not(:first-child) .snapshot-card__number { right:-0.18em; }
/* Seguimiento y Retención: fondo del chat blanco (el patrón se mantiene encima). */
.snapshot-grid .followup-snapshot .followup-snapshot__chat,
.snapshot-grid .retention-pair__chat-body { background:#fff; }

/* Variante de la sección del problema (referencia del usuario): fondo blanco, tarjetas en 2 columnas con el texto
   a la izquierda y el ícono original grande y tenue a la derecha, con el círculo con tache. Tonos de la paleta
   del Figma (nodo 392:2448): #F9D28E para el ícono, #D2570D para el tache, #FEF7EC para el fondo de tarjeta. */
.problem-v2 .problem-static-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; width:min(1120px,100%); }
.problem-v2 .problem-static-card { position:relative; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:24px; min-height:220px; padding:40px; overflow:hidden; border:1px solid rgba(229,116,17,.12); border-radius:20px; background:linear-gradient(135deg,#fff 0%,#fef7ec 100%); }
.problem-v2 .problem-static-card__content { flex:1 1 auto; max-width:340px; gap:12px; }
.problem-v2 .problem-static-card strong { color:#000; font-size:28px; line-height:36px; overflow-wrap:normal; }
.problem-v2 .problem-static-card__content p { color:#404040; font-size:18px; line-height:26px; }
.problem-v2__icon { position:relative; order:2; flex:0 0 140px; width:140px; height:140px; }
.problem-v2__glyph { display:block; width:100%; height:100%; background:#f9d28e; opacity:.7; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }
.problem-v2__x { position:absolute; top:-4px; right:-4px; width:36px; height:36px; color:#d2570d; }
@media (max-width:980px) {
  .problem-v2 .problem-static-card { min-height:180px; padding:28px; }
  .problem-v2 .problem-static-card strong { font-size:22px; line-height:30px; }
  .problem-v2 .problem-static-card__content p { font-size:16px; line-height:24px; }
  .problem-v2__icon { flex-basis:104px; width:104px; height:104px; }
  .problem-v2__x { width:28px; height:28px; }
}
@media (max-width:620px) {
  .problem-v2 .problem-static-cards { grid-template-columns:1fr; gap:12px; }
  .problem-v2 .problem-static-card { min-height:0; padding:20px 20px 20px 24px; border-radius:16px; }
  .problem-v2 .problem-static-card strong { font-size:20px; line-height:28px; }
  .problem-v2 .problem-static-card__content { gap:6px; }
  .problem-v2 .problem-static-card__content p { font-size:14px; line-height:20px; }
  .problem-v2__icon { flex-basis:80px; width:80px; height:80px; }
  .problem-v2__x { width:24px; height:24px; }
}
/* Tache grande sobre la esquina superior derecha del ícono, del mismo grosor y color que el ícono (#F9D28E) pero opaco. */
.problem-v2__x { top:-14px; right:-14px; width:64px; height:64px; color:#f9d28e; }
@media (max-width:980px) { .problem-v2__x { top:-10px; right:-10px; width:48px; height:48px; } }
@media (max-width:620px) { .problem-v2__x { top:-8px; right:-8px; width:38px; height:38px; } }
/* Tache: siguiente tono de la paleta (#F49C2B) con la misma transparencia que el ícono (70%). */
.problem-v2__x { color:#f49c2b; opacity:.7; }
/* El tache es opaco para que no se vea el ícono detrás: #F49C2B al 70% sobre blanco = #F7BA6B. */
.problem-v2__x { color:#f7ba6b; opacity:1; }

/* Ícono casi como marca de agua (#F9D28E al ~32%) y tache un poco más marcado. El tache es de color sólido
   (#F7BA6B al 60% sobre blanco = #FAD6A6) para que siga tapando el ícono sin transparentarlo. */
.problem-v2__glyph { opacity:.32; }
.problem-v2__x { color:#fad6a6; }
/* Tarjetas del problema (variantes) blancas y parejas, del mismo color que el fondo de la página. */
.problem-v2 .problem-static-card { background:#fff; }
/* Íconos un poco más gruesos: la máscara pasa a ::before y el elemento aplica un dilate de 1px (filtro en index.html). */
.problem-v2__glyph { position:relative; background:none; -webkit-mask:none; mask:none; filter:url(#problem-icon-thicken); }
.problem-v2__glyph::before { position:absolute; inset:0; content:""; background:#f9d28e; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }
/* Sombra en todo el contorno, como las tarjetas de la solución. */
.problem-v2 .problem-static-card { box-shadow:var(--animation-shadow); }

/* Ajustes según la guía visual del Figma (nodo 316:2359, "Visual Language"). */
/* Esquinas suaves de la guía (paneles de 24px) en las tarjetas del problema y de la solución. */
.problem-v2 .problem-static-card,
.snapshot-grid .acquisition-snapshot-card { border-radius:24px; }
@media (max-width:620px) {
  .problem-v2 .problem-static-card,
  .snapshot-grid .acquisition-snapshot-card { border-radius:18px; }
}
/* Tarjetas del problema en #F9D28E. Ícono y tache pasan al siguiente tono (#F49C2B) para no perderse en el fondo;
   el relleno del tache toma el color de la tarjeta para seguir tapando el ícono. */
.problem-v2 .problem-static-card { --problem-card-bg:#f9d28e; background:var(--problem-card-bg); border-color:rgba(229,116,17,.18); }
.problem-v2 .problem-v2__glyph::before { background:#f49c2b; }
.problem-v2 .problem-v2__x { color:#f6b253; }
/* Títulos de las tarjetas del problema en blanco. */
.problem-v2 .problem-static-card strong { color:#fff; }
/* Párrafos de las tarjetas del problema en el gris "negro 5%" de la paleta del Figma (392:2485),
   tal como se ve sobre blanco: #F2F2F2. */
.problem-v2 .problem-static-card__content p { color:#f2f2f2; }
/* Tarjetas del problema en #F49C2B; ícono y tache bajan al tono siguiente (#D2570D) para seguir viéndose. */
.problem-v2 .problem-static-card { --problem-card-bg:#f49c2b; border-color:rgba(210,87,13,.25); }
.problem-v2 .problem-v2__glyph::before { background:#d2570d; }
.problem-v2 .problem-v2__x { color:#e07319; }
/* Títulos en una sola línea: el ícono pasa a estar detrás (marca de agua) a la derecha y el texto usa todo el ancho. */
.problem-v2 .problem-static-card__content { position:relative; z-index:1; max-width:none; }
.problem-v2 .problem-static-card strong { white-space:nowrap; }
.problem-v2 .problem-v2__icon { position:absolute; top:50%; right:40px; translate:0 -50%; }
.problem-v2 .problem-static-card__content p { max-width:340px; }
@media (max-width:980px) { .problem-v2 .problem-v2__icon { right:28px; } }
@media (max-width:620px) { .problem-v2 .problem-v2__icon { right:20px; } .problem-v2 .problem-static-card__content p { max-width:230px; } }
/* Íconos del problema en blanco (tenues) y tache blanco un poco más marcado: blanco al 60% sobre #F49C2B = #FBD7A9. */
.problem-v2 .problem-v2__glyph::before { background:#fff; }
.problem-v2 .problem-v2__x { color:#fbd7a9; }
/* Degradado ligero arriba: #F49C2B aclarado un 24% con blanco que se funde al tono de la tarjeta al 60% de la altura. */
.problem-v2 .problem-static-card { background:linear-gradient(180deg,#f7b45e 0%,var(--problem-card-bg) 60%); }
/* Tache del problema en blanco sólido. */
.problem-v2 .problem-v2__x { color:#fff; }
/* Degradados en las esquinas de las tarjetas del problema: destellos blancos ligeros arriba
   y un naranja más fuerte (#D2570D) abajo, sobre el naranja #F49C2B. */
.problem-v2 .problem-static-card { background:
    radial-gradient(ellipse 45% 60% at 0% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 45% 60% at 100% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 45% 60% at 0% 100%, rgba(210,87,13,.32), rgba(210,87,13,0) 100%),
    radial-gradient(ellipse 45% 60% at 100% 100%, rgba(210,87,13,.32), rgba(210,87,13,0) 100%),
    var(--problem-card-bg); }
/* Degradado diagonal de esquina a esquina: claro arriba a la izquierda → #F49C2B (el tono más fuerte) abajo a la derecha. */
.problem-v2 .problem-static-card { background:linear-gradient(to bottom right,#f8c27a 0%,var(--problem-card-bg) 100%); }
/* Tarjetas de la solución: blanco arriba → #F49C2B (tono más fuerte) abajo; destellos de las esquinas de abajo en ese mismo tono. */
.snapshot-grid .acquisition-snapshot-card { background:linear-gradient(180deg,#fff 0%,#fef7ec 45%,#f49c2b 100%); }
.snapshot-grid .acquisition-snapshot-card::after { background:
    radial-gradient(ellipse 38% 45% at 0% 100%, rgba(244,156,43,.35), rgba(244,156,43,0) 100%),
    radial-gradient(ellipse 38% 45% at 100% 100%, rgba(244,156,43,.35), rgba(244,156,43,0) 100%); }
/* Todas las tarjetas de la solución del mismo tamaño en cualquier pantalla: cada fila mide lo de la tarjeta más alta. */
.snapshot-grid { grid-auto-rows:1fr; }
/* Retención: chat de WhatsApp a la izquierda y recorrido de recompra a la derecha. */
.snapshot-grid .retention-pair .retention-pair__chat { order:-1; }
/* Personalización se movió debajo de las tarjetas de la solución: Integración ahora sigue a Retención
   y conserva la misma separación de 160/128/112px que tenía. */
.capability-retention-section + .integrations-ecosystem-section { margin-top:0; }
@media (max-width:980px) { .capability-retention-section + .integrations-ecosystem-section { padding-top:64px; } }
@media (max-width:620px) { .capability-retention-section + .integrations-ecosystem-section { padding-top:56px; } }

/* Copia de las tarjetas del problema (prueba). */
.problem-static-cards--copy { margin-top:20px; }
@media (max-width:620px) { .problem-static-cards--copy { margin-top:12px; } }
/* Primera tarjeta de la copia: logo de WhatsApp grande, inclinado y cortado por el borde de abajo, con tache roja. */
.problem-v2__brand { position:absolute; right:-6px; bottom:-78px; width:250px; height:250px; rotate:-14deg; pointer-events:none; }
.problem-v2__brand img { display:block; width:100%; height:100%; }
.problem-v2__brand-x { position:absolute; top:44px; right:44px; width:64px; height:64px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) .problem-static-card__content p { max-width:300px; }
@media (max-width:980px) {
  .problem-v2__brand { right:-10px; bottom:-60px; width:190px; height:190px; }
  .problem-v2__brand-x { top:34px; right:34px; width:48px; height:48px; }
}
@media (max-width:620px) {
  .problem-v2__brand { right:-14px; bottom:-44px; width:140px; height:140px; }
  .problem-v2__brand-x { top:25px; right:25px; width:34px; height:34px; }
  .problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) .problem-static-card__content p { max-width:210px; }
}
/* WhatsApp más grande y animado: sube desde abajo de la tarjeta, se queda ~4s, baja y vuelve a empezar (ciclo de 6.4s).
   La tache aparece cuando el logo termina de subir y se va antes de que baje. */
.problem-v2__brand { right:-20px; bottom:-104px; width:330px; height:330px; animation:problem-brand-rise 6.4s cubic-bezier(.22,1,.36,1) infinite; }
.problem-v2__brand-x { top:56px; right:56px; width:88px; height:88px; animation:problem-brand-x 6.4s ease infinite; }
@keyframes problem-brand-rise {
  0% { translate:0 110%; }
  14%, 76% { translate:0 0; }
  90%, 100% { translate:0 110%; }
}
@keyframes problem-brand-x {
  0%, 12% { scale:0; opacity:0; }
  18% { scale:1.15; opacity:1; }
  21%, 72% { scale:1; opacity:1; }
  76%, 100% { scale:0; opacity:0; }
}
@media (max-width:980px) {
  .problem-v2__brand { right:-18px; bottom:-84px; width:250px; height:250px; }
  .problem-v2__brand-x { top:42px; right:42px; width:66px; height:66px; }
}
@media (max-width:620px) {
  .problem-v2__brand { right:-20px; bottom:-60px; width:180px; height:180px; }
  .problem-v2__brand-x { top:30px; right:30px; width:48px; height:48px; }
}
@media (prefers-reduced-motion:reduce) { .problem-v2__brand, .problem-v2__brand-x { animation:none; } }
/* Tarjeta de WhatsApp: título negro y párrafo gris. */
.problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) strong { color:#0a0a0a; }
.problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) .problem-static-card__content p { color:#525252; }
/* Tarjeta de WhatsApp en #F9D28E (mismo degradado diagonal, con ese tono como el más fuerte). */
.problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) { --problem-card-bg:#f9d28e; background:linear-gradient(to bottom right,#fbe3b9 0%,var(--problem-card-bg) 100%); border-color:rgba(229,116,17,.18); }
/* Web (tableta y escritorio): el logo de WhatsApp no invade el título ni el párrafo; se recorre a la derecha
   y queda más recortado por el borde. En móvil se queda como está. */
@media (min-width:981px) {
  .problem-v2__brand { right:-40px; bottom:-78px; width:260px; height:260px; }
  .problem-v2__brand-x { top:40px; right:48px; width:72px; height:72px; }
}
@media (min-width:621px) and (max-width:980px) {
  .problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) .problem-static-card__content p { max-width:210px; }
  .problem-v2__brand { right:-26px; bottom:-52px; width:170px; height:170px; }
  .problem-v2__brand-x { top:26px; right:30px; width:46px; height:46px; }
}
/* Campañas: dos logos (Google Ads detrás, Meta al frente) dentro del mismo bloque animado, con una sola tache.
   Son logos sin margen propio, así que ocupan menos del bloque que los íconos de app. */
.problem-v2__brand--pair { background:none; }
.problem-v2__brand--pair img { position:absolute; width:auto; height:auto; object-fit:contain; }
.problem-v2__brand--pair .problem-v2__brand-back { top:28%; left:6%; width:36%; rotate:8deg; filter:drop-shadow(0 4px 10px rgba(0,0,0,.12)); }
.problem-v2__brand--pair .problem-v2__brand-front { top:32%; left:38%; width:54%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.14)); }
@media (max-width:620px) { .problem-v2__brand--pair { width:150px; height:150px; right:-10px; bottom:-46px; } .problem-v2__brand--pair .problem-v2__brand-x { top:22px; right:24px; width:40px; height:40px; } }
/* Campañas: Meta a la izquierda (detrás) y Google Ads más grande a la derecha (al frente), saliendo un poco por el borde. */
.problem-v2__brand--pair .problem-v2__brand-front { top:36%; left:-4%; width:52%; z-index:0; }
.problem-v2__brand--pair .problem-v2__brand-back { top:18%; left:42%; width:56%; rotate:8deg; z-index:1; }
.problem-v2__brand--pair .problem-v2__brand-x { z-index:2; }
/* Campañas: Meta un poco más arriba y por encima de Google Ads; la tache sigue hasta arriba de todo. */
.problem-v2__brand--pair .problem-v2__brand-front { top:24%; z-index:2; }
.problem-v2__brand--pair .problem-v2__brand-back { z-index:1; }
.problem-v2__brand--pair .problem-v2__brand-x { z-index:3; }
/* Campañas en móvil: la tache mide lo mismo que en las demás tarjetas (48px). */
@media (max-width:620px) { .problem-v2__brand--pair .problem-v2__brand-x { top:18px; right:18px; width:48px; height:48px; } }
/* Clientes que no recompran: logo de Tiendanube con un pequeño botón verde de "Comprar" al frente, y la tache. */
.problem-v2__buy { position:absolute; left:-6%; top:30%; z-index:2; padding:.5em 1.2em; border-radius:999px; color:#fff; background:#16a34a; box-shadow:0 6px 14px rgba(22,163,74,.3); font:600 22px/1 Manrope,sans-serif; white-space:nowrap; rotate:10deg; }
.problem-v2__brand--store .problem-v2__brand-x { z-index:3; }
@media (max-width:980px) { .problem-v2__buy { font-size:15px; } }
@media (max-width:620px) { .problem-v2__buy { font-size:13px; } }
/* El botón no debe tapar el párrafo en tableta y móvil. */
@media (max-width:980px) { .problem-v2__buy { left:8%; top:36%; } }
@media (max-width:620px) { .problem-v2__buy { left:18%; top:40%; } }
/* Botón "Comprar" encima de la nube (arriba del logo) y la tache encima del botón. */
.problem-v2__buy { left:22%; top:24%; rotate:0deg; }
@media (max-width:980px) { .problem-v2__buy { left:22%; top:25%; } }
@media (max-width:620px) { .problem-v2__buy { left:24%; top:27%; } }
/* Que la tache solo toque la punta del botón y "Comprar" se lea completo. */
.problem-v2__buy { left:-2%; top:25%; }
@media (max-width:980px) { .problem-v2__buy { left:0%; top:26%; } }
@media (max-width:620px) { .problem-v2__buy { left:14%; top:30%; font-size:11px; } }
@media (max-width:620px) { .problem-v2__buy { left:30%; top:33%; } }
/* Las tarjetas con logo quedaron como las únicas: sin el margen de copia, con el mismo espacio que tenían las originales. */
.problem-static-cards--copy { margin-top:64px; }
@media (max-width:980px) { .problem-static-cards--copy { margin-top:48px; } }
@media (max-width:620px) { .problem-static-cards--copy { margin-top:40px; } }
/* Entrada y salida escalonadas de la tarjeta 1 a la 6 (0.2s entre cada una); el ciclo sigue siendo de 6.4s. */
.problem-static-cards--copy .problem-static-card { --brand-delay:0s; }
.problem-static-cards--copy .problem-static-card:nth-child(2) { --brand-delay:.2s; }
.problem-static-cards--copy .problem-static-card:nth-child(3) { --brand-delay:.4s; }
.problem-static-cards--copy .problem-static-card:nth-child(4) { --brand-delay:.6s; }
.problem-static-cards--copy .problem-static-card:nth-child(5) { --brand-delay:.8s; }
.problem-static-cards--copy .problem-static-card:nth-child(6) { --brand-delay:1s; }
.problem-static-cards--copy .problem-v2__brand,
.problem-static-cards--copy .problem-v2__brand-x { animation-delay:var(--brand-delay); animation-fill-mode:backwards; }
/* Sombra ligera y cálida en todos los logos del problema, siguiendo su silueta (misma para todos). */
.problem-v2__brand img,
.problem-v2__brand--pair .problem-v2__brand-back,
.problem-v2__brand--pair .problem-v2__brand-front { filter:drop-shadow(0 6px 10px rgba(117,38,18,.16)); }
/* Tiendanube es solo una línea negra: sombra más leve para que no se vea sucia. */
.problem-v2__brand--store img { filter:drop-shadow(0 4px 6px rgba(117,38,18,.1)); }
/* WooCommerce lleva color: la misma sombra que los demás logos (la leve era solo para la línea negra de Tiendanube). */
.problem-v2__brand--store img { filter:drop-shadow(0 6px 10px rgba(117,38,18,.16)); }
/* Con WooCommerce el botón sube un poco más para no tapar la palabra "Woo". */
.problem-v2__buy { top:13%; }
@media (max-width:980px) { .problem-v2__buy { top:15%; } }
@media (max-width:620px) { .problem-v2__buy { top:19%; } }
.problem-v2__buy { top:18%; left:4%; }
@media (max-width:980px) { .problem-v2__buy { top:17%; left:2%; } }
@media (max-width:620px) { .problem-v2__buy { top:36%; left:30%; } }
/* Botón "Comprar" por encima de la burbuja de WooCommerce, sin tapar "Woo". */
.problem-v2__buy { top:5%; left:16%; }
@media (max-width:980px) { .problem-v2__buy { top:6%; left:14%; } }
@media (max-width:620px) { .problem-v2__buy { top:12%; left:22%; } }
/* Botón más compacto justo sobre la burbuja de WooCommerce: no tapa "Woo" ni el título. */
.problem-v2__buy { top:13%; left:30%; font-size:16px; rotate:0deg; }
@media (max-width:980px) { .problem-v2__buy { top:14%; left:28%; font-size:12px; } }
@media (max-width:620px) { .problem-v2__buy { top:16%; left:30%; font-size:9px; } }
.problem-v2__buy { top:12%; left:4%; }
@media (max-width:980px) { .problem-v2__buy { top:12%; left:2%; } }
@media (max-width:620px) { .problem-v2__buy { top:14%; left:6%; font-size:10px; } }
@media (max-width:620px) { .problem-v2__buy { top:31%; left:22%; } }
/* Móvil: el logo de WooCommerce a la misma altura que los demás; el botón va a la izquierda de la burbuja, bajo el título. */
@media (max-width:620px) { .problem-v2__buy { top:40%; left:-8%; } }
/* Web: el botón se apoya sobre la esquina superior izquierda de la burbuja (pegado al logo), arriba de "Woo". */
@media (min-width:621px) { .problem-v2__buy { top:19%; left:16%; } }

/* Copia de "La solución": tarjeta dividida en dos. Arriba blanco con el texto; abajo, donde va la interfaz,
   naranja sólido #F49C2B (empieza 40px arriba de la interfaz; 32px en móvil). */
/* La franja naranja es una capa (::after) por encima del número grande y por debajo de la interfaz,
   así el número solo se ve en la parte blanca. */
.snapshot-section--split .acquisition-snapshot-card { --split-band:calc(272px + 40px); background:#fff; }
.snapshot-section--split .acquisition-snapshot-card::after { display:block; inset:auto 0 0 0; height:var(--split-band); background:#f49c2b; }
@media (max-width:620px) { .snapshot-section--split .acquisition-snapshot-card { --split-band:calc(211px + 32px); } }
/* Copia de "La solución": sin números grandes. */
.snapshot-section--split .snapshot-card__number { display:none; }
/* Copia de "La solución": franja naranja con esquinas de arriba redondeadas y destellos claros en esas esquinas. */
.snapshot-section--split .acquisition-snapshot-card::after { border-radius:24px 24px 0 0; background:
    radial-gradient(ellipse 45% 55% at 0% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 45% 55% at 100% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 100%),
    #f49c2b; }
@media (max-width:620px) { .snapshot-section--split .acquisition-snapshot-card::after { border-radius:18px 18px 0 0; } }
/* Copia de "La solución": título y párrafo centrados en la parte blanca (mismo espacio arriba y abajo). */
.snapshot-section--split .acquisition-snapshot-card { padding-top:0; }
.snapshot-section--split .acquisition-snapshot-card__copy { margin-block:auto; padding-block:36px; }
.snapshot-section--split .acquisition-snapshot-card > :last-child { margin-top:0; }
@media (max-width:620px) { .snapshot-section--split .acquisition-snapshot-card__copy { padding-block:28px; } }
/* Copia de "La solución" invertida: arriba la franja naranja con la interfaz (recortada por el borde de la franja)
   y abajo el texto centrado en el blanco. */
.snapshot-section--split .acquisition-snapshot-card { gap:0; }
.snapshot-section--split .acquisition-snapshot-card > :last-child { order:-1; margin-top:40px; clip-path:inset(-40px -40px var(--snapshot-bleed) -40px); }
.snapshot-section--split .acquisition-snapshot-card::after { inset:0 0 auto 0; border-radius:0 0 24px 24px; }
@media (max-width:620px) {
  .snapshot-section--split .acquisition-snapshot-card > :last-child { margin-top:32px; }
  .snapshot-section--split .acquisition-snapshot-card::after { border-radius:0 0 18px 18px; }
}
/* Copia de "La solución": separación entre naranja y blanco plana, sin esquinas redondeadas. */
.snapshot-section--split .acquisition-snapshot-card::after { border-radius:0; }
/* Copia de "La solución": interfaces un poco más angostas y con más aire arriba, para que se vea más naranja
   alrededor. Se conservan su alto (272 / 211) y el tamaño del texto; solo se angostan. */
.snapshot-section--split .acquisition-snapshot-card { --split-top:56px; --split-band:calc(272px + var(--split-top)); }
.snapshot-section--split .acquisition-snapshot-card > :last-child { width:88% !important; align-self:center; margin-top:var(--split-top); }
@media (max-width:620px) {
  .snapshot-section--split .acquisition-snapshot-card { --split-top:40px; --split-band:calc(211px + var(--split-top)); }
  .snapshot-section--split .acquisition-snapshot-card > :last-child { width:92% !important; }
}
/* En lugar de angostarlas (se partían y cortaban textos), las interfaces se reducen proporcionalmente al 88%:
   mismo acomodo interno, solo más chicas, y queda más naranja alrededor. */
.snapshot-section--split .acquisition-snapshot-card { --split-h:272px; --split-scale:.88; --split-band:calc(var(--split-h) * var(--split-scale) + var(--split-top)); }
.snapshot-section--split .acquisition-snapshot-card > :last-child { width:100% !important; transform:scale(var(--split-scale)); transform-origin:50% 0; margin-bottom:calc(-1 * var(--snapshot-bleed) - var(--split-h) * (1 - var(--split-scale))); }
@media (max-width:620px) { .snapshot-section--split .acquisition-snapshot-card { --split-h:211px; } }
/* Evita la línea naranja de medio píxel bajo las interfaces: la franja termina 1px antes del corte de la interfaz. */
.snapshot-section--split .acquisition-snapshot-card { --split-band:calc(var(--split-h) * var(--split-scale) + var(--split-top) - 1px); }
/* Interfaces más abajo: bajan --split-drop y el borde de la franja recorta ese extra (el espacio en blanco de abajo).
   La franja mide lo mismo; la interfaz sigue tapando su orilla. */
.snapshot-section--split .acquisition-snapshot-card { --split-drop:28px; }
.snapshot-section--split .acquisition-snapshot-card > :last-child {
  margin-top:calc(var(--split-top) + var(--split-drop));
  clip-path:inset(-40px -40px calc(var(--snapshot-bleed) + var(--split-drop) / var(--split-scale)) -40px);
  margin-bottom:calc(-1 * var(--snapshot-bleed) - var(--split-h) * (1 - var(--split-scale)) - var(--split-drop));
}
@media (max-width:620px) { .snapshot-section--split .acquisition-snapshot-card { --split-drop:20px; } }

/* Copia de "La solución": la franja naranja ahora es un bloque propio (.split-media) que contiene la interfaz y la
   recorta con overflow. Así el corte naranja/blanco es una sola línea limpia, sin orillas de sombra ni medio píxel. */
.snapshot-section--split .acquisition-snapshot-card { --split-px:32px; padding-inline:0; }
.snapshot-section--split .acquisition-snapshot-card::after { display:none; }
.snapshot-section--split .acquisition-snapshot-card__copy { padding-inline:var(--split-px); }
.snapshot-section--split .acquisition-snapshot-card > .split-media {
  order:-1; position:relative; z-index:1; display:flex; justify-content:center; box-sizing:border-box;
  width:100% !important; height:calc(var(--split-top) + var(--split-h) * var(--split-scale)); margin:0 !important;
  padding:calc(var(--split-top) + var(--split-drop)) var(--split-px) 0; overflow:hidden; clip-path:none; transform:none;
  background:
    radial-gradient(ellipse 45% 55% at 0% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 45% 55% at 100% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 100%),
    #f49c2b;
}
.snapshot-section--split .split-media > * { flex:0 0 auto; width:100% !important; margin:0 !important; transform:scale(var(--split-scale)); transform-origin:50% 0; clip-path:none; }
@media (max-width:980px) { .snapshot-section--split .acquisition-snapshot-card { --split-px:40px; } }
@media (max-width:620px) { .snapshot-section--split .acquisition-snapshot-card { --split-px:16px; } }
.snapshot-section--split .acquisition-snapshot-card > .split-media { align-items:flex-start; }
/* Con zoom fraccionario (110%, 125%…) el naranja de fondo y la interfaz se mezclan en la última fila y dejan un tinte
   naranja bajo la interfaz. Una tira blanca opaca por encima de ambos hace el corte con una sola orilla. */
.snapshot-section--split .split-media::after { position:absolute; right:0; bottom:0; left:0; z-index:2; height:3px; content:""; background:#fff; pointer-events:none; }
/* La tira blanca debe cruzar la orilla (no terminar en ella): va en la tarjeta, 3px arriba y 3px abajo del corte. */
.snapshot-section--split .split-media::after { display:none; }
.snapshot-section--split .acquisition-snapshot-card::before { display:block; position:absolute; top:calc(var(--split-top) + var(--split-h) * var(--split-scale) - 3px); right:0; left:0; z-index:3; height:6px; content:""; opacity:1; background:#fff; pointer-events:none; }
/* Copia de "La solución": logo de CAPTA grande y muy tenue (blanco) entrando por la esquina superior derecha
   de la franja naranja, recortado por el borde; queda detrás de la interfaz. */
.snapshot-section--split .split-media::before { position:absolute; top:-70px; right:-80px; z-index:0; width:280px; height:280px; content:""; opacity:.16; background:#fff; -webkit-mask:url("assets/capta-product-logo.svg") center/contain no-repeat; mask:url("assets/capta-product-logo.svg") center/contain no-repeat; rotate:-12deg; pointer-events:none; }
.snapshot-section--split .split-media > * { position:relative; z-index:1; }
@media (max-width:620px) { .snapshot-section--split .split-media::before { top:-44px; right:-52px; width:180px; height:180px; } }
/* Logo de la esquina más girado y un poco más grande. */
.snapshot-section--split .split-media::before { top:-96px; right:-104px; width:340px; height:340px; rotate:-30deg; }
@media (max-width:620px) { .snapshot-section--split .split-media::before { top:-60px; right:-66px; width:220px; height:220px; } }
/* Tarjetas de "El problema" en #FCEAC9 (mismo degradado diagonal, con ese tono como el más fuerte). */
.problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) { --problem-card-bg:#fceac9; background:linear-gradient(to bottom right,#fef5e6 0%,var(--problem-card-bg) 100%); border-color:rgba(229,116,17,.14); }
/* Degradado intermedio: crema muy claro (#FEF8EE) arriba a la izquierda → #FCEAC9 en la esquina de abajo. */
.problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) { background:linear-gradient(to bottom right,#fef8ee 0%,var(--problem-card-bg) 85%); }
/* Tarjetas de "El problema": un solo logo de CAPTA gigante, centrado detrás de toda la cuadrícula. Cada tarjeta muestra
   su pedazo (máscara desplazada según su columna y fila), así el logo "atraviesa" las 6 tarjetas y los huecos quedan limpios. */
.problem-static-cards--copy { container-type:inline-size; --pg-gap:20px; --pg-ch:220px; --pg-cols:2; --pg-rows:3; --pg-logo:640px; }
.problem-static-cards--copy .problem-static-card { --pg-col:0; --pg-row:0; }
.problem-static-cards--copy .problem-static-card:nth-child(even) { --pg-col:1; }
.problem-static-cards--copy .problem-static-card:nth-child(3), .problem-static-cards--copy .problem-static-card:nth-child(4) { --pg-row:1; }
.problem-static-cards--copy .problem-static-card:nth-child(5), .problem-static-cards--copy .problem-static-card:nth-child(6) { --pg-row:2; }
.problem-static-cards--copy .problem-static-card::before {
  --pg-cw:calc((100cqw - (var(--pg-cols) - 1) * var(--pg-gap)) / var(--pg-cols));
  --pg-gh:calc(var(--pg-rows) * var(--pg-ch) + (var(--pg-rows) - 1) * var(--pg-gap));
  position:absolute; inset:0; z-index:0; content:""; opacity:.1; background:#e57411; pointer-events:none;
  -webkit-mask:url("assets/capta-product-logo.svg") no-repeat; mask:url("assets/capta-product-logo.svg") no-repeat;
  -webkit-mask-size:var(--pg-logo) var(--pg-logo); mask-size:var(--pg-logo) var(--pg-logo);
  -webkit-mask-position:calc((100cqw - var(--pg-logo)) / 2 - var(--pg-col) * (var(--pg-cw) + var(--pg-gap))) calc((var(--pg-gh) - var(--pg-logo)) / 2 - var(--pg-row) * (var(--pg-ch) + var(--pg-gap)));
  mask-position:calc((100cqw - var(--pg-logo)) / 2 - var(--pg-col) * (var(--pg-cw) + var(--pg-gap))) calc((var(--pg-gh) - var(--pg-logo)) / 2 - var(--pg-row) * (var(--pg-ch) + var(--pg-gap)));
}
@media (max-width:980px) { .problem-static-cards--copy { --pg-ch:180px; --pg-logo:540px; } }
@media (max-width:620px) {
  .problem-static-cards--copy { --pg-gap:12px; --pg-ch:116px; --pg-cols:1; --pg-rows:6; --pg-logo:440px; }
  .problem-static-cards--copy .problem-static-card { --pg-col:0 !important; }
  .problem-static-cards--copy .problem-static-card:nth-child(1) { --pg-row:0; } .problem-static-cards--copy .problem-static-card:nth-child(2) { --pg-row:1; }
  .problem-static-cards--copy .problem-static-card:nth-child(3) { --pg-row:2; } .problem-static-cards--copy .problem-static-card:nth-child(4) { --pg-row:3; }
  .problem-static-cards--copy .problem-static-card:nth-child(5) { --pg-row:4; } .problem-static-cards--copy .problem-static-card:nth-child(6) { --pg-row:5; }
}
/* Logo gigante inclinado que solo entra a medias: su centro queda en el borde derecho de la cuadrícula,
   así solo asoma la mitad y cubre 3–4 tarjetas (columna derecha y parte de la izquierda). */
.problem-static-cards--copy { --pg-logo:900px; --pg-cx:100cqw; --pg-cy:.5; }
.problem-static-cards--copy .problem-static-card::before {
  -webkit-mask-image:url("assets/capta-logo-tilted.svg"); mask-image:url("assets/capta-logo-tilted.svg");
  -webkit-mask-position:calc(var(--pg-cx) - var(--pg-logo) / 2 - var(--pg-col) * (var(--pg-cw) + var(--pg-gap))) calc(var(--pg-gh) * var(--pg-cy) - var(--pg-logo) / 2 - var(--pg-row) * (var(--pg-ch) + var(--pg-gap)));
  mask-position:calc(var(--pg-cx) - var(--pg-logo) / 2 - var(--pg-col) * (var(--pg-cw) + var(--pg-gap))) calc(var(--pg-gh) * var(--pg-cy) - var(--pg-logo) / 2 - var(--pg-row) * (var(--pg-ch) + var(--pg-gap)));
}
@media (max-width:980px) { .problem-static-cards--copy { --pg-logo:720px; } }
@media (max-width:620px) { .problem-static-cards--copy { --pg-logo:560px; --pg-cy:.45; } }
/* Móvil: la parte visible del logo queda centrada en vertical (mismo espacio arriba y abajo). */
@media (max-width:620px) { .problem-static-cards--copy { --pg-cy:.5; } }
/* Logo gigante de "El problema" al 7% de opacidad. */
.problem-static-cards--copy .problem-static-card::before { opacity:.07; }

/* Personalización: recorrido sin contenedor; íconos invertidos (cuadro naranja #F49C2B con el ícono en blanco). */
.personalization-step__icon { border-color:#f49c2b; background:#f49c2b; }
.personalization-step__icon img { filter:brightness(0) invert(1); }
/* Sin el encabezado "La solución", Adquisición sigue a Personalización: la línea del recorrido empieza en su punto
   (antes la regla .solution-intro + .capability-story lo hacía). */
.personalization-section + .capability-story::before { top:101px; }
@media (max-width:980px) { .personalization-section + .capability-story::before { top:85px; } }
@media (max-width:620px) { .personalization-section + .capability-story::before { top:74px; } }

/* Capacidades ("Todo lo que CAPTA puede integrar"): encabezado centrado como el resto (Figma: chip → h2 56/64 → párrafo 18/26)
   y 8 tarjetas estilo "Feature card" del Figma: ícono en cuadro naranja con el ícono blanco, título 20/28 y texto 16/24. */
.capabilities-section { position:relative; left:50%; z-index:2; width:100vw; padding:80px 32px; translate:-50% 0; background:#fff; }
.capabilities-section__header { width:min(1022px,100%); margin:0 auto; text-align:center; }
.capabilities-section__chip { margin-bottom:20px; }
.capabilities-section h2 { max-width:900px; margin:0 auto; color:#0a0a0a; font:600 56px/64px Manrope,sans-serif; letter-spacing:0; }
.capabilities-section h2 span { display:block; color:var(--orange); }
.capabilities-section__header p { max-width:720px; margin:12px auto 0; color:#525252; font:400 18px/26px "IBM Plex Sans",sans-serif; }
.capabilities-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; width:min(1280px,100%); margin:64px auto 0; padding:0; list-style:none; }
.capabilities-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:24px; overflow:hidden; border:1px solid #e5e5e5; border-radius:18px; background:#fff; box-shadow:var(--animation-shadow); isolation:isolate; }
.capabilities-card::before { position:absolute; top:-60px; left:-60px; z-index:-1; width:220px; height:220px; content:""; border-radius:50%; background:radial-gradient(circle, rgba(244,156,43,.16), rgba(244,156,43,0) 70%); pointer-events:none; }
.capabilities-card__icon { display:grid; width:56px; height:56px; margin-bottom:24px; place-items:center; border-radius:12px; color:#fff; background:#f49c2b; }
.capabilities-card__icon svg { width:28px; height:28px; }
.capabilities-card h3 { margin:0; color:#0a0a0a; font:600 20px/28px Manrope,sans-serif; }
.capabilities-card p { margin:0; color:#525252; font:400 16px/24px "IBM Plex Sans",sans-serif; }
.capabilities-section + .integrations-ecosystem-section { margin-top:0; }
@media (max-width:980px) {
  .capabilities-section { padding:64px 40px; }
  .capabilities-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:48px; }
  .capabilities-section + .integrations-ecosystem-section { padding-top:64px; }
}
@media (max-width:620px) {
  .capabilities-section { padding:56px 16px; }
  .capabilities-section h2 { font-size:36px; line-height:44px; }
  .capabilities-section__header p { font-size:16px; line-height:24px; }
  .capabilities-grid { gap:12px; margin-top:40px; }
  .capabilities-card { padding:16px; border-radius:14px; }
  .capabilities-card__icon { width:44px; height:44px; margin-bottom:16px; border-radius:10px; }
  .capabilities-card__icon svg { width:22px; height:22px; }
  .capabilities-card h3 { font-size:16px; line-height:22px; }
  .capabilities-card p { font-size:13px; line-height:19px; }
  .capabilities-section + .integrations-ecosystem-section { padding-top:56px; }
}

/* Tarjetas de capacidades con imagen animada. El resplandor queda dentro de la tarjeta (inset + border-radius) para poder
   dejar la tarjeta sin recorte y que la imagen salga ligeramente por el borde de arriba, centrada. */
.capabilities-card { overflow:visible; }
.capabilities-card::before { top:0; right:0; bottom:0; left:0; width:auto; height:auto; border-radius:inherit; background:radial-gradient(220px circle at 50px 50px, rgba(244,156,43,.16), rgba(244,156,43,0) 70%); }
.capabilities-card--visual { padding-top:0; }
.cap-visual { --cap-r:74px; --cap-chip:40px; position:relative; align-self:center; width:200px; height:200px; margin:-36px 0 8px; }
/* Anillos: órbita punteada y dos pulsos que salen del centro. */
.cap-visual__ring { position:absolute; inset:calc(50% - var(--cap-r)); border:1.5px dashed rgba(229,116,17,.35); border-radius:50%; }
.cap-visual__pulse { position:absolute; inset:calc(50% - 34px); border-radius:50%; background:rgba(244,156,43,.18); animation:cap-pulse 3.2s ease-out infinite; }
.cap-visual__pulse--late { animation-delay:1.6s; }
@keyframes cap-pulse { from { transform:scale(1); opacity:1; } to { transform:scale(2.3); opacity:0; } }
/* Centro: logo de CAPTA en un círculo blanco. */
.cap-visual__core { position:absolute; top:50%; left:50%; z-index:2; display:grid; width:68px; height:68px; place-items:center; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(229,116,17,.18),0 8px 22px rgba(117,38,18,.14); translate:-50% -50%; }
.cap-visual__core img { width:40px; height:40px; }
/* Órbita: gira lento; cada logo se contrarresta para quedar siempre derecho. */
.cap-orbit { position:absolute; inset:0; animation:cap-spin 26s linear infinite; }
.cap-orbit__item { position:absolute; top:50%; left:50%; display:grid; width:var(--cap-chip); height:var(--cap-chip); margin:calc(var(--cap-chip) / -2) 0 0 calc(var(--cap-chip) / -2); place-items:center; border-radius:50%; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 6px 14px rgba(117,38,18,.12); transform:rotate(calc(var(--i) * 72deg - 90deg)) translate(var(--cap-r)) rotate(calc(90deg - var(--i) * 72deg)); }
.cap-orbit__item img { width:62%; height:62%; object-fit:contain; animation:cap-spin 26s linear infinite reverse; }
@keyframes cap-spin { to { rotate:360deg; } }
@media (max-width:620px) {
  .cap-visual { --cap-r:56px; --cap-chip:32px; width:156px; height:156px; margin-top:-28px; }
  .cap-visual__core { width:54px; height:54px; } .cap-visual__core img { width:32px; height:32px; }
  .cap-visual__pulse { inset:calc(50% - 27px); }
}
@media (prefers-reduced-motion:reduce) { .cap-orbit, .cap-orbit__item img, .cap-visual__pulse { animation:none; } }
/* La imagen sale la mitad por encima de la tarjeta; la cuadrícula baja lo mismo para conservar 64/48/40px bajo el párrafo. */
.cap-visual { margin-top:-100px; }
.capabilities-grid { margin-top:164px; }
@media (max-width:980px) { .capabilities-grid { margin-top:148px; } }
@media (max-width:620px) { .cap-visual { margin-top:-78px; } .capabilities-grid { margin-top:118px; } }

/* Bots de IA: pregunta del cliente → el bot "escribe" → responde → etiqueta "Cliente calificado". Ciclo de 8s. */
.cap-visual--bot { width:250px; }
.cap-bot__core { position:absolute; top:50%; left:50%; z-index:2; display:grid; width:64px; height:64px; place-items:center; border-radius:18px; color:#fff; background:#f49c2b; box-shadow:0 0 0 6px rgba(244,156,43,.14),0 10px 22px rgba(117,38,18,.18); translate:-50% -50%; animation:cap-bob 4s ease-in-out infinite; }
.cap-bot__core svg { width:34px; height:34px; }
@keyframes cap-bob { 50% { translate:-50% calc(-50% - 4px); } }
.cap-bot__msg { position:absolute; z-index:3; max-width:150px; padding:7px 10px; border-radius:12px; font:500 11px/15px "IBM Plex Sans",sans-serif; box-shadow:0 6px 16px rgba(117,38,18,.12); opacity:0; }
.cap-bot__msg--in { top:6px; left:0; border-bottom-left-radius:4px; color:#262626; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 6px 16px rgba(117,38,18,.1); animation:cap-bot-in 8s ease infinite; }
.cap-bot__msg--out { right:0; bottom:28px; border-bottom-right-radius:4px; color:#fff; background:#e57411; animation:cap-bot-out 8s ease infinite; }
.cap-bot__typing { position:absolute; right:22px; bottom:40px; z-index:3; display:flex; gap:3px; padding:8px 10px; border-radius:12px 12px 4px 12px; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 6px 16px rgba(117,38,18,.1); opacity:0; animation:cap-bot-typing 8s ease infinite; }
.cap-bot__typing i { width:5px; height:5px; border-radius:50%; background:#e57411; animation:cap-dot .9s ease-in-out infinite; }
.cap-bot__typing i:nth-child(2) { animation-delay:.15s; } .cap-bot__typing i:nth-child(3) { animation-delay:.3s; }
.cap-bot__tag { position:absolute; bottom:0; left:6px; z-index:3; display:flex; align-items:center; gap:4px; padding:4px 9px; border:1px solid #bbf7d0; border-radius:999px; color:#16a34a; background:#f0fdf4; font:600 10px/14px "IBM Plex Sans",sans-serif; opacity:0; animation:cap-bot-tag 8s ease infinite; }
.cap-bot__tag svg { width:11px; height:11px; }
@keyframes cap-dot { 50% { transform:translateY(-3px); opacity:.5; } }
@keyframes cap-bot-in { 0%,4% { opacity:0; transform:translateY(8px) scale(.95); } 10%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes cap-bot-typing { 0%,16% { opacity:0; } 20%,36% { opacity:1; } 40%,100% { opacity:0; } }
@keyframes cap-bot-out { 0%,38% { opacity:0; transform:translateY(8px) scale(.95); } 44%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes cap-bot-tag { 0%,54% { opacity:0; transform:scale(.8); } 60%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@media (max-width:620px) {
  .cap-visual--bot { width:156px; }
  .cap-bot__core { width:50px; height:50px; border-radius:14px; } .cap-bot__core svg { width:26px; height:26px; }
  .cap-bot__msg { max-width:110px; padding:5px 7px; font-size:9px; line-height:12px; }
  .cap-bot__msg--out { bottom:22px; }
  .cap-bot__typing { right:14px; bottom:30px; padding:6px 8px; }
  .cap-bot__tag { left:0; font-size:8px; padding:3px 7px; }
}
@media (prefers-reduced-motion:reduce) { .cap-bot__core, .cap-bot__typing i { animation:none; } .cap-bot__msg, .cap-bot__tag { animation:none; opacity:1; } }

/* CRM automatizado: mini tablero de 3 etapas; el cliente avanza solo Nuevo → Seguimiento → Venta y se marca con palomita.
   Ciclo de 7s. La tarjeta del cliente mide un tercio del tablero y se desplaza por columnas. */
.cap-visual--crm { width:260px; }
.cap-crm__board { position:absolute; top:34px; left:0; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); box-sizing:border-box; width:100%; height:132px; padding:8px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 10px 24px rgba(117,38,18,.14); }
.cap-crm__col { display:block; padding:0 4px; border-left:1px dashed #f0e2cf; }
.cap-crm__col:first-child { border-left:0; }
.cap-crm__col b { display:block; padding:3px 0; border-radius:6px; color:#a3a3a3; background:#fafafa; font:600 9px/12px "IBM Plex Sans",sans-serif; text-align:center; }
.cap-crm__col:nth-child(3) b { color:#16a34a; background:#f0fdf4; }
.cap-crm__ghost { position:absolute; left:calc(8px + 4px); width:calc((100% - 16px) / 3 - 8px); height:14px; border-radius:5px; background:#f5f5f5; }
.cap-crm__ghost--a { top:92px; } .cap-crm__ghost--b { top:110px; left:calc(8px + (100% - 16px) / 3 + 4px); } .cap-crm__ghost--c { top:92px; left:calc(8px + (100% - 16px) * 2 / 3 + 4px); }
.cap-crm__lead { --step:calc((100% - 16px) / 3); position:absolute; top:34px; left:calc(8px + 3px); z-index:3; display:flex; align-items:center; gap:5px; box-sizing:border-box; width:calc(var(--step) - 6px); padding:6px; border-radius:9px; background:#fff; box-shadow:0 0 0 1px #f5c98f,0 6px 14px rgba(117,38,18,.16); animation:cap-crm-move 7s cubic-bezier(.65,0,.35,1) infinite; }
.cap-crm__lead > i { display:grid; flex:0 0 20px; height:20px; place-items:center; border-radius:50%; color:#d2570d; background:#fceac9; font:700 8px/1 "IBM Plex Sans",sans-serif; font-style:normal; }
.cap-crm__lead > span { display:flex; min-width:0; flex-direction:column; }
.cap-crm__lead strong { overflow:hidden; color:#0a0a0a; font:600 9px/11px "IBM Plex Sans",sans-serif; white-space:nowrap; text-overflow:ellipsis; }
.cap-crm__lead small { color:#737373; font:400 8px/10px "IBM Plex Sans",sans-serif; }
.cap-crm__lead em { position:absolute; top:-7px; right:-7px; display:grid; width:16px; height:16px; place-items:center; border-radius:50%; color:#fff; background:#16a34a; box-shadow:0 0 0 2px #fff; opacity:0; transform:scale(.4); animation:cap-crm-check 7s ease infinite; }
.cap-crm__lead em svg { width:10px; height:10px; }
.cap-crm__auto { position:absolute; right:10px; bottom:12px; z-index:3; display:flex; align-items:center; gap:4px; padding:4px 9px; border-radius:999px; color:#fff; background:#e57411; box-shadow:0 6px 14px rgba(229,116,17,.3); font:600 10px/14px "IBM Plex Sans",sans-serif; opacity:0; animation:cap-crm-auto 7s ease infinite; }
.cap-crm__auto svg { width:11px; height:11px; }
/* El avance usa el ancho real de cada columna (el tablero mide 100% del contenedor menos 16px de relleno). */
@keyframes cap-crm-move {
  0%,14% { transform:translateX(0); }
  26%,42% { transform:translateX(calc(260px / 3 - 16px / 3)); }
  54%,90% { transform:translateX(calc(260px * 2 / 3 - 32px / 3)); }
  100% { transform:translateX(0); opacity:0; }
}
@keyframes cap-crm-check { 0%,56% { opacity:0; transform:scale(.4); } 62%,88% { opacity:1; transform:scale(1); } 96%,100% { opacity:0; } }
@keyframes cap-crm-auto { 0%,18% { opacity:0; transform:translateY(6px); } 24%,40% { opacity:1; transform:none; } 46%,50% { opacity:0; } 56%,86% { opacity:1; transform:none; } 94%,100% { opacity:0; } }
@media (max-width:620px) {
  .cap-visual--crm { width:156px; }
  .cap-crm__board { top:22px; height:104px; padding:6px; border-radius:12px; }
  .cap-crm__col b { font-size:7px; line-height:10px; }
  .cap-crm__lead { top:26px; left:9px; padding:4px; gap:3px; border-radius:7px; }
  .cap-crm__lead > i { flex-basis:14px; height:14px; font-size:6px; }
  .cap-crm__lead strong { font-size:7px; line-height:9px; } .cap-crm__lead small { font-size:6px; line-height:8px; }
  .cap-crm__ghost { height:10px; } .cap-crm__ghost--a, .cap-crm__ghost--c { top:70px; } .cap-crm__ghost--b { top:84px; }
  .cap-crm__auto { right:4px; bottom:6px; padding:3px 7px; font-size:8px; }
  @keyframes cap-crm-move { 0%,14% { transform:translateX(0); } 26%,42% { transform:translateX(calc(156px / 3 - 4px)); } 54%,90% { transform:translateX(calc(156px * 2 / 3 - 8px)); } 100% { transform:translateX(0); opacity:0; } }
}
@media (prefers-reduced-motion:reduce) { .cap-crm__lead { animation:none; transform:translateX(calc(260px * 2 / 3 - 32px / 3)); } .cap-crm__lead em, .cap-crm__auto { animation:none; opacity:1; transform:none; } }
/* Correcciones CRM: el cliente no se desvanece durante el avance (opacidad fija hasta el final del ciclo)
   y su tarjeta no se sale de la columna en móvil. */
@keyframes cap-crm-move {
  0%,14% { transform:translateX(0); opacity:1; }
  26%,42% { transform:translateX(calc(260px / 3 - 16px / 3)); opacity:1; }
  54%,90% { transform:translateX(calc(260px * 2 / 3 - 32px / 3)); opacity:1; }
  96% { transform:translateX(calc(260px * 2 / 3 - 32px / 3)); opacity:0; }
  100% { transform:translateX(0); opacity:0; }
}
.cap-crm__lead { overflow:visible; }
.cap-crm__lead > span { overflow:hidden; }
/* Las imágenes salen la mitad por arriba de su tarjeta: la separación entre filas deja ese espacio para no chocar. */
.capabilities-grid { row-gap:120px; }
@media (max-width:620px) {
  .capabilities-grid { row-gap:96px; }
  @keyframes cap-crm-move {
    0%,14% { transform:translateX(0); opacity:1; }
    26%,42% { transform:translateX(calc(156px / 3 - 4px)); opacity:1; }
    54%,90% { transform:translateX(calc(156px * 2 / 3 - 8px)); opacity:1; }
    96% { transform:translateX(calc(156px * 2 / 3 - 8px)); opacity:0; }
    100% { transform:translateX(0); opacity:0; }
  }
  .cap-crm__lead { width:calc((156px - 12px) / 3 - 6px); left:9px; }
  .cap-crm__lead > i { display:none; }
}

/* Seguimiento automático: evento (carrito abandonado) → espera de 1 h → WhatsApp enviado (palomitas se vuelven azules)
   → resultado "Compró". Ciclo de 8s. */
.cap-visual--follow { width:250px; }
.cap-follow__line { position:absolute; top:34px; bottom:44px; left:50%; width:2px; background:repeating-linear-gradient(#f5c98f 0 4px, transparent 4px 8px); translate:-50% 0; }
.cap-follow__step { position:absolute; top:6px; left:50%; z-index:2; display:flex; align-items:center; gap:7px; padding:6px 10px 6px 6px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 8px 18px rgba(117,38,18,.12); white-space:nowrap; translate:-50% 0; opacity:0; animation:cap-follow-a 8s ease infinite; }
.cap-follow__step i { display:grid; width:26px; height:26px; place-items:center; border-radius:8px; color:#fff; background:#f49c2b; font-style:normal; }
.cap-follow__step i svg { width:15px; height:15px; }
.cap-follow__step span { display:flex; flex-direction:column; }
.cap-follow__step strong { color:#0a0a0a; font:600 11px/14px "IBM Plex Sans",sans-serif; }
.cap-follow__step small { color:#737373; font:400 9px/12px "IBM Plex Sans",sans-serif; }
.cap-follow__wait { position:absolute; top:64px; left:50%; z-index:2; display:flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; color:#d2570d; background:#fef7ec; box-shadow:0 0 0 1px #f5c98f; font:600 9px/13px "IBM Plex Sans",sans-serif; white-space:nowrap; translate:-50% 0; opacity:0; animation:cap-follow-b 8s ease infinite; }
.cap-follow__wait svg { width:11px; height:11px; }
.cap-follow__msg { position:absolute; top:96px; left:50%; z-index:2; display:flex; align-items:flex-start; gap:6px; box-sizing:border-box; width:210px; padding:8px 10px; border-radius:12px 12px 12px 4px; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 8px 18px rgba(117,38,18,.12); translate:-50% 0; opacity:0; animation:cap-follow-c 8s ease infinite; }
.cap-follow__msg img { flex:0 0 18px; width:18px; height:18px; }
.cap-follow__msg > span { color:#262626; font:400 10px/14px "IBM Plex Sans",sans-serif; }
.cap-follow__msg em { position:absolute; right:8px; bottom:5px; width:14px; height:9px; color:#a3a3a3; animation:cap-follow-read 8s ease infinite; }
.cap-follow__msg em svg { display:block; width:100%; height:100%; }
.cap-follow__result { position:absolute; bottom:4px; left:50%; z-index:2; display:flex; align-items:center; gap:4px; padding:4px 11px; border-radius:999px; color:#fff; background:#16a34a; box-shadow:0 0 0 4px rgba(22,163,74,.12); font:600 11px/15px "IBM Plex Sans",sans-serif; translate:-50% 0; opacity:0; animation:cap-follow-d 8s ease infinite; }
.cap-follow__result svg { width:12px; height:12px; }
@keyframes cap-follow-a { 0%,3% { opacity:0; transform:translateY(-6px); } 9%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes cap-follow-b { 0%,16% { opacity:0; transform:scale(.8); } 22%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes cap-follow-c { 0%,30% { opacity:0; transform:translateY(8px); } 37%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes cap-follow-read { 0%,48% { color:#a3a3a3; } 52%,100% { color:#53bdeb; } }
@keyframes cap-follow-d { 0%,58% { opacity:0; transform:scale(.7); } 64% { opacity:1; transform:scale(1.08); } 68%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@media (max-width:620px) {
  .cap-visual--follow { width:156px; }
  .cap-follow__line { top:26px; bottom:34px; }
  .cap-follow__step { top:2px; gap:5px; padding:4px 7px 4px 4px; border-radius:9px; }
  .cap-follow__step i { width:20px; height:20px; border-radius:6px; } .cap-follow__step i svg { width:11px; height:11px; }
  .cap-follow__step strong { font-size:8px; line-height:10px; } .cap-follow__step small { font-size:7px; line-height:9px; }
  .cap-follow__wait { top:48px; padding:2px 7px; font-size:7px; line-height:10px; } .cap-follow__wait svg { width:9px; height:9px; }
  .cap-follow__msg { top:72px; width:150px; padding:6px 7px; gap:4px; } .cap-follow__msg img { flex-basis:13px; width:13px; height:13px; }
  .cap-follow__msg > span { font-size:7.5px; line-height:10px; } .cap-follow__msg em { width:11px; height:7px; bottom:3px; right:6px; }
  .cap-follow__result { bottom:2px; padding:3px 8px; font-size:9px; line-height:12px; } .cap-follow__result svg { width:10px; height:10px; }
}
@media (prefers-reduced-motion:reduce) { .cap-follow__step, .cap-follow__wait, .cap-follow__msg, .cap-follow__result, .cap-follow__msg em { animation:none; opacity:1; transform:none; } .cap-follow__msg em { color:#53bdeb; } }

/* Optimización de campañas: una compra envía señales (puntos que viajan) a Meta y Google Ads, y aparece el resultado.
   El escenario mide 250×200 y en móvil se escala para caber en 156px. */
.cap-visual--camp { width:250px; }
.cap-camp__stage { position:absolute; top:0; left:0; width:250px; height:200px; transform-origin:0 0; }
.cap-camp__paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cap-camp__paths path { stroke:#f5c98f; stroke-width:2; stroke-dasharray:4 4; }
.cap-camp__paths circle { fill:#e57411; }
.cap-camp__sale { position:absolute; top:60px; left:4px; z-index:2; display:flex; align-items:center; gap:7px; padding:7px 11px 7px 7px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 8px 18px rgba(117,38,18,.12); animation:cap-camp-sale 2.4s ease-in-out infinite; }
.cap-camp__sale i { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; color:#fff; background:#16a34a; font-style:normal; }
.cap-camp__sale i svg { width:15px; height:15px; }
.cap-camp__sale > span { display:flex; flex-direction:column; }
.cap-camp__sale strong { color:#0a0a0a; font:600 12px/15px "IBM Plex Sans",sans-serif; }
.cap-camp__sale small { color:#737373; font:400 10px/13px "IBM Plex Sans",sans-serif; }
.cap-camp__ad { position:absolute; left:186px; z-index:2; display:grid; width:52px; height:52px; place-items:center; border-radius:16px; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 8px 18px rgba(117,38,18,.12); translate:0 -50%; }
.cap-camp__ad img { width:30px; height:30px; object-fit:contain; }
.cap-camp__ad--meta { top:44px; animation:cap-camp-hit 2.4s ease-out infinite; }
.cap-camp__ad--google { top:124px; animation:cap-camp-hit 2.4s ease-out .6s infinite; }
.cap-camp__result { position:absolute; bottom:6px; left:50%; z-index:2; display:flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px; color:#fff; background:#16a34a; box-shadow:0 0 0 4px rgba(22,163,74,.12); font:600 11px/15px "IBM Plex Sans",sans-serif; white-space:nowrap; translate:-50% 0; }
.cap-camp__result svg { width:13px; height:13px; }
@keyframes cap-camp-sale { 0%,100% { box-shadow:0 0 0 1px #f0e2cf,0 8px 18px rgba(117,38,18,.12); } 12% { box-shadow:0 0 0 1px #f0e2cf,0 0 0 6px rgba(22,163,74,.14),0 8px 18px rgba(117,38,18,.12); } }
@keyframes cap-camp-hit { 0%,40%,100% { scale:1; } 48% { scale:1.12; box-shadow:0 0 0 1px #f0e2cf,0 0 0 7px rgba(229,116,17,.14),0 8px 18px rgba(117,38,18,.12); } 60% { scale:1; } }
@media (max-width:620px) { .cap-visual--camp { width:156px; } .cap-camp__stage { top:16px; transform:scale(.624); } }
@media (prefers-reduced-motion:reduce) { .cap-camp__sale, .cap-camp__ad { animation:none; } .cap-camp__paths circle { display:none; } }

/* Automatización de todo el proceso: 4 etapas (Captación → Venta → Recompra → Retención). La barra se llena y cada etapa
   se enciende al llegar (cuadro naranja, ícono blanco). Ciclo de 6s; escenario 250×200, escalado en móvil. */
.cap-visual--flow { width:250px; }
.cap-flow__stage { position:absolute; top:0; left:0; width:250px; height:200px; transform-origin:0 0; }
.cap-flow__badge { position:absolute; top:28px; left:50%; display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px; color:#fff; background:#e57411; box-shadow:0 8px 18px rgba(229,116,17,.28); font:600 11px/15px "IBM Plex Sans",sans-serif; white-space:nowrap; translate:-50% 0; }
.cap-flow__badge svg { width:12px; height:12px; }
.cap-flow__track { position:absolute; top:98px; left:26px; width:198px; height:4px; overflow:hidden; border-radius:4px; background:#f5e6d3; }
.cap-flow__fill { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f49c2b,#e57411); transform-origin:0 50%; animation:cap-flow-fill 6s cubic-bezier(.45,0,.55,1) infinite; }
.cap-flow__node { position:absolute; top:78px; left:calc(26px + var(--n) * 66px); display:flex; flex-direction:column; align-items:center; gap:7px; width:66px; translate:-50% 0; }
.cap-flow__node i { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:#e57411; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 8px 18px rgba(117,38,18,.12); font-style:normal; animation:cap-flow-node 6s ease infinite; animation-delay:calc(var(--n) * 1.1s); }
.cap-flow__node i svg { width:20px; height:20px; }
.cap-flow__node b { color:#525252; font:600 10px/13px "IBM Plex Sans",sans-serif; }
@keyframes cap-flow-fill { 0% { transform:scaleX(0); } 55%,85% { transform:scaleX(1); } 95%,100% { transform:scaleX(1); opacity:0; } }
/* Cada etapa se enciende cuando la barra llega (retraso por etapa) y se apaga al reiniciar. */
@keyframes cap-flow-node { 0%,4% { color:#e57411; background:#fff; scale:1; } 9% { color:#fff; background:#f49c2b; scale:1.12; } 14%,60% { color:#fff; background:#f49c2b; scale:1; } 70%,100% { color:#e57411; background:#fff; } }
@media (max-width:620px) { .cap-visual--flow { width:156px; } .cap-flow__stage { top:16px; transform:scale(.624); } }
@media (prefers-reduced-motion:reduce) { .cap-flow__fill { animation:none; } .cap-flow__node i { animation:none; color:#fff; background:#f49c2b; } }
/* Flujo centrado en el alto del visual: la insignia queda fuera de la tarjeta y las etapas dentro. */
.cap-flow__badge { top:44px; } .cap-flow__track { top:131px; } .cap-flow__node { top:111px; }

/* Remarketing y recuperación: tres oportunidades perdidas pasan de "Pendiente" a "Recuperado" una tras otra.
   Ciclo de 6s; escenario 250×200, escalado en móvil. */
.cap-visual--rec { width:250px; }
.cap-rec__stage { position:absolute; top:0; left:0; width:250px; height:200px; transform-origin:0 0; }
.cap-rec__core { position:absolute; top:6px; left:50%; z-index:2; display:grid; width:46px; height:46px; place-items:center; border-radius:50%; color:#fff; background:#f49c2b; box-shadow:0 0 0 6px rgba(244,156,43,.16),0 8px 18px rgba(117,38,18,.18); translate:-50% 0; }
.cap-rec__core svg { width:24px; height:24px; animation:cap-rec-spin 2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cap-rec-spin { from { rotate:0deg; } to { rotate:-360deg; } }
.cap-rec__row { position:absolute; top:calc(62px + var(--r) * 44px); left:50%; z-index:2; display:flex; align-items:center; gap:8px; box-sizing:border-box; width:234px; padding:6px 7px; border-radius:11px; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 6px 14px rgba(117,38,18,.1); translate:-50% 0; }
.cap-rec__row > i { display:grid; flex:0 0 26px; height:26px; place-items:center; border-radius:8px; color:#a3a3a3; background:#f5f5f5; font-style:normal; animation:cap-rec-icon 6s ease infinite; animation-delay:calc(var(--r) * 1.1s); }
.cap-rec__row > i svg { width:14px; height:14px; }
.cap-rec__row > span { display:flex; min-width:0; flex:1 1 auto; flex-direction:column; }
.cap-rec__row strong { color:#0a0a0a; font:600 10.5px/13px "IBM Plex Sans",sans-serif; }
.cap-rec__row small { overflow:hidden; color:#737373; font:400 9px/12px "IBM Plex Sans",sans-serif; white-space:nowrap; text-overflow:ellipsis; }
.cap-rec__row em { position:relative; flex:0 0 76px; height:20px; font-style:normal; }
.cap-rec__row em b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:3px; border-radius:999px; font:600 9px/1 "IBM Plex Sans",sans-serif; }
.cap-rec__lost { color:#737373; background:#f5f5f5; animation:cap-rec-lost 6s ease infinite; animation-delay:calc(var(--r) * 1.1s); }
.cap-rec__won { color:#16a34a; background:#f0fdf4; box-shadow:0 0 0 1px #bbf7d0; opacity:0; animation:cap-rec-won 6s ease infinite; animation-delay:calc(var(--r) * 1.1s); }
.cap-rec__won svg { width:10px; height:10px; }
@keyframes cap-rec-lost { 0%,12% { opacity:1; } 18%,72% { opacity:0; } 80%,100% { opacity:1; } }
@keyframes cap-rec-won { 0%,12% { opacity:0; transform:scale(.8); } 18% { opacity:1; transform:scale(1.08); } 22%,72% { opacity:1; transform:none; } 80%,100% { opacity:0; } }
@keyframes cap-rec-icon { 0%,12% { color:#a3a3a3; background:#f5f5f5; } 18%,72% { color:#fff; background:#16a34a; } 80%,100% { color:#a3a3a3; background:#f5f5f5; } }
@media (max-width:620px) { .cap-visual--rec { width:156px; } .cap-rec__stage { top:16px; transform:scale(.624); } }
@media (prefers-reduced-motion:reduce) { .cap-rec__core svg, .cap-rec__row > i, .cap-rec__lost, .cap-rec__won { animation:none; } .cap-rec__lost { opacity:0; } .cap-rec__won { opacity:1; } .cap-rec__row > i { color:#fff; background:#16a34a; } }

/* Panel y datos centralizados: WhatsApp, Shopify y Meta envían datos (puntos) a un panel del cliente con perfil,
   indicadores y gráfica que crece. Ciclo de 6s; escenario 250×200, escalado en móvil. */
.cap-visual--dash { width:250px; }
.cap-dash__stage { position:absolute; top:0; left:0; width:250px; height:200px; transform-origin:0 0; }
.cap-dash__src { position:absolute; top:calc(34px + var(--s) * 52px); left:0; z-index:3; display:grid; width:32px; height:32px; place-items:center; border-radius:10px; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 6px 14px rgba(117,38,18,.12); }
.cap-dash__src img { width:20px; height:20px; object-fit:contain; }
.cap-dash__src i { position:absolute; top:50%; left:34px; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#e57411; opacity:0; animation:cap-dash-dot 2s ease-in infinite; animation-delay:calc(var(--s) * .55s); }
@keyframes cap-dash-dot { 0% { opacity:0; transform:translateX(0); } 15% { opacity:1; } 80% { opacity:1; transform:translateX(16px); } 100% { opacity:0; transform:translateX(20px); } }
.cap-dash__panel { position:absolute; top:12px; right:0; z-index:2; display:flex; flex-direction:column; gap:7px; box-sizing:border-box; width:196px; padding:10px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 10px 24px rgba(117,38,18,.14); }
.cap-dash__head { display:flex; align-items:center; gap:5px; padding-bottom:6px; border-bottom:1px solid #f5f5f5; }
.cap-dash__head img { width:14px; height:14px; }
.cap-dash__head b { flex:1 1 auto; color:#0a0a0a; font:600 10px/13px "IBM Plex Sans",sans-serif; }
.cap-dash__head em { display:flex; align-items:center; gap:3px; color:#16a34a; font:600 8px/10px "IBM Plex Sans",sans-serif; font-style:normal; }
.cap-dash__head em::before { width:5px; height:5px; content:""; border-radius:50%; background:#16a34a; animation:cap-live 1.4s ease-in-out infinite; }
@keyframes cap-live { 50% { opacity:.3; } }
.cap-dash__profile { display:flex; align-items:center; gap:6px; }
.cap-dash__profile > i { display:grid; flex:0 0 24px; height:24px; place-items:center; border-radius:50%; color:#d2570d; background:#fceac9; font:700 9px/1 "IBM Plex Sans",sans-serif; font-style:normal; }
.cap-dash__profile > span { display:flex; flex-direction:column; }
.cap-dash__profile strong { color:#0a0a0a; font:600 10px/13px "IBM Plex Sans",sans-serif; }
.cap-dash__profile small { color:#737373; font:400 8.5px/11px "IBM Plex Sans",sans-serif; }
.cap-dash__kpis { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cap-dash__kpis > span { display:flex; flex-direction:column; padding:5px 7px; border-radius:8px; background:#fafafa; }
.cap-dash__kpis small { color:#737373; font:400 8px/10px "IBM Plex Sans",sans-serif; }
.cap-dash__kpis strong { color:#0a0a0a; font:600 12px/15px Manrope,sans-serif; }
.cap-dash__kpis strong.is-green { color:#16a34a; font-size:11px; }
.cap-dash__bars { display:flex; align-items:flex-end; gap:5px; height:34px; padding:0 2px; }
.cap-dash__bars i { flex:1 1 0; height:var(--h); border-radius:3px 3px 1px 1px; background:linear-gradient(#f49c2b,#fceac9); transform-origin:50% 100%; animation:cap-dash-bar 6s cubic-bezier(.22,1,.36,1) infinite; animation-delay:calc(var(--b) * .12s); }
.cap-dash__bars i:last-child { background:linear-gradient(#e57411,#f49c2b); }
@keyframes cap-dash-bar { 0%,4% { transform:scaleY(.15); } 22%,86% { transform:scaleY(1); } 96%,100% { transform:scaleY(.15); } }
@media (max-width:620px) { .cap-visual--dash { width:156px; } .cap-dash__stage { top:16px; transform:scale(.624); } }
@media (prefers-reduced-motion:reduce) { .cap-dash__src i { display:none; } .cap-dash__bars i, .cap-dash__head em::before { animation:none; } }
/* Títulos de las tarjetas de capacidades en naranja. */
.capabilities-card h3 { color:var(--orange); }
/* Tarjetas de capacidades con fondo blanco parejo (sin el resplandor de la esquina). */
.capabilities-card { background:#fff; }
.capabilities-card::before { display:none; }
/* Sombra ligera justo bajo la división interfaz/texto para marcar el cambio. La tira arranca 3px arriba del corte en blanco
   (sigue tapando la fila mezclada con zoom) y debajo del corte se difumina una sombra cálida. */
.snapshot-section--split .acquisition-snapshot-card::before { height:22px; background:linear-gradient(#fff 0 3px, rgba(117,38,18,.10) 3px, rgba(117,38,18,.04) 9px, rgba(117,38,18,0) 22px); }
/* Sin línea blanca: la tira empieza en la división con la sombra y se difumina hacia abajo. La fila mezclada (zoom)
   queda bajo el tono más fuerte de la sombra, que es opaco. */
.snapshot-section--split .acquisition-snapshot-card::before { top:calc(var(--split-top) + var(--split-h) * var(--split-scale) - 1px); height:20px; background:linear-gradient(#efe6e2 0 2px, rgba(117,38,18,.09) 2px, rgba(117,38,18,.035) 8px, rgba(117,38,18,0) 20px); }
/* Espacio naranja arriba de la interfaz igual al de los lados (65/80/36px); se recorta la franja por arriba,
   la parte visible de la interfaz no cambia. */
.snapshot-section--split .acquisition-snapshot-card { --split-top:37px; }
@media (max-width:980px) { .snapshot-section--split .acquisition-snapshot-card { --split-top:52px; } }
@media (max-width:620px) { .snapshot-section--split .acquisition-snapshot-card { --split-top:16px; } }

/* Capacidades más compactas: todas las imágenes miden 170px de alto (130px en móvil), salen la mitad por arriba
   y se agrupan sus piezas para que no quede espacio vacío antes del título. */
.cap-visual { height:170px; margin:-85px 0 0; }
.capabilities-grid { margin-top:149px; row-gap:105px; }
@media (max-width:980px) { .capabilities-grid { margin-top:133px; } }
@media (max-width:620px) { .cap-visual { height:130px; margin-top:-65px; } .capabilities-grid { margin-top:105px; row-gap:85px; } }
/* "La solución": distintivo de IA (tarjeta negra con el texto "IA" en blanco) en las tarjetas donde la IA participa.
   Va fuera de la tarjeta, arriba a la derecha, a la altura del borde superior del mockup
   (84 px sobre la tarjeta en escritorio, 57 px en móvil); mismo lugar y tamaño en todas. Destella sin parar. */
.capabilities-card > .cap-ai { position:absolute; top:-84px; right:0; z-index:5; display:grid; place-items:center; width:29px; height:29px; border-radius:8.5px; color:#fff; background:linear-gradient(145deg,#2a2a2a,#0a0a0a); box-shadow:0 2px 6px rgba(0,0,0,.18); }
.cap-ai b { color:#fff; font:700 12px/1 Manrope,sans-serif; letter-spacing:.02em; animation:cap-ai-twinkle 2.4s ease-in-out infinite; }
@keyframes cap-ai-twinkle {
  0%, 100% { scale:1; opacity:1; }
  25% { scale:.84; opacity:.55; }
  50% { scale:1.12; opacity:1; }
}
@media (max-width:620px) {
  .capabilities-card > .cap-ai { top:-57px; width:22px; height:22px; border-radius:7px; }
  .cap-ai b { font-size:9.5px; }
}
@media (prefers-reduced-motion:reduce) { .cap-ai b { animation:none; } }
/* "La solución": más aire entre tarjetas para que las animaciones de una fila no se acerquen a la anterior. */
.capabilities-grid { row-gap:145px; column-gap:28px; }
@media (max-width:620px) { .capabilities-grid { row-gap:110px; column-gap:16px; } }

/* Conexión: órbita más cerrada. */
.cap-visual--connect { --cap-r:62px; --cap-chip:36px; width:170px; }
.cap-visual__core { width:60px; height:60px; } .cap-visual__core img { width:36px; height:36px; }
.cap-visual__pulse { inset:calc(50% - 30px); }
@media (max-width:620px) { .cap-visual--connect { --cap-r:48px; --cap-chip:30px; width:130px; } .cap-visual__core { width:48px; height:48px; } .cap-visual__core img { width:28px; height:28px; } .cap-visual__pulse { inset:calc(50% - 24px); } }

/* Bots: pregunta arriba, bot al centro, respuesta y etiqueta juntas abajo. */
.cap-bot__msg--in { top:0; } .cap-bot__msg--out { bottom:26px; } .cap-bot__typing { bottom:36px; } .cap-bot__tag { bottom:0; }
.cap-bot__core { width:58px; height:58px; } .cap-bot__core svg { width:30px; height:30px; }
@media (max-width:620px) { .cap-visual--bot { width:156px; } .cap-bot__core { width:44px; height:44px; } .cap-bot__core svg { width:24px; height:24px; } .cap-bot__msg--out { bottom:18px; } .cap-bot__typing { bottom:26px; } }

/* CRM: tablero más bajo. */
.cap-crm__board { top:16px; height:118px; } .cap-crm__lead { top:28px; }
.cap-crm__ghost--a, .cap-crm__ghost--c { top:80px; } .cap-crm__ghost--b { top:96px; }
.cap-crm__auto { bottom:18px; }
@media (max-width:620px) { .cap-crm__board { top:10px; height:92px; } .cap-crm__lead { top:22px; } .cap-crm__ghost--a, .cap-crm__ghost--c { top:62px; } .cap-crm__ghost--b { top:74px; } .cap-crm__auto { bottom:14px; } }

/* Seguimiento: pasos más juntos. */
.cap-follow__step { top:0; } .cap-follow__wait { top:50px; } .cap-follow__msg { top:78px; } .cap-follow__result { bottom:0; }
.cap-follow__line { top:30px; bottom:20px; }
@media (max-width:620px) { .cap-follow__step { top:0; } .cap-follow__wait { top:38px; } .cap-follow__msg { top:58px; } .cap-follow__result { bottom:0; } .cap-follow__line { top:22px; bottom:14px; } }

/* Escenarios escalados (Campañas, Automatización, Remarketing, Panel): 250×170, en móvil 156×106. */
.cap-camp__stage, .cap-flow__stage, .cap-rec__stage, .cap-dash__stage { height:170px; }
@media (max-width:620px) { .cap-camp__stage, .cap-flow__stage, .cap-rec__stage, .cap-dash__stage { top:12px; } }
.cap-camp__sale { top:48px; } .cap-camp__ad--meta { top:34px; } .cap-camp__ad--google { top:108px; } .cap-camp__result { bottom:0; }
.cap-flow__badge { top:30px; } .cap-flow__track { top:111px; } .cap-flow__node { top:91px; }
.cap-rec__core { top:0; width:40px; height:40px; } .cap-rec__core svg { width:21px; height:21px; }
.cap-rec__row { top:calc(46px + var(--r) * 41px); padding:5px 7px; } .cap-rec__row > i { flex-basis:24px; height:24px; }
.cap-dash__panel { top:4px; gap:6px; padding:9px 10px; } .cap-dash__bars { height:26px; }
.cap-dash__src { top:calc(24px + var(--s) * 46px); }
/* Automatización: etapas pegadas al título (sin hueco bajo las etiquetas). */
.cap-flow__badge { top:48px; } .cap-flow__track { top:131px; } .cap-flow__node { top:111px; }
.cap-flow__badge { top:42px; } .cap-flow__track { top:122px; } .cap-flow__node { top:102px; }

/* "La solución" (tarjetas divididas): título y párrafo más chicos y menos blanco arriba y abajo del texto. */
.snapshot-section--split .acquisition-snapshot-card__copy { gap:8px; padding-block:24px; }
.snapshot-section--split .acquisition-snapshot-card__copy h2 { font-size:24px; line-height:32px; font-weight:500; }
.snapshot-section--split .acquisition-snapshot-card__copy p { font-size:16px; line-height:24px; }
@media (max-width:980px) { .snapshot-section--split .acquisition-snapshot-card__copy h2 { font-size:24px; line-height:32px; } }
@media (max-width:620px) {
  .snapshot-section--split .acquisition-snapshot-card__copy { gap:6px; padding-block:20px; }
  .snapshot-section--split .acquisition-snapshot-card__copy h2 { font-size:20px; line-height:28px; }
  .snapshot-section--split .acquisition-snapshot-card__copy p { font-size:14px; line-height:21px; }
}

/* Problema: misma escala que las tarjetas de "La solución" (Figma H6 24/32 Medium + párrafo 16/24).
   En escritorio la tarjeta ya no se estira a 220px: mide lo que pide el texto. */
.problem-static-cards--copy .problem-static-card strong { font-size:24px; line-height:32px; font-weight:500; }
.problem-static-cards--copy .problem-static-card .problem-static-card__content p { font-size:16px; line-height:24px; }
@media (min-width:981px) { .problem-static-cards--copy .problem-static-card { min-height:0; padding:32px 40px; } }
@media (max-width:620px) {
  .problem-static-cards--copy .problem-static-card strong { font-size:20px; line-height:28px; }
  .problem-static-cards--copy .problem-static-card .problem-static-card__content p { font-size:14px; line-height:20px; }
}

/* Personalización: "Paso 01…05" en naranja #F49C2B, como en el Figma. */
.personalization-step__number { color:#f49c2b; }

/* Personalización: cuadro del ícono en #FEF7EC y el ícono en #D2570D (se pinta con el SVG como máscara). */
.personalization-step__icon { position:relative; border-color:#fef7ec; background:#fef7ec; }
.personalization-step__icon img { visibility:hidden; filter:none; }
.personalization-step__icon::before { content:""; position:absolute; inset:0; margin:auto; width:32px; height:32px; background:#d2570d; -webkit-mask:var(--step-icon) center / contain no-repeat; mask:var(--step-icon) center / contain no-repeat; }
@media (max-width:620px) { .personalization-step__icon::before { width:26px; height:26px; } }

/* Capacidades: el título largo reparte sus líneas de forma pareja (sin "necesita," sola en una línea). */
.capabilities-section h2 { text-wrap:balance; }

/* Problema responsivo: el logo animado se escala con el ancho real de la tarjeta (--cw, medido sobre la cuadrícula)
   y la tarjeta le reserva ese espacio a la derecha; el título y el párrafo se acomodan antes del logo y nunca se enciman. */
.problem-static-cards--copy .problem-static-card {
  --cw:calc((100cqw - (var(--pg-cols) - 1) * var(--pg-gap)) / var(--pg-cols));
  --brand:clamp(104px, calc(var(--cw) * .4), 216px);
  padding-right:calc(var(--brand) * .85 + 16px);
}
.problem-static-cards--copy .problem-static-card .problem-static-card__content p { max-width:none; }
.problem-static-cards--copy .problem-static-card .problem-v2__brand { right:calc(var(--brand) * -.16); bottom:calc(var(--brand) * -.29); width:var(--brand); height:var(--brand); }
.problem-static-cards--copy .problem-static-card .problem-v2__brand-x { top:calc(var(--brand) * .15); right:calc(var(--brand) * .185); width:calc(var(--brand) * .28); height:calc(var(--brand) * .28); }
.problem-static-cards--copy .problem-static-card .problem-v2__buy { font-size:clamp(10px, calc(var(--brand) * .074), 16px); }
@media (min-width:981px) { .problem-static-cards--copy { --pg-ch:158px; } }
.problem-static-cards--copy .problem-static-card strong { white-space:normal; text-wrap:balance; }
/* El botón "Comprar" escala con el logo, así que va en el mismo lugar en todos los tamaños (no tapa "Woo"). */
.problem-static-cards--copy .problem-static-card .problem-v2__buy { top:19%; left:16%; }
/* Entre 621 y 760px dos columnas dejan el texto en 4-5 líneas: se pasa a una columna como en móvil. */
@media (min-width:621px) and (max-width:760px) {
  .problem-v2 .problem-static-cards.problem-static-cards--copy { grid-template-columns:1fr; --pg-cols:1; --pg-rows:6; --pg-ch:140px; }
  .problem-static-cards--copy .problem-static-card { min-height:0; }
}
@media (max-width:980px) { .problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) .problem-static-card__content p { max-width:none; } }
/* Alto mínimo proporcional al logo para que la "x" nunca quede cortada arriba. */
.problem-static-cards--copy .problem-static-card { min-height:calc(var(--brand) * .64); }

/* Capacidades responsivas: con 4 columnas por debajo de 1200px las animaciones (250px) ya no caben en la tarjeta,
   así que se pasa a 2 columnas; en celulares muy angostos la animación completa se reduce en proporción (zoom
   escala también sus márgenes, así que sigue saliendo la mitad por arriba). */
@media (min-width:981px) and (max-width:1199px) { .capabilities-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:400px) { .cap-visual { zoom:.9; } }
@media (max-width:350px) { .cap-visual { zoom:.78; } }
@media (max-width:350px) { .capabilities-card--visual { padding-inline:12px; } .capabilities-card h3 { font-size:14px; line-height:20px; } }

/* Problema: los títulos siempre en una línea. Todos los logos se reducen por igual para dejar el espacio del título
   más largo ("Clientes que no recompran" ≈ 12.7 veces el tamaño de letra); en tableta va una sola columna para que
   no haga falta reducirlos de más. En móvil el título ocupa todo el ancho y el logo queda debajo, junto al párrafo. */
.problem-static-cards--copy .problem-static-card strong { white-space:nowrap; text-wrap:nowrap; }
.problem-static-cards--copy .problem-static-card { --pl:40px; --title:calc(24px * 12.7); --brand:clamp(96px, min(var(--cw) * .4, (var(--cw) - var(--pl) - var(--title) - 16px) / .85), 216px); }
@media (max-width:980px) {
  .problem-v2 .problem-static-cards.problem-static-cards--copy { grid-template-columns:1fr; --pg-cols:1; --pg-rows:6; --pg-ch:140px; }
  .problem-static-cards--copy .problem-static-card { --pl:28px; min-height:calc(var(--brand) * .64); }
}
@media (max-width:620px) {
  .problem-static-cards--copy .problem-static-card { --brand:clamp(88px, var(--cw) * .3, 112px); padding-right:20px; min-height:calc(50px + var(--brand) * .6); }
  .problem-static-cards--copy .problem-static-card strong { font-size:min(20px, (var(--cw) - 44px) / 12.7); }
  .problem-static-cards--copy .problem-static-card .problem-static-card__content p { width:auto; margin-right:calc(var(--brand) * .85 - 4px); }
}
@media (max-width:620px) { .problem-static-cards--copy .problem-static-card .problem-v2__buy { left:-14%; font-size:9px; } }
/* "Comprar" pegado a la izquierda de la "x": su borde derecho toca ligeramente la x en todos los tamaños
   (la x empieza al 53.5% del logo, así que el botón termina 4px después). */
.problem-static-cards--copy .problem-static-card .problem-v2__buy { left:auto; right:calc(46.5% - 4px); }
/* WooCommerce: todo el grupo (logo, botón "Comprar" y x) un poco más inclinado que los demás logos (-14°). */
.problem-static-cards--copy .problem-v2__brand--store { rotate:-22deg; }

/* Logos del problema más grandes y un poco más metidos a la derecha (se ve el 78% del logo en vez del 85%); la "x"
   sigue en la esquina del logo, apenas recorrida para quedar completa dentro de la tarjeta. */
.problem-static-cards--copy .problem-static-card { --brand:clamp(104px, min(var(--cw) * .45, (var(--cw) - var(--pl) - var(--title) - 16px) / .78), 242px); padding-right:calc(var(--brand) * .78 + 16px); min-height:calc(var(--brand) * .6); }
.problem-static-cards--copy .problem-static-card .problem-v2__brand { right:calc(var(--brand) * -.22); bottom:calc(var(--brand) * -.3); }
.problem-static-cards--copy .problem-static-card .problem-v2__brand-x { top:calc(var(--brand) * .15); right:calc(var(--brand) * .235); }
.problem-static-cards--copy .problem-static-card .problem-v2__buy { right:calc(51.5% - 4px); }
@media (max-width:620px) {
  .problem-static-cards--copy .problem-static-card { --brand:clamp(96px, var(--cw) * .34, 128px); padding-right:20px; min-height:calc(50px + var(--brand) * .55); }
  .problem-static-cards--copy .problem-static-card .problem-static-card__content p { margin-right:calc(var(--brand) * .78 - 4px); }
}
/* Logos todavía más grandes: se ve el 73% del logo (el borde recorta más) y la x se recorre lo justo para seguir completa. */
.problem-static-cards--copy .problem-static-card { --brand:clamp(110px, min(var(--cw) * .5, (var(--cw) - var(--pl) - var(--title) - 16px) / .73), 270px); padding-right:calc(var(--brand) * .73 + 16px); min-height:calc(var(--brand) * .56); }
.problem-static-cards--copy .problem-static-card .problem-v2__brand { right:calc(var(--brand) * -.27); bottom:calc(var(--brand) * -.32); }
.problem-static-cards--copy .problem-static-card .problem-v2__brand-x { right:calc(var(--brand) * .285); }
.problem-static-cards--copy .problem-static-card .problem-v2__buy { right:calc(56.5% - 4px); }
@media (max-width:620px) {
  .problem-static-cards--copy .problem-static-card { --brand:clamp(100px, var(--cw) * .38, 142px); padding-right:20px; min-height:calc(50px + var(--brand) * .5); }
  .problem-static-cards--copy .problem-static-card .problem-static-card__content p { margin-right:calc(var(--brand) * .73 - 4px); }
}
/* Tarjetas del problema más compactas: menos margen arriba y abajo del texto; el alto mínimo solo cuida que la x
   del logo se vea completa. */
.problem-static-cards--copy .problem-static-card { padding-top:24px; padding-bottom:24px; min-height:calc(var(--brand) * .54); }
@media (max-width:980px) { .problem-static-cards--copy .problem-static-card { padding-top:22px; padding-bottom:22px; } }
@media (max-width:620px) { .problem-static-cards--copy .problem-static-card { padding-top:16px; padding-bottom:16px; min-height:calc(42px + var(--brand) * .5); } }
@media (min-width:621px) and (max-width:980px) { .problem-static-cards--copy .problem-static-card { --brand:clamp(110px, min(var(--cw) * .5, (var(--cw) - var(--pl) - var(--title) - 16px) / .73), 205px); } }
/* Móvil: logos del problema 20% más grandes. */
@media (max-width:620px) { .problem-static-cards--copy .problem-static-card { --brand:clamp(120px, var(--cw) * .456, 170px); } }
/* Móvil: logos 20% más grandes sin agrandar las tarjetas. El alto mínimo se calcula con el tamaño anterior del
   logo (--brand-prev) y el logo sale más a la derecha (se ve el 67%), así el párrafo casi no pierde ancho. */
@media (max-width:620px) {
  .problem-static-cards--copy .problem-static-card { --brand-prev:clamp(100px, var(--cw) * .38, 142px); min-height:calc(42px + var(--brand-prev) * .5); }
  .problem-static-cards--copy .problem-static-card .problem-v2__brand { right:calc(var(--brand) * -.33); bottom:calc(var(--brand) * -.36); }
  .problem-static-cards--copy .problem-static-card .problem-v2__brand-x { right:calc(var(--brand) * .345); top:calc(var(--brand) * .17); }
  .problem-static-cards--copy .problem-static-card .problem-v2__buy { right:calc(62.5% - 4px); }
  .problem-static-cards--copy .problem-static-card .problem-static-card__content p { margin-right:calc(var(--brand) * .67 - 4px); }
}
/* Solo móvil. HubSpot: el logo gira más hacia la derecha (sentido del reloj) dentro de su grupo; la x se queda donde está. */
@media (max-width:620px) { .problem-static-cards--copy .problem-v2__brand img[src*="hubspot"] { rotate:20deg; translate:-15% -7%; } }
/* Solo móvil. WooCommerce: todo el grupo sube un 8% de su tamaño y se reduce un 5%. */
@media (max-width:620px) { .problem-static-cards--copy .problem-v2__brand--store { margin-bottom:calc(var(--brand) * .08); } }
@media (max-width:620px) { .problem-static-cards--copy .problem-v2__brand--store { scale:.95; } }
/* Web (escritorio y tableta): logos del problema 10% más chicos. */
@media (min-width:981px) { .problem-static-cards--copy .problem-static-card { --brand:calc(clamp(110px, min(var(--cw) * .5, (var(--cw) - var(--pl) - var(--title) - 16px) / .73), 270px) * .9); } }
@media (min-width:621px) and (max-width:980px) { .problem-static-cards--copy .problem-static-card { --brand:calc(clamp(110px, min(var(--cw) * .5, (var(--cw) - var(--pl) - var(--title) - 16px) / .73), 205px) * .9); } }
/* Solo móvil. WhatsApp: el grupo (logo y x) un 10% más chico. */
@media (max-width:620px) { .problem-static-cards--copy .problem-static-card:has(img[src*="whatsapp"]) .problem-v2__brand { scale:.9; } }
/* Solo móvil. WhatsApp: el grupo se mueve 6.5% de su tamaño a la izquierda y 6.5% hacia arriba. */
@media (max-width:620px) { .problem-static-cards--copy .problem-static-card:has(img[src*="whatsapp"]) .problem-v2__brand { margin-right:calc(var(--brand) * .065); margin-bottom:calc(var(--brand) * .065); } }
/* Solo móvil. WhatsApp: su x mide y se ubica igual que en las demás tarjetas (compensa el 90% y el desplazamiento
   del logo: tamaño .28/.9 y posición calculada con el giro de -14°). */
@media (max-width:620px) { .problem-static-cards--copy .problem-static-card:has(img[src*="whatsapp"]) .problem-v2__brand-x { width:calc(var(--brand) * .3111); height:calc(var(--brand) * .3111); right:calc(var(--brand) * .2752); top:calc(var(--brand) * .2209); } }
/* Solo móvil. WhatsApp: solo el logo baja un 2%, va 8% más a la izquierda y gira 9° a la izquierda; 5% más grande, creciendo hacia la derecha y abajo para que no entre más en la tarjeta (la x se queda en su lugar). */
@media (max-width:620px) { .problem-static-cards--copy .problem-v2__brand img[src*="whatsapp"] { translate:-6.4% 4.5%; rotate:-9deg; scale:1.05; } }
/* Solo móvil. WhatsApp: su x sube un 12.5% del tamaño del logo. */
@media (max-width:620px) { .problem-static-cards--copy .problem-static-card:has(img[src*="whatsapp"]) .problem-v2__brand-x { top:calc(var(--brand) * .0821); } }
/* Solo móvil. Todas las x en el mismo lugar que la de WhatsApp (misma distancia a la esquina de la tarjeta y mismo
   tamaño); los logos no se mueven. Posición calculada dentro de cada logo con su giro (-14°; Woo -22° y 95%). */
@media (max-width:620px) {
  .problem-static-cards--copy .problem-static-card .problem-v2__brand-x { right:calc(var(--brand) * .3445); top:calc(var(--brand) * .0454); }
  .problem-static-cards--copy .problem-static-card .problem-v2__brand--store .problem-v2__brand-x { width:calc(var(--brand) * .2947); height:calc(var(--brand) * .2947); right:calc(var(--brand) * .3222); top:calc(var(--brand) * .1046); }
  .problem-static-cards--copy .problem-static-card .problem-v2__buy { right:calc(62% - 4px); }
}
/* Solo móvil. Shopify: solo el logo se mueve 15% a la izquierda, sube 5% y crece 10% hacia la derecha y abajo (no entra más en la tarjeta; la x se queda en su lugar). */
@media (max-width:620px) { .problem-static-cards--copy .problem-v2__brand img[src*="shopify"] { translate:-13.2% -1.6%; scale:1.1; } }
/* Solo móvil. Campañas: Meta y Google Ads del mismo ancho (54%) y Meta metido un tercio de su ancho sobre Google Ads; los dos 15° más inclinados a la izquierda y 10% más a la izquierda. */
@media (max-width:620px) {
  .problem-static-cards--copy .problem-v2__brand--pair .problem-v2__brand-back { left:32%; width:54%; rotate:-7deg; }
  .problem-static-cards--copy .problem-v2__brand--pair .problem-v2__brand-front { left:-4%; width:54%; rotate:-15deg; }
}
/* Solo móvil. Google Calendar: solo el logo 15° más inclinado a la izquierda y 10% más a la izquierda (la x se queda). */
@media (max-width:620px) { .problem-static-cards--copy .problem-v2__brand img[src*="calendar"] { rotate:-15deg; translate:-10% 0; } }
/* Solo móvil. "Comprar" baja hasta que un cuarto del botón queda dentro de la burbuja de Woo (sigue tocando la x). */
@media (max-width:620px) { .problem-static-cards--copy .problem-static-card .problem-v2__buy { top:23.2%; } }
/* Solo móvil. El título (en una línea) deja libre el espacio de la x, que está fija en la esquina de la tarjeta:
   su tamaño se calcula con el ancho de la tarjeta menos el margen, la x (≈41% del logo) y 6px de aire. */
@media (max-width:620px) { .problem-static-cards--copy .problem-static-card strong { font-size:min(20px, (var(--cw) - 30px - var(--brand) * .41) / 12.7); } }
/* Solo móvil. Woo: el logo y "Comprar" se recorren 7% a la derecha; la x se queda y el botón pasa un poco por debajo de ella. */
@media (max-width:620px) {
  .problem-static-cards--copy .problem-v2__brand--store img { translate:7% 0; }
  .problem-static-cards--copy .problem-static-card .problem-v2__brand--store .problem-v2__buy { right:calc(55% - 4px); }
}

/* Copia de "Personalización" con los pasos en tarjetas: una columna, ícono a la izquierda y texto a la derecha;
   tarjetas alternadas blanca (con sombra) y crema #FEF7EC. Tipografía del Figma: paso #F49C2B, título H6, párrafo gris. */
.pcards { display:grid; gap:20px; width:min(760px,100%); margin:40px auto 0; padding:0; list-style:none; }
.pcard { display:flex; align-items:flex-start; gap:24px; padding:32px; border:1px solid rgba(229,116,17,.08); border-radius:20px; background:#fff; box-shadow:var(--animation-shadow); text-align:left; }
.pcard:nth-child(even) { border-color:transparent; background:#fef7ec; box-shadow:none; }
.pcard__icon { position:relative; flex:0 0 64px; height:64px; border-radius:14px; background:#fef7ec; }
.pcard:nth-child(even) .pcard__icon { background:#fceac9; }
.pcard__icon::before { content:""; position:absolute; inset:0; margin:auto; width:32px; height:32px; background:#d2570d; -webkit-mask:var(--step-icon) center / contain no-repeat; mask:var(--step-icon) center / contain no-repeat; }
.pcard__body { min-width:0; }
.pcard__number { display:block; color:#f49c2b; font:500 16px/24px "IBM Plex Sans",sans-serif; }
.pcard h4 { margin:4px 0 0; color:#0a0a0a; font:500 24px/32px Manrope,sans-serif; }
.pcard p { margin:8px 0 0; color:#525252; font:400 16px/24px "IBM Plex Sans",sans-serif; }
@media (max-width:980px) { .pcards { margin-top:32px; } .pcard h4 { font-size:22px; line-height:30px; } }
@media (max-width:620px) {
  .pcards { gap:16px; margin-top:32px; }
  .pcard { gap:16px; padding:20px; border-radius:18px; }
  .pcard__icon { flex-basis:56px; height:56px; border-radius:12px; }
  .pcard__icon::before { width:28px; height:28px; }
  .pcard__number { font-size:14px; line-height:20px; }
  .pcard h4 { margin-top:2px; font-size:18px; line-height:24px; font-weight:600; }
  .pcard p { margin-top:6px; font-size:14px; line-height:21px; }
}
/* Solo móvil. Pasos en tarjetas: sin el cuadro del ícono; cada ícono va como marca de agua grande y tenue a la derecha de su tarjeta. */
@media (max-width:620px) {
  .pcard { position:relative; overflow:hidden; isolation:isolate; }
  .pcard__icon { position:absolute; top:50%; right:-22px; z-index:-1; width:150px; height:150px; flex:none; border-radius:0; background:none; translate:0 -50%; rotate:-14deg; pointer-events:none; }
  .pcard:nth-child(even) .pcard__icon { background:none; }
  .pcard__icon::before { width:100%; height:100%; opacity:.08; }
}
/* Web (escritorio y tableta): igual que en móvil, el ícono va como marca de agua a la derecha de su tarjeta. */
@media (min-width:621px) {
  .pcard { position:relative; overflow:hidden; isolation:isolate; padding-right:160px; }
  .pcard__icon { position:absolute; top:50%; right:-10px; z-index:-1; width:190px; height:190px; flex:none; border-radius:0; background:none; translate:0 -50%; rotate:-14deg; pointer-events:none; }
  .pcard:nth-child(even) .pcard__icon { background:none; }
  .pcard__icon::before { width:100%; height:100%; opacity:.08; }
}

/* Copia de "El problema" con indicadores de estado: en lugar de la x, cada logo muestra lo que sale mal
   (12 sin leer, actualizar manualmente, abandonado, gráfica a la baja, no asistió, última compra hace 90 días).
   La etiqueta va abajo a la derecha, sobre el logo, y aparece y se va al mismo ritmo que él. */
.problem-status { position:absolute; right:14px; bottom:14px; z-index:3; display:inline-flex; align-items:center; gap:6px; max-width:calc(var(--brand) * .72); padding:6px 10px; border:1px solid rgba(10,10,10,.06); border-radius:999px; color:#0a0a0a; background:#fff; box-shadow:0 6px 16px rgba(117,38,18,.18); font:500 13px/16px "IBM Plex Sans",sans-serif; white-space:nowrap; rotate:-4deg; transform-origin:right bottom; pointer-events:none; animation:problem-brand-x 6.4s ease infinite; animation-delay:var(--brand-delay); animation-fill-mode:backwards; }
.problem-status b { display:inline-grid; min-width:20px; height:20px; padding:0 5px; place-items:center; border-radius:999px; color:#fff; background:#25d366; font:600 11px/1 "IBM Plex Sans",sans-serif; }
.problem-status svg { flex:none; width:15px; height:15px; color:#ff7a59; }
.problem-status--manual { white-space:normal; border-radius:12px; line-height:15px; }
.problem-status--alert { color:#dc2626; }
.problem-status--alert i { flex:none; width:7px; height:7px; border-radius:50%; background:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.15); }
.problem-status--chart { padding:8px 10px; border-radius:12px; }
.problem-status--chart svg { width:64px; height:30px; }
.problem-status--last { flex-direction:column; align-items:flex-start; gap:0; border-radius:12px; font-weight:600; }
.problem-status--last small { color:#737373; font:500 11px/14px "IBM Plex Sans",sans-serif; }
@media (max-width:620px) {
  .problem-status { right:10px; bottom:10px; gap:5px; padding:4px 8px; font-size:11px; line-height:14px; }
  .problem-status b { min-width:17px; height:17px; font-size:10px; }
  .problem-status svg { width:13px; height:13px; }
  .problem-status--chart { padding:6px 8px; }
  .problem-status--chart svg { width:52px; height:24px; }
  .problem-status--last small { font-size:10px; line-height:12px; }
}
@media (prefers-reduced-motion:reduce) { .problem-status { animation:none; } }

/* WhatsApp en la copia: logo un poco más arriba y, en su esquina, solo el contador rojo de mensajes sin leer
   (usa la posición y animación de la x de la sección original). */
.problem-v2--status .problem-static-card:has(.problem-msg) .problem-v2__brand { margin-bottom:calc(var(--brand) * .03); margin-right:calc(var(--brand) * .14); scale:.85; }
.problem-v2__badge { z-index:3; display:grid; place-items:center; border-radius:50%; color:#fff; background:#dc2626; font:600 calc(var(--brand) * .13)/1 "IBM Plex Sans",sans-serif; rotate:14deg; animation:problem-badge-pop 6.4s ease infinite; }
/* Icono genérico de mensaje (sustituye a WhatsApp); el contador va centrado en su esquina superior derecha. */
.problem-msg > svg { display:block; width:100%; height:100%; filter:drop-shadow(0 6px 10px rgba(117,38,18,.16)); }
.problem-v2--status .problem-static-card:has(.problem-msg) .problem-v2__badge { width:calc(var(--brand) * .2268); height:calc(var(--brand) * .2268); right:calc(var(--brand) * .1166); top:calc(var(--brand) * .1116); font-size:calc(var(--brand) * .1053); }
@media (max-width:620px) {
  .problem-v2--status .problem-static-card:has(.problem-msg) .problem-v2__badge { width:calc(var(--brand) * .252); height:calc(var(--brand) * .252); right:calc(var(--brand) * .104); top:calc(var(--brand) * .099); font-size:calc(var(--brand) * .117); }
}
/* El icono queda fijo; solo el contador aparece, sube de 1 en 1 hasta 12 y se va.
   Ciclo de 6.4 s: aparece (~0.8 s), cuenta 1→12 (~2.4 s), deja el 12 fijo 2 s y se va.
   El número lo escribe problem-animations.js siguiendo esta animación (Safari en iPhone no
   actualiza un contador CSS animado con @property). */
@keyframes problem-badge-pop {
  0%, 12.5% { scale:0; opacity:0; }
  16% { scale:1.15; opacity:1; }
  18.75%, 87.5% { scale:1; opacity:1; }
  92%, 100% { scale:0; opacity:0; }
}
.problem-v2--status .problem-static-card:has(.problem-msg) .problem-v2__brand { animation:none; }
@media (max-width:620px) {
  .problem-v2--status .problem-static-card:has(.problem-msg) .problem-v2__brand { margin-bottom:calc(var(--brand) * .115); margin-right:calc(var(--brand) * .15); scale:.837; }
}

/* Seguimiento manual en la copia: mini CRM azul (contrasta con el naranja) donde un cursor arrastra la tarjeta del cliente de "Nuevo" a "Contactado".
   Todo se mide en em a partir de --brand para escalar con la tarjeta. */
/* Colores de las interfaces (CRM y dashboard). Azul por defecto; la sección con paleta de marca los redefine. */
.problem-crm { --crm-bar:#2563eb; --crm-bar-edge:#1d4ed8; --crm-line:#bfdbfe; --crm-soft:#dbeafe; --crm-accent:#2563eb; --crm-avatar:linear-gradient(135deg,#93c5fd,#3b82f6); --crm-ink:#0f172a; --crm-dash:#93c5fd; --crm-ghost:#eff6ff; --crm-muted:#64748b; --crm-shadow:30,64,175; }
/* Sección con paleta de marca: el CRM va en lila. */
.problem-v2--brand .problem-crm { --crm-bar:#8b5cf6; --crm-bar-edge:#7c3aed; --crm-line:#ddd6fe; --crm-soft:#ede9fe; --crm-accent:#7c3aed; --crm-avatar:linear-gradient(135deg,#c4b5fd,#8b5cf6); --crm-ink:#1a1a1a; --crm-dash:#c4b5fd; --crm-ghost:#f5f3ff; --crm-muted:#666666; --crm-shadow:91,33,182; }
/* Dashboard de campañas: visual neutra en grises para que resalten los colores reales de Google Ads y Meta,
   con los logos y el porcentaje más grandes. */
.problem-v2--brand .problem-dash__logos img { width:2.3em; height:2.3em; }
/* Calendario de citas perdidas más grande que el carrito y la bolsa (.74 → +10% → +15% = .936). */
.problem-v2--brand .problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-cal { scale:.87; margin-bottom:calc(var(--brand) * .05); }
/* La etiqueta va por encima de los aros para que se distinga el calendario. */
/* Carrito (paleta de marca): los paquetes caen dentro del carrito uno tras otro y después aparece "Abandonado".
   Ciclo de 6.4 s: caja 1 cae (0–11 %), caja 2 cae (9–20 %), etiqueta entra (~24 %) y todo se va al final. */
.problem-cart__box { animation:problem-cart-drop 6.4s ease-in infinite; animation-delay:var(--brand-delay); }
.problem-cart__box--2 { animation-name:problem-cart-drop-2; }
@keyframes problem-cart-drop {
  0% { translate:0 -110px; opacity:0; }
  3% { opacity:1; }
  11% { translate:0 0; animation-timing-function:ease-out; }
  13% { translate:0 -5px; animation-timing-function:ease-in; }
  15%, 88% { translate:0 0; opacity:1; }
  94%, 100% { translate:0 0; opacity:0; }
}
@keyframes problem-cart-drop-2 {
  0%, 9% { translate:0 -110px; opacity:0; }
  12% { opacity:1; }
  20% { translate:0 0; animation-timing-function:ease-out; }
  22% { translate:0 -4px; animation-timing-function:ease-in; }
  24%, 88% { translate:0 0; opacity:1; }
  94%, 100% { translate:0 0; opacity:0; }
}
.problem-cart__bubble.problem-cart__bubble--late { animation-name:problem-cart-bubble; animation-timing-function:ease; }
@keyframes problem-cart-bubble {
  0%, 24% { scale:0; opacity:0; }
  29% { scale:1.15; opacity:1; }
  32%, 84% { scale:1; opacity:1; }
  88%, 100% { scale:0; opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .problem-cart__box { animation:none; } }
.problem-v2--brand .problem-cal__label { top:calc(var(--brand) * .04); }
@media (min-width:621px) {
  .problem-v2--brand .problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-cal { margin-bottom:calc(var(--brand) * -.01); }
  .problem-v2--brand .problem-cal__label { top:calc(var(--brand) * .095); }
}
.problem-v2--brand .problem-dash__kpi small { font-size:.75em; }
.problem-v2--brand .problem-dash__kpi b { font-size:1.4em; }
.problem-v2--brand .problem-crm.problem-dash { --crm-bar:#f5f5f5; --crm-bar-edge:#e5e5e5; --crm-bar-ink:#333333; --crm-bar-dot:#cccccc; --crm-line:#e5e5e5; --crm-soft:#e5e5e5; --crm-muted:#666666; --crm-shadow:0,0,0; }
.problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-crm { right:calc(14px - var(--brand) * .1324); bottom:calc(var(--brand) * -.1094); width:calc(var(--brand) * .6966); height:calc(var(--brand) * .528); margin:0; scale:1; rotate:-6deg; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--crm-line); border-radius:1em; background:#fff; box-shadow:0 10px 24px rgba(var(--crm-shadow),.18); font-size:calc(var(--brand) * .0339); }
.problem-crm__bar { display:flex; align-items:center; gap:.35em; padding:.55em .8em; background:var(--crm-bar); border-bottom:1px solid var(--crm-bar-edge); }
.problem-crm__bar i { width:.55em; height:.55em; border-radius:50%; background:var(--crm-bar-dot, rgba(255,255,255,.55)); }
.problem-crm__bar b { margin-left:.4em; color:var(--crm-bar-ink, #fff); font:700 .8em/1 "IBM Plex Sans",sans-serif; letter-spacing:.04em; }
.problem-crm__board { display:grid; grid-template-columns:1fr 1fr; gap:.6em; padding:.7em; flex:1; }
.problem-crm__col { display:flex; flex-direction:column; gap:.45em; padding:.5em; border:1px solid var(--crm-soft); border-radius:.6em; background:#fff; }
.problem-crm__col small { color:var(--crm-accent); font:600 .72em/1.2 "IBM Plex Sans",sans-serif; }
.problem-crm__card, .problem-crm__slot, .problem-crm__ghost { height:2.7em; border-radius:.5em; }
.problem-crm__card { position:relative; z-index:2; display:flex; align-items:center; gap:.45em; padding:0 .45em; border:1px solid var(--crm-line); background:#fff; box-shadow:0 1px 3px rgba(var(--crm-shadow),.15); animation:problem-crm-card 5s ease-in-out infinite; animation-delay:var(--brand-delay); }
.problem-crm__card > i { flex:none; width:1.5em; height:1.5em; border-radius:50%; background:var(--crm-avatar); }
.problem-crm__card > span { display:flex; flex-direction:column; min-width:0; }
.problem-crm__card b { color:var(--crm-ink); font:600 .72em/1.2 "IBM Plex Sans",sans-serif; white-space:nowrap; }
.problem-crm__card em { color:var(--crm-accent); font:500 .65em/1.2 "IBM Plex Sans",sans-serif; font-style:normal; }
.problem-crm__slot { border:1px dashed var(--crm-dash); }
.problem-crm__ghost { height:2.2em; background:var(--crm-ghost); }
.problem-crm__cursor { position:absolute; left:58%; top:40%; width:1.9em; height:1.9em; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); animation:problem-crm-cursor 5s ease-in-out infinite; animation-delay:var(--brand-delay); }
@keyframes problem-crm-card {
  0% { opacity:0; translate:0 0; scale:1; rotate:0deg; }
  6%, 20% { opacity:1; translate:0 0; scale:1; rotate:0deg; box-shadow:0 1px 3px rgba(var(--crm-shadow),.15); }
  26% { translate:0 -.3em; scale:1.06; rotate:3deg; box-shadow:0 8px 16px rgba(var(--crm-shadow),.3); }
  50% { translate:calc(100% + 1.6em) -.3em; scale:1.06; rotate:3deg; box-shadow:0 8px 16px rgba(var(--crm-shadow),.3); }
  56%, 86% { opacity:1; translate:calc(100% + 1.6em) 0; scale:1; rotate:0deg; box-shadow:0 1px 3px rgba(var(--crm-shadow),.15); }
  94%, 100% { opacity:0; translate:calc(100% + 1.6em) 0; }
}
@keyframes problem-crm-cursor {
  0%, 4% { opacity:0; translate:5em 4em; scale:1; }
  18% { opacity:1; translate:0 0; scale:1; }
  22%, 52% { translate:0 0; scale:.85; }
  56% { translate:0 0; scale:1; opacity:1; }
  70%, 100% { translate:4em 3em; opacity:0; }
}
.problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-crm { animation:none; }

/* Carritos abandonados en la copia: carrito genérico azul fijo y, arriba, una burbuja "Abandonado" que aparece y se va. */
.problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-cart { margin-bottom:calc(var(--brand) * .08); margin-right:calc(var(--brand) * .1); scale:.74; animation:none; }
.problem-cart > svg { display:block; width:100%; height:100%; filter:drop-shadow(0 6px 10px rgba(117,38,18,.16)); }
.problem-cart__bubble { position:absolute; left:50%; top:calc(var(--brand) * .1); z-index:3; display:inline-flex; align-items:center; gap:.4em; padding:.45em .8em; border-radius:999px; color:#dc2626; background:#fff; box-shadow:0 6px 16px rgba(117,38,18,.18); font:600 calc(var(--brand) * .078)/1 "IBM Plex Sans",sans-serif; white-space:nowrap; translate:-50% 0; rotate:14deg; transform-origin:center bottom; animation:problem-brand-x 6.4s ease infinite; animation-delay:var(--brand-delay); animation-fill-mode:backwards; }
.problem-cart__bubble::after { content:""; position:absolute; left:50%; bottom:-.3em; width:.7em; height:.7em; background:#fff; translate:-50% 0; rotate:45deg; }
.problem-cart__bubble i { flex:none; width:.5em; height:.5em; border-radius:50%; background:#dc2626; box-shadow:0 0 0 .2em rgba(220,38,38,.15); }
@media (prefers-reduced-motion:reduce) { .problem-cart__bubble { animation:none; } }
/* Clientes que no recompran: misma base que el carrito, con una bolsa genérica y la etiqueta "Compró hace 90 días". */
.problem-bag__label { left:42%; gap:.3em; animation:problem-brand-x 6.4s ease infinite, problem-bag-count 6.4s linear infinite; animation-delay:var(--brand-delay); }
/* Los días suben de 1 a 90 mientras la etiqueta está visible y se quedan en 90 hasta que se va. */
@property --days { syntax:"<integer>"; inherits:true; initial-value:90; }
@keyframes problem-bag-count {
  0%, 18% { --days:1; }
  52%, 100% { --days:90; }
}
.problem-bag__days { min-width:1.2em; text-align:center; font-variant-numeric:tabular-nums; counter-reset:days var(--days); }
.problem-bag__days::after { content:counter(days); }
@media (prefers-reduced-motion:reduce) { .problem-bag__label { animation:none; } }

/* Citas perdidas: calendario genérico fijo; la etiqueta queda visible y cambia cada segundo
   entre "No agendó", "No asistió" y "No reagendó" (las tres se apilan y solo una se ve a la vez). */
.problem-cal__label { animation:none; }
.problem-cal__words { display:grid; }
.problem-cal__words span { grid-area:1 / 1; opacity:0; animation:problem-cal-word 3s steps(1, end) infinite; }
.problem-cal__words span:nth-child(2) { animation-delay:1s; }
.problem-cal__words span:nth-child(3) { animation-delay:2s; }
@keyframes problem-cal-word {
  0% { opacity:1; }
  33.333%, 100% { opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .problem-cal__words span { animation:none; } .problem-cal__words span:nth-child(2) { opacity:1; } }

/* Campañas sin optimizar en la copia: mini dashboard (misma ventana que el CRM) con los logos de Google Ads y Meta
   y una gráfica roja a la baja que se va dibujando. */
/* La ventana se sale por la derecha y por abajo de la tarjeta: el contenido deja ese margen para que la flecha y el KPI se vean. */
.problem-dash__body { display:flex; flex-direction:column; gap:.5em; flex:1; min-height:0; padding:.7em calc(var(--brand) * .1324 - 14px + 1.8em) calc(var(--brand) * .1094 + .7em) .8em; }
.problem-dash__head { display:flex; align-items:center; justify-content:space-between; gap:.5em; }
.problem-dash__logos { display:flex; align-items:center; gap:.35em; padding:.3em .45em; border:1px solid var(--crm-soft); border-radius:.6em; }
.problem-dash__logos img { display:block; width:1.6em; height:1.6em; object-fit:contain; }
.problem-dash__kpi { display:flex; flex-direction:column; align-items:flex-end; }
.problem-dash__kpi small { color:var(--crm-muted); font:500 .65em/1.2 "IBM Plex Sans",sans-serif; }
.problem-dash__kpi b { color:#dc2626; font:700 .95em/1.1 "IBM Plex Sans",sans-serif; white-space:nowrap; }
.problem-dash__chart { display:block; width:100%; flex:1; min-height:0; overflow:visible; }
.problem-dash__area { animation:problem-dash-area 4s ease-in-out infinite; animation-delay:var(--brand-delay); }
@keyframes problem-dash-area {
  0%, 20% { opacity:0; }
  55%, 88% { opacity:1; }
  96%, 100% { opacity:0; }
}
.problem-chart__line, .problem-chart__head { stroke-dasharray:1; animation:problem-chart-line 4s ease-in-out infinite; animation-delay:var(--brand-delay); }
.problem-chart__head { animation-name:problem-chart-head; }
@keyframes problem-chart-line {
  0%, 8% { stroke-dashoffset:1; opacity:1; }
  50%, 88% { stroke-dashoffset:0; opacity:1; }
  96%, 100% { stroke-dashoffset:0; opacity:0; }
}
@keyframes problem-chart-head {
  0%, 50% { stroke-dashoffset:1; opacity:1; }
  60%, 88% { stroke-dashoffset:0; opacity:1; }
  96%, 100% { stroke-dashoffset:0; opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .problem-chart__line, .problem-chart__head, .problem-dash__area { animation:none; stroke-dasharray:none; } }
@media (prefers-reduced-motion:reduce) { .problem-crm__card, .problem-crm__cursor, .problem-v2__badge { animation:none; } }

/* Tercera copia de "El problema" (tarjetas cuadradas): dos columnas, cada tarjeta 1:1 con el texto arriba
   y la ilustración centrada abajo. El tamaño del icono (--brand) se toma del ancho de la tarjeta (--cw). */
section.problem-v2--square .problem-static-cards.problem-static-cards--copy { grid-template-columns:repeat(2,minmax(0,1fr)); --pg-cols:2; width:min(760px,100%); }
section.problem-v2--square .problem-static-cards--copy .problem-static-card.problem-static-card { --brand:calc(var(--cw) * .66); aspect-ratio:1 / 1; min-height:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:28px; }
section.problem-v2--square .problem-static-cards--copy .problem-static-card .problem-static-card__content p { max-width:none; margin-right:0; }
/* Primera copia (iconos azules, tarjetas horizontales): mismo tono que la versión cuadrada. */
section.problem-v2--status:not(.problem-v2--brand) .problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) { --problem-card-bg:rgba(244,156,43,.85); background:var(--problem-card-bg); border-color:transparent; }
/* Degradado diagonal al 100 %: arranca claro (#F9C67E, arriba a la izquierda) y llega al tono más fuerte, #F49C2B, en la esquina de abajo. Sombra suave cálida. */
section.problem-v2--status:not(.problem-v2--brand) .problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) { background:linear-gradient(to bottom right, #f9c67e 0%, #f6ad4f 50%, #f49c2b 100%); box-shadow:0 10px 24px rgba(117,38,18,.18); }
section.problem-v2--status:not(.problem-v2--brand) .problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) strong { color:#fff; font-weight:700; }
section.problem-v2--status:not(.problem-v2--brand) .problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) .problem-static-card__content p { color:#f5f5f5; }
/* Citas perdidas (esta copia), ciclo de 5.2 s: 4 días se llenan de verde con palomita uno tras otro (cada 0.4 s),
   se quedan 1.5 s, luego los 4 pasan a rojo con tache 1.5 s, quedan vacíos 1 s y vuelve a empezar. */
/* CRM y dashboard de campañas: pestaña superior más alta y texto interior más grande (≈ +25 %). */
section.problem-v2--status .problem-crm__bar { gap:.45em; padding:.85em 1em; }
section.problem-v2--status .problem-crm__bar i { width:.7em; height:.7em; }
section.problem-v2--status .problem-crm__bar b { font-size:1.1em; }
section.problem-v2--status .problem-crm__col small { font-size:.9em; }
section.problem-v2--status .problem-crm__card, section.problem-v2--status .problem-crm__slot { height:3.2em; }
section.problem-v2--status .problem-crm__card > i { width:1.8em; height:1.8em; }
section.problem-v2--status .problem-crm__card b { font-size:.9em; }
section.problem-v2--status .problem-crm__card em { font-size:.82em; }
section.problem-v2--status .problem-dash__logos img { width:2.6em; height:2.6em; }
section.problem-v2--status .problem-dash__kpi small { font-size:1em; }
section.problem-v2--status .problem-dash__kpi b { font-size:1.6em; }
/* Títulos de esta copia en móvil 1 px más pequeños (19.5 → 18.5 px). */
@media (max-width:620px) { section.problem-v2--status:not(.problem-v2--brand) .problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) strong { font-size:18.5px; } }
/* Icono de mensaje de esta copia: −7 % y luego +6 % (.85 → .8379; en móvil .837 → .8247), 3 % más abajo; girado 7 % de vuelta a la derecha y luego 7 % a la izquierda: vuelve a −14°.
   El 12 compensa el giro para quedar derecho. */
section.problem-v2--status:not(.problem-v2--brand) .problem-msg .problem-v2__badge { rotate:14deg; }
section.problem-v2--status:not(.problem-v2--brand) .problem-static-card:has(.problem-msg) .problem-v2__brand.problem-msg { scale:.8379; translate:0 3%; rotate:-14deg; }
@media (max-width:620px) { section.problem-v2--status:not(.problem-v2--brand) .problem-static-card:has(.problem-msg) .problem-v2__brand.problem-msg { scale:.8247; translate:0 3%; rotate:-14deg; } }
/* Bolsa de esta copia: +25 % y luego +15 % (.74 → 1.064), 7 % más a la izquierda (con su botón y cursor). */
section.problem-v2--status:not(.problem-v2--brand) .problem-static-card .problem-v2__brand.problem-cart.problem-bag { scale:1.064; translate:-7% 0; }
/* No recompran (esta copia), ciclo de 5 s: un paquete llega volando hacia la bolsa, entra, pero rebota hacia afuera
   y cae fuera de la tarjeta. El paquete va detrás del frente de la bolsa, así parece que entra. */
.problem-bag--bounce > .problem-reb__bag { overflow:visible; }
.problem-reb__box { transform-box:fill-box; transform-origin:center; animation:problem-reb-box 5s linear infinite; }
@keyframes problem-reb-box {
  0% { transform:translate(-120px,-18px) rotate(-35deg); opacity:0; animation-timing-function:ease-out; }
  8% { opacity:1; }
  30% { transform:translate(0,0) rotate(0); animation-timing-function:ease-in; }
  38% { transform:translate(0,26px) rotate(0); animation-timing-function:ease-out; }
  50% { transform:translate(-30px,-16px) rotate(-30deg); animation-timing-function:ease-in; }
  70% { transform:translate(-75px,50px) rotate(-85deg); opacity:1; }
  82%, 100% { transform:translate(-95px,150px) rotate(-120deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .problem-reb__box { animation:none; } }
/* En escritorio la bolsa va 8 % más abajo. */
@media (min-width:621px) { section.problem-v2--status:not(.problem-v2--brand) .problem-static-card .problem-v2__brand.problem-cart.problem-bag { translate:-7% 8%; } }
/* Carrito de esta copia 10 % más grande (.74 → .814). */
section.problem-v2--status:not(.problem-v2--brand) .problem-static-card .problem-v2__brand.problem-cart:not(.problem-cal):not(.problem-bag) { scale:.814; translate:0 -3%; }
/* Carrito animado de esta copia (ciclo de 7 s): el carrito está fijo, caen los dos paquetes (1.2–2.6 s), aparece un
   botón rojo de cerrar (2.8 s), el cursor llega y le da clic (3.2–4.4 s), los paquetes revientan como burbuja (4.5–4.9 s)
   y el carrito queda vacío hasta reiniciar. */
.problem-cart--pop { --pop:7s; }
.problem-pop__cart { display:block; width:100%; height:100%; }
.problem-pop__box { transform-box:fill-box; transform-origin:center; animation:problem-pop-box var(--pop) ease-in infinite; }
.problem-pop__box--2 { animation-name:problem-pop-box2; }
.problem-pop__close { position:absolute; left:62%; top:24%; z-index:3; display:grid; place-items:center; width:16%; height:16%; border-radius:50%; background:#dc2626; translate:-50% -50%; animation:problem-pop-close var(--pop) ease infinite; }
.problem-pop__close svg { width:62%; height:62%; }
.problem-cart--pop > .problem-pop__cursor { position:absolute; left:58.7%; top:22%; z-index:4; width:16%; height:16%; transform-origin:20% 12%; animation:problem-pop-cursor var(--pop) ease-in-out infinite; }
.problem-pop__burst { position:absolute; left:54%; top:33%; z-index:2; width:0; height:0; }
.problem-pop__burst::before { content:""; position:absolute; left:calc(var(--brand) * -.2); top:calc(var(--brand) * -.2); width:calc(var(--brand) * .4); height:calc(var(--brand) * .4); border:3px solid #fff; border-radius:50%; opacity:0; animation:problem-pop-ring var(--pop) ease-out infinite; }
.problem-pop__burst i { position:absolute; left:calc(var(--brand) * -.03); top:calc(var(--brand) * -.03); width:calc(var(--brand) * .06); height:calc(var(--brand) * .06); border-radius:50%; background:#60a5fa; opacity:0; animation:problem-pop-drop var(--pop) ease-out infinite; }
.problem-pop__burst i:nth-child(1) { --a:0deg; } .problem-pop__burst i:nth-child(2) { --a:60deg; background:#fff; } .problem-pop__burst i:nth-child(3) { --a:120deg; }
.problem-pop__burst i:nth-child(4) { --a:180deg; background:#fff; } .problem-pop__burst i:nth-child(5) { --a:240deg; } .problem-pop__burst i:nth-child(6) { --a:300deg; background:#fff; }
@keyframes problem-pop-cart {
  0% { translate:-150% 0; scale:1; opacity:0; }
  4% { opacity:1; }
  16%, 63% { translate:0 0; scale:1; opacity:1; }
  66% { translate:0 0; scale:1.14; opacity:1; }
  70%, 100% { translate:0 0; scale:1.35; opacity:0; }
}
@keyframes problem-pop-box {
  0%, 17% { translate:0 -130px; opacity:0; }
  19% { opacity:1; }
  26% { translate:0 0; animation-timing-function:ease-out; }
  28% { translate:0 -6px; animation-timing-function:ease-in; }
  30%, 64% { translate:0 0; scale:1; opacity:1; }
  67% { translate:0 0; scale:1.25; opacity:1; }
  70%, 100% { translate:0 0; scale:1.5; opacity:0; }
}
@keyframes problem-pop-box2 {
  0%, 24% { translate:0 -130px; opacity:0; }
  26% { opacity:1; }
  33% { translate:0 0; animation-timing-function:ease-out; }
  35% { translate:0 -5px; animation-timing-function:ease-in; }
  37%, 64% { translate:0 0; scale:1; opacity:1; }
  67% { translate:0 0; scale:1.25; opacity:1; }
  70%, 100% { translate:0 0; scale:1.5; opacity:0; }
}
@keyframes problem-pop-close {
  0%, 40% { scale:0; opacity:0; }
  44% { scale:1.15; opacity:1; }
  46%, 60% { scale:1; opacity:1; }
  62% { scale:.82; opacity:1; }
  64% { scale:1; opacity:1; }
  67%, 100% { scale:0; opacity:0; }
}
@keyframes problem-pop-cursor {
  0%, 44% { translate:140% 160%; scale:1; opacity:0; }
  47% { opacity:1; }
  59% { translate:0 0; scale:1; opacity:1; }
  61% { translate:0 0; scale:.78; }
  63% { translate:0 0; scale:1; opacity:1; }
  68%, 100% { translate:0 0; scale:1; opacity:0; }
}
@keyframes problem-pop-ring {
  0%, 65% { scale:.3; opacity:0; }
  66% { scale:.4; opacity:.9; }
  74%, 100% { scale:1.4; opacity:0; }
}
@keyframes problem-pop-drop {
  0%, 66% { transform:rotate(var(--a)) translateY(0) scale(.6); opacity:0; }
  67% { opacity:1; }
  75%, 100% { transform:rotate(var(--a)) translateY(calc(var(--brand) * -.3)) scale(1); opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .problem-pop__cart, .problem-pop__box, .problem-pop__close, .problem-pop__cursor, .problem-pop__burst::before, .problem-pop__burst i { animation:none; } .problem-pop__cursor, .problem-pop__close { opacity:0; } }
/* Calendario de esta copia 20 % más grande que el carrito y la bolsa (.74 → .888). */
.problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-cal.problem-cal--cycle { scale:.977; translate:-5% 3%; }
/* Posición vertical: aros dentro de la tarjeta, 7 % más abajo que el ajuste inicial. */
@media (max-width:620px) { .problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-cal.problem-cal--cycle { translate:-5% -5.5%; } }
.problem-cal__day { opacity:0; animation:problem-cal-ok1 5.2s steps(1,end) infinite; }
.problem-cal__day--2 { animation-name:problem-cal-ok2; }
.problem-cal__day--3 { animation-name:problem-cal-ok3; }
.problem-cal__day--4 { animation-name:problem-cal-ok4; }
.problem-cal__day--miss { animation-name:problem-cal-miss; }
@keyframes problem-cal-ok1 { 0% { opacity:1; } 51.92%, 100% { opacity:0; } }
@keyframes problem-cal-ok2 { 0% { opacity:0; } 7.69% { opacity:1; } 51.92%, 100% { opacity:0; } }
@keyframes problem-cal-ok3 { 0% { opacity:0; } 15.38% { opacity:1; } 51.92%, 100% { opacity:0; } }
@keyframes problem-cal-ok4 { 0% { opacity:0; } 23.08% { opacity:1; } 51.92%, 100% { opacity:0; } }
@keyframes problem-cal-miss { 0% { opacity:0; } 51.92% { opacity:1; } 80.77%, 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .problem-cal__day { animation:none; } .problem-cal__day--miss { opacity:1; } }
/* Marca de agua (logo de CAPTA repartido entre las tarjetas) en blanco translúcido para que se vea sobre el naranja. */
section.problem-v2--status:not(.problem-v2--brand) .problem-static-cards--copy .problem-static-card::before { background:#fff; opacity:.16; }
/* Tono de las tarjetas: #F49C2B (Primary 400 de Figma) al 85 % de opacidad, sólido, sin degradado.
   Solo el fondo es translúcido; texto e ilustraciones quedan al 100 %. */
section.problem-v2--square .problem-static-cards--copy .problem-static-card:has(.problem-v2__brand) { --problem-card-bg:rgba(244,156,43,.85); background:var(--problem-card-bg); border-color:transparent; }
/* Estilo plano: sin sombras ni relieves en tarjetas, ilustraciones, ventanas, etiquetas ni contador
   (!important porque algunas sombras vienen de las animaciones). */
section.problem-v2--square .problem-static-card,
section.problem-v2--square .problem-static-card *,
section.problem-v2--square .problem-static-card *::before,
section.problem-v2--square .problem-static-card *::after { box-shadow:none !important; filter:none !important; text-shadow:none !important; }
section.problem-v2--square .problem-static-cards--copy .problem-static-card strong { font-size:22px; font-weight:700; color:#fff; }
section.problem-v2--square .problem-static-cards--copy .problem-static-card .problem-static-card__content p { color:#f5f5f5; }
/* Ilustraciones centradas abajo (sin los desplazamientos que usaban en la tarjeta horizontal). */
section.problem-v2--square .problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-v2__brand { left:50%; right:auto; bottom:calc(var(--brand) * -.04); margin:0; translate:-50% 0; }
/* CRM y dashboard: ventana más ancha, completa dentro de la tarjeta. */
section.problem-v2--square .problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-crm.problem-crm { bottom:-12px; width:calc(var(--cw) * .8); height:calc(var(--cw) * .56); font-size:calc(var(--cw) * .039); rotate:-4deg; }
section.problem-v2--square .problem-dash__body { padding:.7em .8em .6em; }
/* En esta versión todas las ilustraciones van en la familia de azules del icono de mensaje. */
section.problem-v2--square .problem-crm.problem-crm { --crm-bar:#2563eb; --crm-bar-edge:#1d4ed8; --crm-bar-ink:#fff; --crm-bar-dot:rgba(255,255,255,.55); --crm-line:#bfdbfe; --crm-soft:#dbeafe; --crm-accent:#2563eb; --crm-avatar:linear-gradient(135deg,#93c5fd,#3b82f6); --crm-ink:#0f172a; --crm-dash:#93c5fd; --crm-ghost:#eff6ff; --crm-muted:#64748b; --crm-shadow:30,64,175; }
section.problem-v2--square .problem-static-cards--copy .problem-static-card .problem-static-card__content { width:100%; max-width:none; }
/* Marca de agua (logo de CAPTA repartido entre las tarjetas): aquí la altura de cada tarjeta es igual a su ancho,
   siempre hay 2 columnas × 3 filas, y el logo escala con el ancho de la cuadrícula. */
section.problem-v2--square .problem-static-cards.problem-static-cards--copy { --pg-rows:3; --pg-ch:calc((100cqw - var(--pg-gap)) / 2); --pg-logo:calc(100cqw * 1.15); --pg-cx:100cqw; --pg-cy:.5; }
section.problem-v2--square .problem-static-cards--copy .problem-static-card:nth-child(odd) { --pg-col:0 !important; }
section.problem-v2--square .problem-static-cards--copy .problem-static-card:nth-child(even) { --pg-col:1 !important; }
section.problem-v2--square .problem-static-cards--copy .problem-static-card:nth-child(1), section.problem-v2--square .problem-static-cards--copy .problem-static-card:nth-child(2) { --pg-row:0; }
section.problem-v2--square .problem-static-cards--copy .problem-static-card:nth-child(3), section.problem-v2--square .problem-static-cards--copy .problem-static-card:nth-child(4) { --pg-row:1; }
section.problem-v2--square .problem-static-cards--copy .problem-static-card:nth-child(5), section.problem-v2--square .problem-static-cards--copy .problem-static-card:nth-child(6) { --pg-row:2; }
/* En móvil también van dos cuadrados por fila: texto más compacto y la ilustración ocupa la mitad baja. */
@media (max-width:620px) {
  section.problem-v2--square .problem-static-cards.problem-static-cards--copy { grid-template-columns:repeat(2,minmax(0,1fr)); --pg-cols:2; --pg-gap:10px; gap:10px; }
  section.problem-v2--square .problem-static-cards--copy .problem-static-card.problem-static-card { --brand:calc(var(--cw) * .64); padding:12px; border-radius:14px; }
  section.problem-v2--square .problem-static-cards--copy .problem-static-card strong { font-size:14px; line-height:1.2; white-space:normal; overflow:visible; text-overflow:clip; }
  section.problem-v2--square .problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-v2__brand { bottom:calc(var(--brand) * -.15); }
  /* Las ventanas (CRM y dashboard) un poco más bajas para no tapar el texto. */
  section.problem-v2--square .problem-static-cards--copy .problem-static-card .problem-v2__brand.problem-crm.problem-crm { bottom:-18px; height:calc(var(--cw) * .5); }
  section.problem-v2--square .problem-static-cards--copy .problem-static-card .problem-static-card__content p { margin-top:4px; font-size:11px; line-height:1.3; }
}

/* Casos de éxito: carrusel centrado (la tarjeta activa al frente, las vecinas más pequeñas y tenues a los lados),
   flechas naranjas y puntos debajo. Inspirado en vambe.ai, con tipografía y colores de CAPTA. */
.cases-section { position:relative; left:50%; width:100vw; padding:96px 32px 104px; overflow:hidden; translate:-50% 0; background:#fff; }
.cases-section__header { width:min(1022px,100%); margin:0 auto; text-align:center; }
.cases-section__chip { margin-bottom:20px; }
.cases-section h2 { max-width:900px; margin:0 auto; color:#0a0a0a; font:600 56px/64px Manrope,sans-serif; text-wrap:balance; }
.cases-section h2 span { color:var(--orange); }
.cases-section__header p { max-width:640px; margin:12px auto 0; color:#525252; font:400 18px/26px "IBM Plex Sans",sans-serif; }
.cases-carousel { margin-top:56px; }
.cases-carousel__track { position:relative; height:380px; }
.case-card { position:absolute; top:0; left:50%; display:flex; flex-direction:column; gap:20px; width:min(560px,calc(100vw - 48px)); padding:28px; border:1px solid #e5e5e5; border-radius:20px; background:#fff; box-shadow:0 12px 32px rgba(117,38,18,.10); translate:-50% 0; transition:translate .6s cubic-bezier(.22,1,.36,1), scale .6s cubic-bezier(.22,1,.36,1), opacity .6s ease; cursor:pointer; }
.case-card[data-pos="0"] { z-index:3; scale:1; opacity:1; cursor:default; }
.case-card[data-pos="-1"] { z-index:2; translate:calc(-50% - 62%) 18px; scale:.86; opacity:.4; }
.case-card[data-pos="1"] { z-index:2; translate:calc(-50% + 62%) 18px; scale:.86; opacity:.4; }
.case-card[data-pos="hidden"] { z-index:1; scale:.7; opacity:0; pointer-events:none; }
.case-card__head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; }
.case-card__logo { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:#fff; background:linear-gradient(135deg,#f49c2b,#e57411); font:700 16px/1 Manrope,sans-serif; }
.case-card__company { display:flex; flex-direction:column; gap:2px; min-width:0; }
.case-card__company strong { color:#0a0a0a; font:600 18px/24px Manrope,sans-serif; }
.case-card__company span { color:#737373; font:400 13px/18px "IBM Plex Sans",sans-serif; }
.case-card__meta { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.case-card__stars { color:#f49c2b; font-size:14px; letter-spacing:1px; }
.case-card__tag { padding:3px 10px; border:1px solid rgba(229,116,17,.25); border-radius:999px; color:#d2570d; background:#fef7ec; font:500 12px/16px "IBM Plex Sans",sans-serif; }
.case-card__quote { flex:1; margin:0; color:#404040; font:italic 400 17px/27px "IBM Plex Sans",sans-serif; }
.case-card__metric { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:#fef7ec; }
.case-card__metric-icon { display:grid; flex:none; place-items:center; width:40px; height:40px; border-radius:12px; color:#fff; background:#e57411; }
.case-card__metric-icon svg { width:20px; height:20px; }
.case-card__metric strong { display:block; color:#e57411; font:700 18px/24px Manrope,sans-serif; }
.case-card__metric span { color:#737373; font:400 13px/18px "IBM Plex Sans",sans-serif; }
.cases-carousel__controls { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:28px; }
.cases-carousel__arrow { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; color:#fff; background:#e57411; cursor:pointer; transition:background .2s ease, scale .2s ease; }
.cases-carousel__arrow:hover { background:#d2570d; scale:1.05; }
.cases-carousel__arrow svg { width:20px; height:20px; }
.cases-carousel__dots { display:flex; gap:8px; }
.cases-carousel__dots button { width:8px; height:8px; padding:0; border:0; border-radius:999px; background:#f9d28e; cursor:pointer; transition:width .3s ease, background .3s ease; }
.cases-carousel__dots button[aria-current="true"] { width:24px; background:#e57411; }
@media (max-width:980px) {
  .cases-section { padding:72px 40px 80px; }
  .case-card[data-pos="-1"] { translate:calc(-50% - 40%) 18px; scale:.82; opacity:.25; }
  .case-card[data-pos="1"] { translate:calc(-50% + 40%) 18px; scale:.82; opacity:.25; }
}
@media (max-width:620px) {
  .cases-section { padding:56px 16px 64px; }
  .cases-section h2 { font-size:36px; line-height:44px; }
  .cases-section__header p { font-size:16px; line-height:24px; }
  .cases-carousel { margin-top:36px; }
  .case-card { width:calc(100vw - 56px); gap:16px; padding:20px; }
  .case-card__head { grid-template-columns:auto 1fr; }
  .case-card__meta { grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; }
  .case-card__logo { width:42px; height:42px; border-radius:12px; font-size:14px; }
  .case-card__company strong { font-size:16px; line-height:22px; }
  .case-card__quote { font-size:15px; line-height:24px; }
  .case-card[data-pos="-1"] { translate:calc(-50% - 94%) 14px; scale:.9; opacity:.35; }
  .case-card[data-pos="1"] { translate:calc(-50% + 94%) 14px; scale:.9; opacity:.35; }
}
@media (prefers-reduced-motion:reduce) { .case-card { transition:none; } }
/* Opiniones de clientes (Figma CAPTA 686:3705): dos filas de tarjetas que se desplazan solas en sentidos opuestos
   y se desvanecen en los bordes. Cada fila lleva su contenido duplicado para que el desplazamiento no tenga cortes. */
.reviews-section { position:relative; left:50%; width:100vw; padding:80px 0 96px; overflow:hidden; translate:-50% 0; background:#fff; }
.reviews-section__header { width:min(1022px,100%); margin:0 auto; padding:0 32px; text-align:center; }
.reviews-section__chip { margin-bottom:20px; }
.reviews-section h2 { margin:0 auto; color:#0a0a0a; font:600 56px/64px Manrope,sans-serif; text-wrap:balance; }
.reviews-section h2 span { color:var(--orange); }
.reviews-section__header p { max-width:660px; margin:16px auto 0; color:#525252; font:400 18px/26px "IBM Plex Sans",sans-serif; }
.reviews-marquee { display:flex; flex-direction:column; gap:0; margin-top:64px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%); }
.reviews-marquee__row { overflow:hidden; padding:4px 0 12px; }
.reviews-marquee__track { display:flex; gap:16px; width:max-content; animation:reviews-scroll 48s linear infinite; }
.reviews-marquee__row--reverse .reviews-marquee__track { animation-direction:reverse; }
.reviews-marquee:hover .reviews-marquee__track { animation-play-state:paused; }
@keyframes reviews-scroll { from { translate:0 0; } to { translate:calc(-50% - 8px) 0; } }
.review-card { display:flex; flex-direction:column; justify-content:space-between; gap:32px; width:500px; margin:0; padding:24px; border:1px solid #e5e5e5; border-radius:16px; background:#fff; box-shadow:0 12px 32px rgba(23,26,36,.06); }
.review-card blockquote { margin:0; color:#404040; font:400 20px/28px "IBM Plex Sans",sans-serif; }
.review-card figcaption { display:flex; align-items:center; gap:12px; }
.review-card__avatar { display:grid; flex:none; place-items:center; width:48px; height:48px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#f49c2b,#e57411); font:700 15px/1 Manrope,sans-serif; }
.review-card figcaption strong { display:block; color:#0a0a0a; font:500 18px/24px "IBM Plex Sans",sans-serif; }
.review-card figcaption small { color:#525252; font:400 14px/20px "IBM Plex Sans",sans-serif; }
@media (max-width:980px) { .reviews-section { padding:64px 0 80px; } .reviews-marquee { margin-top:56px; } }
@media (max-width:620px) {
  .reviews-section { padding:56px 0 64px; }
  .reviews-section__header { padding:0 16px; }
  .reviews-section h2 { font-size:36px; line-height:44px; }
  .reviews-section__header p { font-size:16px; line-height:24px; }
  .reviews-marquee { gap:0; margin-top:40px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
  .reviews-marquee__track { gap:12px; animation-duration:36s; }
  @keyframes reviews-scroll { from { translate:0 0; } to { translate:calc(-50% - 6px) 0; } }
  .review-card { gap:20px; width:300px; padding:18px; }
  .review-card blockquote { font-size:16px; line-height:24px; }
  .review-card__avatar { width:40px; height:40px; font-size:13px; }
  .review-card figcaption strong { font-size:16px; line-height:22px; }
  .review-card figcaption small { font-size:13px; line-height:18px; }
}
@media (prefers-reduced-motion:reduce) { .reviews-marquee__track { animation:none; } }
/* "El problema": la tarjeta de datos va primero y ocupa las dos columnas; debajo siguen las otras 6 en 2×3.
   La marca de agua se reparte en 4 filas (7 en móvil). Las barras de la gráfica suben y bajan y la lupa muestra la duda. */
.problem-static-cards--copy .problem-static-card--data { --brand-delay:0s; }
@media (min-width:621px) {
  section.problem-v2--status:not(.problem-v2--square) .problem-static-cards--copy { --pg-rows:4; }
  .problem-static-cards--copy .problem-static-card--data { grid-column:1 / -1; }
  .problem-static-cards--copy .problem-static-card:nth-child(1) { --pg-col:0; --pg-row:0; }
  .problem-static-cards--copy .problem-static-card:nth-child(2) { --pg-col:0; --pg-row:1; }
  .problem-static-cards--copy .problem-static-card:nth-child(3) { --pg-col:1; --pg-row:1; }
  .problem-static-cards--copy .problem-static-card:nth-child(4) { --pg-col:0; --pg-row:2; }
  .problem-static-cards--copy .problem-static-card:nth-child(5) { --pg-col:1; --pg-row:2; }
  .problem-static-cards--copy .problem-static-card:nth-child(6) { --pg-col:0; --pg-row:3; }
  .problem-static-cards--copy .problem-static-card:nth-child(7) { --pg-col:1; --pg-row:3; }
}
@media (max-width:620px) {
  section.problem-v2--status:not(.problem-v2--square) .problem-static-cards--copy { --pg-rows:7; }
  .problem-static-cards--copy .problem-static-card:nth-child(7) { --pg-row:6; }
}
.problem-data__bar { transform-box:fill-box; transform-origin:center bottom; animation:problem-data-bar 4s ease-in-out infinite; animation-delay:var(--brand-delay); }
.problem-data__bar--2 { animation-name:problem-data-bar-2; }
.problem-data__bar--3 { animation-name:problem-data-bar-3; }
.problem-data__bar--4 { animation-name:problem-data-bar-4; }
@keyframes problem-data-bar { 0%, 100% { transform:scaleY(1); } 50% { transform:scaleY(.55); } }
@keyframes problem-data-bar-2 { 0%, 100% { transform:scaleY(1); } 50% { transform:scaleY(1.25); } }
@keyframes problem-data-bar-3 { 0%, 100% { transform:scaleY(1); } 50% { transform:scaleY(2); } }
@keyframes problem-data-bar-4 { 0%, 100% { transform:scaleY(1); } 50% { transform:scaleY(.6); } }
.problem-data__lens { transform-box:fill-box; transform-origin:30% 30%; animation:problem-data-lens 4s ease-in-out infinite; animation-delay:var(--brand-delay); }
@keyframes problem-data-lens { 0%, 100% { transform:translate(0,0) rotate(0); } 50% { transform:translate(-22px,-14px) rotate(-8deg); } }
@media (prefers-reduced-motion:reduce) { .problem-data__bar, .problem-data__lens { animation:none; } }

/* Análisis de datos (después de "El problema"): encabezado como el resto (chip → h2 56/64 → párrafo 18/26), dato de HubSpot,
   comparación "Otras soluciones de IA" vs CAPTA (lado a lado en escritorio, apiladas en móvil) y frase de cierre. */
.data-section { position:relative; left:50%; z-index:2; width:100vw; padding:80px 32px; translate:-50% 0; background:#fff; }
.data-section__header { width:min(1022px,100%); margin:0 auto; text-align:center; }
.data-section__chip { margin-bottom:20px; }
.data-section h2 { max-width:900px; margin:0 auto; color:#0a0a0a; font:600 56px/64px Manrope,sans-serif; letter-spacing:0; text-wrap:balance; }
.data-section h2 span { color:var(--orange); }
.data-section__header > p { max-width:720px; margin:16px auto 0; color:#525252; font:400 18px/26px "IBM Plex Sans",sans-serif; text-wrap:balance; }
.data-section__header > p strong { color:#0a0a0a; font-weight:600; }
.data-stat { display:flex; align-items:center; justify-content:center; gap:24px; width:min(960px,100%); margin:48px auto 0; padding:24px 32px; border:1px solid var(--primary-100); border-radius:24px; background:var(--primary-50); }
.data-stat__number { display:flex; flex:none; flex-direction:column; margin:0; color:var(--orange); }
.data-stat__number b { font:700 64px/1 Manrope,sans-serif; letter-spacing:-.02em; white-space:nowrap; }
.data-stat__number span { margin-top:6px; font:600 16px/20px Manrope,sans-serif; }
.data-stat__text p { margin:0; color:#0a0a0a; font:400 20px/28px "IBM Plex Sans",sans-serif; }
.data-stat__text small { display:block; margin-top:8px; color:#a3a3a3; font:400 13px/18px "IBM Plex Sans",sans-serif; }
.data-compare { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; width:min(960px,100%); margin:24px auto 0; }
.data-compare__card { display:flex; flex-direction:column; padding:28px; border-radius:24px; }
.data-compare__card h3 { display:flex; align-items:center; gap:10px; margin:0; font:700 18px/24px Manrope,sans-serif; }
.data-compare__card ul { display:grid; gap:12px; margin:20px 0 0; padding:0; list-style:none; }
.data-compare__card li { position:relative; padding-left:32px; font:400 17px/24px "IBM Plex Sans",sans-serif; }
.data-compare__result { margin:auto 0 0; padding-top:20px; border-top:1px solid; font:700 22px/28px Manrope,sans-serif; }
.data-compare__card ul { margin-bottom:24px; }
.data-compare__card--others { border:1px solid #e9e6e1; color:#525252; background:#f4f2ef; }
.data-compare__card--others h3, .data-compare__card--others .data-compare__result { color:#525252; }
.data-compare__card--others li::before { position:absolute; left:4px; top:0; content:"–"; color:#a3a3a3; }
.data-compare__card--others .data-compare__result { border-color:#e2ded8; }
.data-compare__card--capta { color:#fff; background:linear-gradient(to bottom,#f39c45 0%,#e87a1c 100%); box-shadow:0 18px 40px rgba(229,116,17,.25); }
.data-compare__card--capta h3 { font-size:30px; line-height:36px; }
.data-compare__tag { display:inline-grid; place-items:center; padding:3px 8px; border-radius:8px; color:#fff; background:#171717; font:700 14px/18px Manrope,sans-serif; }
.data-compare__lead { margin:6px 0 0; color:#fef7ec; font:italic 600 17px/24px Manrope,sans-serif; }
.data-compare__card--capta ul { margin-top:16px; }
.data-compare__card--capta li::before { position:absolute; left:2px; top:5px; width:14px; height:8px; content:""; border:solid #fff; border-width:0 0 2.5px 2.5px; rotate:-45deg; }
.data-compare__card--capta .data-compare__result { border-color:rgba(255,255,255,.35); font-size:30px; line-height:36px; }
.data-compare__vs { position:absolute; left:50%; top:50%; z-index:2; display:grid; place-items:center; width:52px; height:52px; border:1px solid #e5e5e5; border-radius:50%; color:#525252; background:#fff; box-shadow:0 4px 12px rgba(10,10,10,.08); font:700 16px/1 Manrope,sans-serif; translate:-50% -50%; }
.data-section__closing { max-width:900px; margin:64px auto 0; color:#0a0a0a; text-align:center; font:600 44px/52px Manrope,sans-serif; text-wrap:balance; }
.data-section__closing span { color:var(--orange); }
@media (max-width:980px) {
  .data-section { padding:64px 40px; }
  .data-section h2 { font-size:44px; line-height:52px; }
  .data-section__closing { font-size:36px; line-height:44px; }
}
@media (max-width:760px) {
  .data-compare { grid-template-columns:1fr; gap:0; }
  .data-compare__vs { position:relative; left:auto; top:auto; justify-self:center; margin:-14px 0; translate:none; }
}
@media (max-width:620px) {
  .data-section { padding:56px 16px; }
  .data-section h2 { font-size:36px; line-height:44px; }
  .data-section__header > p { font-size:16px; line-height:24px; }
  .data-stat { gap:16px; margin-top:32px; padding:20px; border-radius:20px; }
  .data-stat__number b { font-size:44px; }
  .data-stat__number span { font-size:15px; }
  .data-stat__text p { font-size:16px; line-height:22px; }
  .data-stat__text small { font-size:12px; }
  .data-compare__card { padding:22px; border-radius:20px; }
  .data-compare__card li { font-size:16px; line-height:22px; }
  .data-compare__card--capta h3, .data-compare__card--capta .data-compare__result { font-size:26px; line-height:32px; }
  .data-section__closing { margin-top:48px; font-size:30px; line-height:36px; }
}
@media (min-width:761px) { .data-section__closing span { display:block; } }
/* Subtítulo de "El problema": líneas parejas, sin una palabra suelta al final. */
.problem-static-intro__copy span { text-wrap:balance; }

/* "La solución" → Análisis de datos (sustituye a Panel y datos centralizados). Mini tarjeta "Preguntas frecuentes" con 3 barras
   y la recomendación en pastilla negra. Ciclo de 5 s que arranca al entrar en pantalla (data-animation.js):
   0–0.3 s entra la tarjeta · 0.3–1.2 s se llenan las barras (0.15 s entre cada una; los % los cuenta el JS) ·
   1.2–1.5 s pulso de la barra principal · 1.5–1.8 s rebota la pastilla · se queda quieta ~2.8 s y vuelve a empezar. */
.cap-visual--data { width:250px; }
.cap-data__stage { position:absolute; top:0; left:0; width:250px; height:170px; transform-origin:0 0; }
.cap-data__panel { position:absolute; top:4px; left:15px; z-index:2; display:flex; flex-direction:column; gap:7px; box-sizing:border-box; width:220px; padding:9px 10px 20px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px #f0e2cf,0 10px 24px rgba(117,38,18,.14); animation:cap-data-in 5s ease infinite; }
.cap-data__head { display:flex; align-items:center; gap:5px; padding-bottom:6px; border-bottom:1px solid #f5f5f5; }
.cap-data__head img { width:14px; height:14px; }
.cap-data__head b { flex:1 1 auto; color:#0a0a0a; font:600 10px/13px "IBM Plex Sans",sans-serif; }
.cap-data__head em { display:flex; align-items:center; gap:3px; color:#737373; font:500 8px/10px "IBM Plex Sans",sans-serif; font-style:normal; white-space:nowrap; }
.cap-data__head em::before { width:5px; height:5px; content:""; border-radius:50%; background:#16a34a; animation:cap-live 1.4s ease-in-out infinite; }
.cap-data__row { display:flex; flex-direction:column; gap:3px; }
.cap-data__label { display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.cap-data__label b { color:#262626; font:500 9.5px/12px "IBM Plex Sans",sans-serif; }
.cap-data__label em { color:#d2570d; font:700 10px/12px Manrope,sans-serif; font-style:normal; font-variant-numeric:tabular-nums; }
.cap-data__label em::after { content:"%"; }
.cap-data__track { display:block; height:7px; border-radius:99px; background:#f5f5f5; transform-origin:0 50%; }
.cap-data__track i { display:block; width:calc(var(--v) * 2%); height:100%; border-radius:inherit; background:linear-gradient(90deg,#f9d28e,#f49c2b); transform-origin:0 50%; animation:cap-data-bar 5s cubic-bezier(.22,1,.36,1) infinite; animation-delay:calc(var(--q) * .15s); animation-fill-mode:backwards; }
/* Hallazgo principal: la primera barra late y se queda en un naranja más intenso. */
.cap-data__row:first-of-type .cap-data__track { animation:cap-data-pulse 5s ease infinite; }
.cap-data__row:first-of-type .cap-data__track i { animation-name:cap-data-bar, cap-data-hot; animation-timing-function:cubic-bezier(.22,1,.36,1), ease; }
.cap-data__tip { position:absolute; bottom:10px; left:50%; z-index:3; display:flex; align-items:center; gap:4px; padding:4px 11px; border-radius:999px; color:#fff; background:#0a0a0a; box-shadow:0 6px 14px rgba(10,10,10,.22); font:600 10px/14px "IBM Plex Sans",sans-serif; white-space:nowrap; translate:-50% 0; animation:cap-data-tip 5s ease infinite; }
@keyframes cap-data-in { 0% { opacity:0; transform:translateY(8px); } 6%, 92% { opacity:1; transform:none; } 100% { opacity:0; transform:none; } }
@keyframes cap-data-bar { 0%, 6% { transform:scaleX(0); } 18%, 100% { transform:scaleX(1); } }
@keyframes cap-data-hot { 0%, 24% { background:linear-gradient(90deg,#f9d28e,#f49c2b); } 27%, 100% { background:linear-gradient(90deg,#f49c2b,#d2570d); } }
@keyframes cap-data-pulse { 0%, 24% { scale:1; } 27% { scale:1.03 1.9; } 30%, 100% { scale:1; } }
@keyframes cap-data-tip { 0%, 30% { opacity:0; transform:scale(.7); } 34% { opacity:1; transform:scale(1.08); } 36%, 92% { opacity:1; transform:none; } 100% { opacity:0; transform:none; } }
/* Mientras la tarjeta no ha entrado en pantalla, todo espera en el primer cuadro. */
.cap-visual--data.is-waiting *, .cap-visual--data.is-waiting *::before { animation-play-state:paused; }
@media (max-width:620px) { .cap-visual--data { width:156px; } .cap-data__stage { top:12px; transform:scale(.624); } }
@media (prefers-reduced-motion:reduce) { .cap-data__panel, .cap-data__track, .cap-data__track i, .cap-data__tip, .cap-data__head em::before { animation:none; } .cap-data__row:first-of-type .cap-data__track i { background:linear-gradient(90deg,#f49c2b,#d2570d); } }
/* Cierre de "Análisis de datos" del mismo tamaño que la frase final de Personalización (24/32, 20/28 en móvil),
   con la parte naranja en su propia línea. */
.data-section__closing { max-width:760px; font-size:24px; line-height:32px; }
.data-section__closing span { display:block; }
@media (max-width:620px) { .data-section__closing { font-size:20px; line-height:28px; } }

/* Testimonios: avatares con el logo del cliente sobre fondo blanco (Nurvia usa el logo de Reclusalu).
   Profis y Entra Care usan solo su símbolo (profis-mark.png, entra-care-mark.png) para que se lean en el avatar. */
.case-card__logo--logo, .review-card__avatar--logo { overflow:hidden; background:#fff; box-shadow:inset 0 0 0 1px #eeeeee; }
.case-card__logo--logo img, .review-card__avatar--logo img { display:block; width:82%; height:82%; object-fit:contain; }
.case-card__logo--muvo img, .review-card__avatar--muvo img { width:88%; }
/* Sushi Sensei más chico para no cortarse en el círculo. */
.review-card__avatar--sushi-sensei img { width:68%; height:68%; }

/* Pie de página: correo y teléfono de contacto debajo de la descripción. */
.site-footer__contact { display:flex; flex-direction:column; gap:10px; font-style:normal; }
.site-footer__contact a { display:inline-flex; align-items:center; gap:8px; width:fit-content; color:#525252; font-size:14px; line-height:20px; text-decoration:none; transition:color .2s ease; }
.site-footer__contact a:hover { color:#e57411; }
.site-footer__contact svg { flex:none; width:16px; height:16px; color:#e57411; }
/* La dirección puede ocupar dos líneas: el ícono se queda arriba, alineado con la primera. */
.site-footer__contact a { align-items:flex-start; }
.site-footer__contact svg { margin-top:2px; }