/* ============================================================
   Orvium — home (Propuesta A · «Sistema»).
   Loaded only by index.html, after styles.css.

   Every rule is scoped to .pa (the new home blocks), so nothing
   here reaches the shared nav, the footer or the pricing section,
   which keep their styles.css look. Class names that already mean
   something in styles.css (.btn, .hero, .phone, .bub, .plan, …)
   carry a pa- prefix here.

   Tokens: light is the default and takes its values from the
   site's own tokens (styles.css :root); dark follows the
   prototype. WhatsApp mockups stay dark in both modes.
   ============================================================ */

.pa {
  --bg: #faf8fc;
  --bg2: #f4eefb;
  --panel: #ffffff;
  --panel2: #fbf8ff;
  --b1: rgba(76,29,149,.14);
  --b2: rgba(76,29,149,.24);
  --t1: #14101c;
  --t2: #374151;
  --t3: #4b5563;
  --v: #9333ea;
  --vl: #7c3aed;
  --gold: #9a7424;
  --gold-l: #7a5c17;
  --green: #166534;
  --amber: #92600e;
  --red: #b91c1c;
  --grid: rgba(20,16,28,.05);
  --halo-v: rgba(147,51,234,.13);
  --halo-g: rgba(184,144,58,.06);
  --overlay: rgba(255,255,255,.72);
  --card: 0 2px 10px -3px rgba(76,29,149,.14);
  --tint: 16%;
  --r: 16px;
  --r-lg: 20px;
  --wrap: 1240px;
  --c: var(--vl);
  --mono: var(--font-mono);
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-body);
  line-height: 1.55;
}
[data-theme="dark"] .pa {
  --bg: #0b0913;
  --bg2: #110d1c;
  --panel: #18122a;
  --panel2: #1e1734;
  --b1: #2b2342;
  --b2: #3a2f57;
  --t1: #ffffff;
  --t2: #d2cbe3;
  --t3: #9d95b8;
  --vl: #b06cf5;
  --gold: #b8903a;
  --gold-l: #d9b466;
  --green: #4ade9a;
  --amber: #e9b85a;
  --red: #f08a8a;
  --grid: rgba(76,60,120,.28);
  --halo-v: rgba(147,51,234,.26);
  --halo-g: rgba(184,144,58,.12);
  --overlay: rgba(11,9,19,.6);
  --card: none;
  --tint: 10%;
}

/* Agent colors, matching the product's workspace menu: Sales violet,
   Front Desk (Secretaria) green, Support blue, Customer Success gold,
   Ecommerce orange, Marketing pink; Collections red, Payments teal.
   Light values keep 3:1 on white; dark mode uses the lighter tints. */
.pa [data-ag=ventas]{--c:#7c3aed}.pa [data-ag=secretaria]{--c:#15803d}.pa [data-ag=marketing]{--c:#db2777}.pa [data-ag=cobranza]{--c:#dc2626}.pa [data-ag=soporte]{--c:#2563eb}.pa [data-ag=pagos]{--c:#0d9488}.pa [data-ag=cs]{--c:#a16207}.pa [data-ag=ecommerce]{--c:#ea580c}
[data-theme="dark"] .pa [data-ag=ventas]{--c:#b06cf5}[data-theme="dark"] .pa [data-ag=secretaria]{--c:#4ade80}[data-theme="dark"] .pa [data-ag=marketing]{--c:#f472b6}[data-theme="dark"] .pa [data-ag=cobranza]{--c:#f87171}[data-theme="dark"] .pa [data-ag=soporte]{--c:#60a5fa}[data-theme="dark"] .pa [data-ag=pagos]{--c:#2dd4bf}[data-theme="dark"] .pa [data-ag=cs]{--c:#fbbf24}[data-theme="dark"] .pa [data-ag=ecommerce]{--c:#fb923c}

/* ---------- base ---------- */
.pa h1,.pa h2,.pa h3,.pa h4,.pa h5 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; color: var(--t1); }
.pa p { text-wrap: pretty; }
.pa a { color: var(--vl); transition: color .2s; }
.pa a:hover { color: var(--t1); }
.pa :focus-visible { outline: 2px solid var(--vl); outline-offset: 3px; border-radius: 8px; }
.pa [hidden] { display: none !important; }
.pa .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.pa-sec { padding: 120px 0; position: relative; }
.pa-sec.alt { background: var(--bg2); }

.pa .pa-eyebrow { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 13.5px; font-weight: 500; letter-spacing: .01em; color: var(--vl); }
.pa .pa-eyebrow::before { content: "{\00a0"; }
.pa .pa-eyebrow::after { content: "\00a0}"; }
.pa .pa-h2 { font-size: clamp(30px, 3.6vw, 48px); margin-top: 18px; }
.pa .lede { font-size: 18px; color: var(--t2); margin-top: 18px; max-width: 660px; }
.pa .head { margin-bottom: 56px; max-width: 780px; }
.pa .head.center { text-align: center; margin-left: auto; margin-right: auto; }
.pa .head.center .lede { margin-left: auto; margin-right: auto; }
.pa .kicker { display: block; margin-bottom: 16px; line-height: 1; }
.pa .kicker::before { content: attr(data-n); display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--t3); padding-bottom: 8px; border-bottom: 1px solid var(--vl); min-width: 44px; }
.pa .sub-h { font-size: 22px; font-weight: 700; margin: 64px 0 22px; display: flex; align-items: center; gap: 12px; }
.pa .sub-h:first-child { margin-top: 0; }

/* icons injected by home.js */
.pa [data-i] svg, .pa [data-g] svg, .pa [data-c] svg { display: block; }

/* ---------- buttons ---------- */
.pa .pa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s, color .2s; white-space: nowrap; text-decoration: none; }
.pa .pa-btn span[data-i] { width: 18px; height: 18px; display: inline-grid; }
.pa .pa-btn:active { transform: scale(.97); }
.pa .pa-btn-p { background: var(--v); color: #fff; box-shadow: 0 14px 32px -14px rgba(147,51,234,.8); }
.pa .pa-btn-p:hover { background: #6b21a8; color: #fff; transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(147,51,234,.9); }
.pa .pa-btn-s { background: transparent; color: var(--t1); border-color: var(--b2); }
.pa .pa-btn-s:hover { border-color: var(--vl); color: var(--t1); background: color-mix(in srgb, var(--vl) 8%, transparent); }
.pa .pa-btn-q { background: none; border: none; color: var(--vl); padding: 0; min-height: 44px; font-weight: 600; font-size: 14px; gap: 8px; }
.pa .pa-btn-q:hover { color: var(--t1); gap: 12px; }
.pa .pa-btn-q span[data-i] { width: 16px; height: 16px; }
.pa .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* ---------- status tags ---------- */
.pa .tag { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--b2); color: var(--t2); white-space: nowrap; font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.pa .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pa .tag.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) var(--tint), transparent); }
.pa .tag.on::before { animation: pa-blip 2s infinite; }
.pa .tag.soon { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: color-mix(in srgb, var(--amber) var(--tint), transparent); }
.pa .tag.mod { color: var(--gold-l); border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) var(--tint), transparent); }
.pa .tag.neutral { color: var(--t2); background: var(--bg2); }
.pa .tag.neutral::before { display: none; }
@keyframes pa-blip { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.pa .tbd { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px dashed var(--amber); border-radius: 8px; color: var(--amber); font-family: var(--mono); font-size: .72em; font-weight: 500; letter-spacing: 0; white-space: nowrap; background: color-mix(in srgb, var(--amber) 6%, transparent); vertical-align: middle; line-height: 1.5; }

/* ---------- glyphs + channel chips ---------- */
.pa .gly { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--c) 15%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); }
.pa .gly svg { width: 20px; height: 20px; }
.pa .gly.sm { width: 28px; height: 28px; border-radius: 8px; }
.pa .gly.sm svg { width: 14px; height: 14px; }
.pa .gly.lg { width: 54px; height: 54px; border-radius: 16px; }
.pa .gly.lg svg { width: 26px; height: 26px; }
.pa .glys { display: flex; margin-top: 10px; }
.pa .glys .gly { margin-left: -6px; box-shadow: 0 0 0 3px var(--panel); }
.pa .glys .gly:first-child { margin-left: 0; }
.pa .ch { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.pa .ch svg { width: 21px; height: 21px; }
.pa .ch.wa { background: #1faf5b; }
.pa .ch.ig { background: linear-gradient(45deg, #e0a020, #d62a74 50%, #6a2bd0); }
.pa .ch.fb { background: #1877f2; }
.pa .ch.web { background: var(--v); }
.pa .ch.out { background: var(--panel2); border: 1px solid var(--b2); color: var(--t2); }
.pa .file-av { width: 44px; height: 44px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--b2); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex-shrink: 0; color: var(--t1); }

/* ---------- WhatsApp mockup: light WhatsApp in light mode, dark in dark ---------- */
.pa {
  --wa-frame: #ffffff; --wa-frame-b: rgba(76,29,149,.18); --wa-scr: #efeae2; --wa-top: #f0f2f5;
  --wa-in: #ffffff; --wa-out: #d9fdd3; --wa-text: #111b21; --wa-strong: #111b21; --wa-time: #667781;
  --wa-sub: #667781; --wa-day: #ffffff; --wa-from: #7c3aed; --wa-link: #027eb5; --wa-btn-h: #f5f6f6;
  --wa-shadow: 0 50px 100px -40px rgba(76,29,149,.35), 0 0 0 1px rgba(76,29,149,.06);
  --wa-bub-shadow: 0 1px .5px rgba(11,20,26,.13); --wa-event: #8a5a00; --wa-event-bg: #fff5d6;
}
[data-theme="dark"] .pa {
  --wa-frame: #05070e; --wa-frame-b: #3a2f57; --wa-scr: #0b141a; --wa-top: #1f2c34;
  --wa-in: #202c33; --wa-out: #005c4b; --wa-text: #e9edef; --wa-strong: #ffffff; --wa-time: rgba(233,237,239,.6);
  --wa-sub: #8fa0aa; --wa-day: #182229; --wa-from: #c9a0ff; --wa-link: #53bdeb; --wa-btn-h: #2a3942;
  --wa-shadow: 0 50px 100px -40px rgba(0,0,0,.85), 0 0 100px -30px rgba(147,51,234,.55);
  --wa-bub-shadow: none; --wa-event: #e9b85a; --wa-event-bg: rgba(233,184,90,.1);
}
.pa .pa-phone { width: 330px; max-width: 100%; border-radius: 46px; background: var(--wa-frame); padding: 11px; border: 1px solid var(--wa-frame-b); box-shadow: var(--wa-shadow); flex-shrink: 0; }
.pa .phone-scr { border-radius: 36px; overflow: hidden; background: var(--wa-scr); min-height: 620px; display: flex; flex-direction: column; }
.pa .wa-top { background: var(--wa-top); padding: 24px 16px 12px; display: flex; align-items: center; gap: 11px; }
/* the favicon is a full dark square: fill the circle with it so the avatar reads as a round logo */
.pa .wa-top .wa-av { width: 36px; height: 36px; border-radius: 50%; background: #111827; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.pa .wa-top .wa-av img { width: 100%; height: 100%; display: block; }
.pa .wa-top b { font-size: 14.5px; font-weight: 600; display: block; color: var(--wa-text); }
.pa .wa-top span { font-size: 11.5px; color: var(--wa-sub); }
.pa .pa-wa-body { flex: 1; padding: 16px 12px 18px; display: flex; flex-direction: column; gap: 8px; }
.pa .wa-day { align-self: center; font-size: 11px; color: var(--wa-sub); background: var(--wa-day); padding: 4px 10px; border-radius: 7px; margin-bottom: 4px; box-shadow: var(--wa-bub-shadow); }
.pa .pa-bub { max-width: 88%; padding: 8px 11px 6px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; color: var(--wa-text); box-shadow: var(--wa-bub-shadow); }
.pa .pa-bub.in { background: var(--wa-in); align-self: flex-start; border-top-left-radius: 3px; }
.pa .pa-bub.out { background: var(--wa-out); align-self: flex-end; border-top-right-radius: 3px; }
.pa .pa-bub time { display: block; text-align: right; font-size: 10.5px; color: var(--wa-time); margin-top: 2px; }
.pa .pa-bub b { font-weight: 700; color: var(--wa-strong); }
.pa .pa-bub .from { display: block; font-size: 11px; font-weight: 700; color: var(--wa-from); margin-bottom: 2px; }
.pa .pa-bub.pay { padding: 0; overflow: hidden; background: var(--wa-in); width: 80%; align-self: flex-start; }
.pa .pa-pay-top { background: linear-gradient(135deg, var(--v), #6a22b8); padding: 12px 14px; color: #fff; }
.pa .pa-pay-top small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.pa .pa-pay-top b { font-size: 19px; font-weight: 800; color: #fff; }
.pa .pa-pay-btn { padding: 10px; text-align: center; font-weight: 700; font-size: 13px; color: var(--wa-from); }
.pa .sc-event { align-self: center; font-size: 11.5px; color: var(--wa-event); background: var(--wa-event-bg); border: 1px dashed color-mix(in srgb, var(--wa-event) 45%, transparent); padding: 4px 10px; border-radius: 8px; }
.pa .typing { align-self: flex-start; background: var(--wa-in); box-shadow: var(--wa-bub-shadow); border-radius: 12px; border-top-left-radius: 3px; padding: 11px 13px; display: inline-flex; gap: 4px; }
.pa .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--wa-sub); animation: pa-tblink 1.2s infinite; }
.pa .typing i:nth-child(2) { animation-delay: .2s; }
.pa .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes pa-tblink { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.pa .wa-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 88%; }
.pa .wa-actions button, .pa .wa-chips button { min-height: 44px; background: var(--wa-in); box-shadow: var(--wa-bub-shadow); border: none; border-radius: 10px; color: var(--wa-link); font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .2s; }
.pa .wa-actions button:hover, .pa .wa-chips button:hover { background: var(--wa-btn-h); }
.pa .wa-actions button[disabled] { opacity: .45; cursor: default; }
.pa .wa-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 88%; }
.pa .wa-chips button.on { background: var(--wa-out); color: var(--wa-text); }
.pa .pop { animation: pa-pop .35s cubic-bezier(.2,.8,.3,1.2); }
@keyframes pa-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- 01 · hero ---------- */
.pa-hero { position: relative; padding: 150px 0 88px; overflow: hidden; }
.pa-hero::before { content: ""; position: absolute; inset: -240px -10% auto; height: 1100px; pointer-events: none; background: radial-gradient(640px 460px at 18% 24%, var(--halo-v), transparent 70%), radial-gradient(520px 400px at 86% 34%, var(--halo-g), transparent 70%); }
.pa .pa-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 48px; align-items: center; }
.pa .hero-copy { position: relative; z-index: 2; }
.pa-hero h1 { font-size: clamp(36px, 4.3vw, 60px); margin-top: 22px; letter-spacing: -.03em; }
.pa-hero h1 em { font-style: normal; color: var(--vl); }
.pa-hero .lede { font-size: 19px; max-width: 580px; }
.pa .hero-fine { font-size: 14.5px; color: var(--t3); margin-top: 14px; max-width: 560px; line-height: 1.55; }
.pa .pa-hero-stage { display: flex; gap: 22px; align-items: center; justify-content: flex-end; }
.pa .hero-phone { position: relative; flex-shrink: 0; }
.pa .hero-phone .pa-phone { width: 280px; }
.pa .hero-phone .phone-scr { height: 600px; min-height: 0; }
.pa .hero-phone .pa-wa-body { justify-content: flex-end; overflow: hidden; gap: 7px; -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
.pa .hero-phone .pa-bub { font-size: 12.5px; }
.pa .hero-phone [data-msg]:not(.on) { display: none; }
.pa .float-ch { position: absolute; z-index: 3; width: 44px; height: 44px; border-radius: 13px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.6); animation: pa-fl 5.5s ease-in-out infinite; }
.pa .float-ch svg { width: 22px; height: 22px; }
.pa .pa-fc1 { top: 70px; left: -20px; }
.pa .pa-fc2 { top: 300px; right: -18px; animation-delay: -2s; }
.pa .pa-fc3 { bottom: 90px; left: -22px; animation-delay: -3.6s; }
@keyframes pa-fl { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }

.pa .journey { position: relative; z-index: 2; flex: 1; min-width: 0; border: 1px solid var(--b1); border-radius: 20px; padding: 18px 18px 16px; background: linear-gradient(var(--grid) 1px, transparent 1px) -1px -1px/28px 28px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) -1px -1px/28px 28px, var(--panel); }
.pa .j-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
.pa .j-id { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--t3); white-space: nowrap; }
.pa .j-list { list-style: none; margin: 0; padding: 0; position: relative; }
.pa .j-list::before, .pa .j-list::after { content: ""; position: absolute; left: 14px; top: 20px; width: 1px; }
.pa .j-list::before { bottom: 20px; background: var(--b2); }
.pa .j-list::after { height: var(--prog, 0%); max-height: calc(100% - 40px); background: var(--vl); transition: height .6s; }
.pa .j-list li { position: relative; z-index: 1; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 8px 0; opacity: .28; transition: opacity .5s; }
.pa .j-list li.on { opacity: 1; }
.pa .j-node .gly { width: 29px; height: 29px; border-radius: 8px; background: var(--bg); }
.pa .j-node .gly svg { width: 14px; height: 14px; }
.pa .j-t { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--t3); }
.pa .j-body b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 3px; line-height: 1.35; }
.pa .j-data { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--t2); }
.pa .j-data::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.pa .j-foot { margin-top: 16px; display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; color: var(--gold-l); opacity: .3; transition: opacity .6s; }
.pa .journey.done .j-foot { opacity: 1; }
.pa .j-foot span[data-i] { width: 18px; height: 18px; display: inline-grid; flex-shrink: 0; }

.pa .proofs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--b1); }
.pa .proof { display: flex; gap: 12px; align-items: center; font-size: 14.5px; font-weight: 600; color: var(--t2); line-height: 1.4; }
.pa .pi { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--v) 14%, transparent); border: 1px solid color-mix(in srgb, var(--vl) 30%, transparent); color: var(--vl); flex-shrink: 0; }
.pa .pi svg { width: 18px; height: 18px; }

/* ---------- bridges ---------- */
.pa .bridge { display: flex; justify-content: center; margin-top: 64px; }
.pa .bridge a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 22px; border-radius: 999px; border: 1px dashed var(--b2); color: var(--t2); font-weight: 600; font-size: 15.5px; text-align: center; line-height: 1.4; }
.pa .bridge a:hover { color: var(--t1); border-color: var(--vl); }
.pa .bridge a span[data-i] { width: 18px; height: 18px; display: inline-grid; transform: rotate(90deg); color: var(--vl); flex-shrink: 0; }

/* ---------- 02 · problema ---------- */
.pa .pains { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.pa .pain { display: flex; gap: 18px; align-items: flex-start; background: var(--panel); border: 1px solid var(--b1); border-radius: 16px; padding: 24px 26px; transition: border-color .3s, transform .3s; }
.pa .pain:hover { border-color: color-mix(in srgb, var(--red) 45%, transparent); transform: translateY(-3px); }
.pa .pain-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--red) 10%, transparent); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.pa .pain-ic svg { width: 21px; height: 21px; }
.pa .pain h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.pa .pain p { font-size: 15px; color: var(--t2); margin-top: 6px; }
.pa #problema .sub-h { margin-top: 72px; font-size: clamp(20px, 2vw, 26px); font-weight: 800; max-width: 760px; line-height: 1.25; }
.pa .frags { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.pa .frag { background: var(--panel); border: 1px solid var(--b1); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.pa .frag-top { display: flex; align-items: center; gap: 12px; }
.pa .frag-top b { font-size: 16px; }
.pa .frag-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bg2); border: 1px solid var(--b2); color: var(--t2); }
.pa .frag-ic svg { width: 20px; height: 20px; }
.pa .frag p { font-size: 19px; font-weight: 600; color: var(--t1); line-height: 1.4; }
.pa .frag-piece { margin-top: auto; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; padding-top: 6px; }
.pa .frag-piece span { display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: 10px; color: var(--t3); text-align: center; line-height: 1.2; }
.pa .frag-piece span::before { content: ""; height: 8px; border-radius: 4px; border: 1px dashed var(--b2); }
.pa .frag-piece span.on { color: var(--t1); }
.pa .frag-piece span.on::before { background: var(--vl); border: 1px solid var(--vl); }
.pa .frag-piece span.loose::before { border: 1px dashed var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
.pa .loose-1 { --r: -6deg; --y: 3px; } .pa .loose-2 { --r: 4deg; } .pa .loose-3 { --r: -3deg; --y: -2px; } .pa .loose-4 { --r: 7deg; --y: 2px; } .pa .loose-5 { --r: -5deg; }

/* ---------- 03 · ficha compartida ---------- */
.pa .exp { background: var(--panel); border: 1px solid var(--b1); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--vl) 14%, transparent), 0 60px 120px -60px color-mix(in srgb, var(--v) 60%, transparent); }
.pa .exp-bar { display: flex; align-items: center; gap: 14px; padding: 20px 26px; border-bottom: 1px solid var(--b1); flex-wrap: wrap; background: var(--panel2); }
.pa .exp-bar b { display: block; font-size: 17px; }
.pa .exp-bar .s { font-size: 13px; color: var(--t3); }
.pa .exp-tags { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pa .exp-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); }
.pa .exp-tl { list-style: none; margin: 0; padding: 8px 26px 18px; position: relative; }
.pa .exp-tl li { position: relative; display: grid; grid-template-columns: 100px minmax(0,1fr) auto; gap: 18px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--b1); opacity: .3; transition: opacity .5s; }
.pa .exp-tl li:last-child { border-bottom: 0; }
.pa .exp-tl li.on { opacity: 1; }
.pa .exp-tl li::before { content: ""; position: absolute; left: -26px; top: 22px; width: 3px; height: 12px; border-radius: 2px; background: var(--b2); transition: background .5s; }
.pa .exp-tl li.on::before { background: var(--vl); }
.pa .exp-tl time { font-family: var(--mono); font-size: 12.5px; color: var(--t3); padding-top: 2px; }
.pa .et-body b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.pa .et-data { display: inline-block; margin-top: 7px; font-family: var(--mono); font-size: 12.5px; color: var(--t2); background: var(--bg2); border: 1px solid var(--b1); border-radius: 8px; padding: 4px 9px; }
.pa .et-hand { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--vl); }
.pa .et-hand span[data-i] { width: 14px; height: 14px; display: inline-grid; flex-shrink: 0; }
.pa .et-by { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--c); white-space: nowrap; }
.pa .et-by .tag { height: 22px; font-size: 11px; padding: 0 8px; }
.pa .exp-sum { border-left: 1px solid var(--b1); padding: 22px 26px; display: flex; flex-direction: column; background: var(--bg2); }
.pa .es-cap { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; }
.pa .es-row { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--b1); }
.pa .es-row span.l { display: block; font-size: 12px; color: var(--t3); }
.pa .es-row b { display: block; font-size: 14.5px; font-weight: 600; }
.pa .es-next { margin-top: 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.pa .es-next small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); }
.pa .es-next p { font-size: 14.5px; font-weight: 600; margin-top: 4px; }
.pa .statement { margin: 72px auto 0; max-width: 1040px; text-align: center; font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.22; letter-spacing: -.02em; text-wrap: balance; }
.pa .statement span { color: var(--t3); }
.pa .statement em { font-style: normal; background: linear-gradient(100deg, var(--vl), var(--gold-l)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 04 / 09 · pasos ---------- */
.pa .start { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.pa .sstep { background: var(--panel); border: 1px solid var(--b1); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.pa .sstep::after { content: ""; position: absolute; right: -15px; top: 34px; width: 16px; height: 1px; background: var(--vl); }
.pa .sstep:last-child::after { display: none; }
.pa .sstep .d { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--vl); }
.pa .sstep b { font-size: 17px; }
.pa .sstep p { font-size: 14px; color: var(--t2); }
.pa .sstep.last { border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--gold) 12%, transparent), var(--panel) 60%); }
.pa .sstep.last .d { color: var(--gold-l); }
.pa .sr-note { margin-top: 12px; font-size: 14px; color: var(--t3); }

/* ---------- 05 · Agentes IA ---------- */
.pa .ag-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; margin: -24px 0 44px; font-size: 13.5px; color: var(--t2); }
.pa .ag-legend > span { display: inline-flex; gap: 8px; align-items: center; }
.pa .team { position: relative; }
.pa .team-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 52px 44px; position: relative; z-index: 1; }
.pa .team-cards { display: contents; }
.pa .team.iso .agent:not(.lit) { opacity: .38; }
.pa .agent { background: var(--panel); border: 1px solid var(--b1); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; transition: border-color .3s, transform .3s, box-shadow .3s, opacity .3s; }
.pa .agent:hover, .pa .agent.lit { border-color: color-mix(in srgb, var(--c) 65%, transparent); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--c) 80%, transparent); }
.pa .agent:hover { transform: translateY(-3px); }
.pa .agent-top { display: flex; align-items: center; gap: 14px; }
.pa .agent h3 { font-size: 19px; }
.pa .agent .agent-role { font-size: 14px; color: var(--t2); margin-top: 2px; line-height: 1.4; }
.pa .agent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pa .agent li { font-size: 14px; color: var(--t2); display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.pa .agent li::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--c); margin-top: 7px; flex-shrink: 0; transform: rotate(45deg); }
.pa .agent-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.pa .agent-feed { margin-top: auto; background: color-mix(in srgb, var(--c) 9%, var(--bg2)); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); border-radius: 14px; padding: 12px 14px; }
.pa .agent-feed small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.pa .agent-feed p { font-size: 14px; color: var(--t1); font-weight: 600; margin-top: 4px; line-height: 1.4; }
.pa .core { grid-column: 2; grid-row: 2; align-self: stretch; position: relative; z-index: 1; border-radius: var(--r-lg); padding: 30px 28px; display: flex; flex-direction: column; justify-content: center; gap: 14px; text-align: center; background: linear-gradient(var(--grid) 1px, transparent 1px) -1px -1px/24px 24px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) -1px -1px/24px 24px, var(--panel2); border: 1px solid color-mix(in srgb, var(--vl) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--vl) 18%, transparent); }
.pa .core-logo { width: 40px; height: 40px; margin: 4px auto 6px; }
.pa .core h3 { font-size: 24px; }
.pa .core > p { font-size: 14.5px; color: var(--t2); }
.pa .core-live { margin-top: 6px; text-align: left; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: center; background: var(--overlay); border: 1px solid var(--b2); border-radius: 16px; padding: 14px; min-height: 92px; }
.pa .core-live small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.pa .core-live b { display: block; font-size: 14.5px; line-height: 1.4; margin-top: 3px; }
.pa .core-live.flash { animation: pa-pop .4s; }
.pa .team-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.pa .team-lines path { fill: none; stroke: var(--b2); stroke-width: 1; transition: stroke .35s, stroke-width .35s, opacity .35s; }
.pa .team-lines circle { fill: var(--b2); transition: fill .35s; }
.pa .team-lines g.lit path { stroke: var(--c, var(--vl)); stroke-width: 2; }
.pa .team-lines g.lit circle { fill: var(--c, var(--vl)); }
.pa .team.iso .team-lines g:not(.lit) { opacity: .25; }
.pa .car-dots { display: none; justify-content: center; gap: 6px; margin-top: 4px; }
.pa .car-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--b2); transition: all .3s; }
.pa .car-dots i.on { width: 20px; border-radius: 4px; background: var(--vl); }

/* ---------- 06 · decisión y control ---------- */
.pa .board { background: var(--panel); border: 1px solid var(--b1); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--vl) 10%, transparent), 0 50px 100px -60px color-mix(in srgb, var(--v) 50%, transparent); }
.pa .board-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 26px; border-bottom: 1px solid var(--b1); background: var(--panel2); }
.pa .board-top b { display: block; font-size: 16px; }
.pa .board-top small { font-size: 12.5px; color: var(--t3); }
.pa .board-table { overflow-x: auto; }
.pa .br { display: grid; grid-template-columns: minmax(170px,1.6fr) repeat(4, minmax(90px,1fr)); gap: 12px; padding: 14px 26px; border-bottom: 1px solid var(--b1); font-size: 14.5px; align-items: center; font-variant-numeric: tabular-nums; min-width: 640px; }
.pa .br > span:not(:first-child) { text-align: right; font-family: var(--mono); font-size: 13.5px; }
.pa .br > span:first-child { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pa .bh { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.pa .bh > span:not(:first-child) { font-family: var(--font-body); font-size: 11px; }
.pa .br.best { background: color-mix(in srgb, var(--v) 10%, transparent); }
.pa .br.best b { color: var(--green); }
.pa .br.weak > span:last-child { color: var(--red); }
.pa .board-alert { display: flex; gap: 12px; align-items: flex-start; padding: 16px 26px; font-size: 14.5px; color: var(--t2); }
.pa .board-alert > span { width: 20px; height: 20px; display: inline-grid; color: var(--amber); flex-shrink: 0; margin-top: 1px; }
.pa .board-alert b { color: var(--t1); }

.pa .pa-plan { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 56px; align-items: center; }
.pa .panel { background: var(--panel); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 30px; }
.pa .panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--b1); }
.pa .panel-top b { font-size: 16px; display: block; }
.pa .panel-top small { display: block; color: var(--t3); font-size: 12.5px; }
.pa .occ { padding: 24px 0 22px; }
.pa .occ-l { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pa .occ-l > span:first-child { color: var(--t2); font-size: 14px; }
.pa .occ-n { font-family: var(--font-display); font-size: 68px; font-weight: 800; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; }
.pa .occ-n small { font-size: .45em; color: var(--t3); font-weight: 600; letter-spacing: 0; }
.pa .bar { height: 14px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--b1); margin-top: 16px; overflow: hidden; display: flex; }
.pa .bar i { display: block; height: 100%; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.pa .bar .b1 { background: var(--vl); width: 40%; }
.pa .bar .b2 { background: repeating-linear-gradient(45deg, var(--gold-l) 0 6px, var(--gold) 6px 12px); width: 0; }
.pa .legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--t3); }
.pa .legend span { display: inline-flex; align-items: center; gap: 7px; }
.pa .legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--vl); }
.pa .legend span.g::before { background: var(--gold-l); }
.pa .kv { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.pa .kv > div { background: var(--bg2); border: 1px solid var(--b1); border-radius: 14px; padding: 14px 16px; }
.pa .kv small { display: block; font-size: 12px; color: var(--t3); }
.pa .kv b { display: block; font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pa .kv b s { color: var(--t3); font-weight: 500; font-size: 15px; margin-right: 8px; }
.pa .why { margin-top: 14px; background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 14px; padding: 14px 16px; font-size: 13.5px; color: var(--t2); line-height: 1.5; }
.pa .why b { color: var(--gold-l); font-weight: 600; }
.pa .panel-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--t3); }

.pa .pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
.pa .pair-h { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-bottom: 12px; }
.pa .ladder { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pa .rung { background: var(--panel); border: 1px solid var(--b1); border-radius: 18px; padding: 16px 18px; display: grid; grid-template-columns: minmax(0,1fr) 90px; gap: 4px 16px; align-items: center; transition: border-color .3s; }
.pa .rung:hover { border-color: var(--vl); }
.pa .rung:last-child { background: linear-gradient(170deg, color-mix(in srgb, var(--v) 22%, transparent), var(--panel) 70%); border-color: color-mix(in srgb, var(--vl) 50%, transparent); }
.pa .rung .n { grid-column: 1; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--vl); }
.pa .rung b, .pa .rung p { grid-column: 1; }
.pa .rung b { font-size: 17px; }
.pa .rung p { font-size: 13.5px; color: var(--t2); }
.pa .rung .lvl { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 4px; }
.pa .rung .lvl i { flex: 1; height: 5px; border-radius: 3px; background: var(--b2); }
.pa .rung .lvl i.full { background: var(--vl); }
.pa .ctrl-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.pa .ctrl-item { background: var(--panel); border: 1px solid var(--b1); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.pa .ctrl-item i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); }
.pa .ctrl-item i svg { width: 18px; height: 18px; }
.pa .ctrl-item b { font-size: 16px; }
.pa .ctrl-item p { font-size: 14px; color: var(--t2); }
.pa .lock { margin-top: 16px; display: flex; gap: 12px; align-items: center; justify-content: center; text-align: center; font-weight: 600; font-size: 15.5px; padding: 18px; border-radius: 16px; background: var(--bg2); border: 1px dashed var(--b2); }
.pa .lock i { color: var(--gold-l); display: grid; }
.pa .lock i svg { width: 20px; height: 20px; }

/* ---------- 07 · casos ---------- */
.pa .cases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.pa .case { background: var(--panel); border: 1px solid var(--b1); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.pa .case-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pa .case-top b { font-size: 18px; white-space: nowrap; }
.pa .case .flag { font-size: 12px; color: var(--t3); font-weight: 600; text-align: right; }
.pa .case .stars { font-family: var(--mono); color: var(--gold-l); letter-spacing: 2px; font-size: 13px; }
.pa .case blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--t1); }
.pa .case .case-who { display: flex; gap: 12px; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--b1); }
.pa .case .case-who b { display: block; font-size: 14.5px; }
.pa .case .case-who span { font-size: 12.5px; color: var(--t3); }
.pa .case h5 { margin: 0; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.pa .case p { font-size: 14.5px; color: var(--t2); margin-top: 5px; }
.pa .case .fig { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--b1); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--t3); }
.pa .case.pending { border-style: dashed; background: transparent; }
.pa .sr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 48px 0 14px; }
.pa .sr-head b { font-size: 20px; }
.pa .score { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid var(--b1); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); }
.pa .score-col { padding: 30px; border-right: 1px solid var(--b1); display: flex; flex-direction: column; gap: 10px; }
.pa .score-col:last-child { border-right: 0; }
.pa .score-col small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.pa .score-col .score-big { font-size: 22px; font-weight: 800; min-height: 56px; display: flex; align-items: center; }
.pa .score-col .score-big .tbd { font-size: 15px; }
.pa .score-col p { font-size: 14px; color: var(--t2); }
.pa .score-col .flow { height: 6px; border-radius: 999px; border: 1px dashed var(--b2); }

/* ---------- 08 · encaja en tu operación ---------- */
.pa .brandmap { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 24px; align-items: stretch; }
.pa .hier { background: var(--panel); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 34px 28px; display: flex; flex-direction: column; align-items: center; }
.pa .h-cap { align-self: flex-start; font-size: 12px; color: var(--t3); margin-bottom: 22px; display: flex; gap: 10px; align-items: center; }
.pa .h-node { background: var(--bg2); border: 1px solid var(--b2); border-radius: 14px; padding: 12px 20px; text-align: center; }
.pa .h-node small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.pa .h-node b { font-size: 15px; font-weight: 700; }
.pa .h-org { border-color: var(--vl); background: linear-gradient(160deg, color-mix(in srgb, var(--v) 25%, transparent), var(--bg2)); }
.pa .stem { width: 2px; height: 22px; background: var(--b2); }
.pa .h-level { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; position: relative; padding-top: 24px; }
.pa .h-level::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 24px; border: 2px solid var(--b2); border-bottom: 0; border-radius: 12px 12px 0 0; }
.pa .h-col { display: flex; flex-direction: column; align-items: center; }
.pa .h-branches { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding-top: 20px; position: relative; }
.pa .h-branches::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 20px; background: var(--b2); }
.pa .h-br { font-size: 12.5px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--b1); color: var(--t2); background: var(--panel2); display: inline-flex; align-items: center; gap: 6px; }
.pa .h-br.hit { border-color: color-mix(in srgb, var(--green) 50%, transparent); color: var(--green); }
.pa .h-br.hit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pa .contact { background: var(--panel); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.pa .contact-head { display: flex; gap: 14px; align-items: center; }
.pa .contact-head b { display: block; font-size: 17px; }
.pa .contact-head span { font-size: 13px; color: var(--t3); }
.pa .touch { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--b1); }
.pa .touch b { display: block; font-size: 14px; font-weight: 600; }
.pa .touch span { font-size: 12.5px; color: var(--t3); }
.pa .unify { margin-top: auto; display: flex; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--green); background: color-mix(in srgb, var(--green) 7%, transparent); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius: 12px; padding: 12px 14px; }
.pa .unify span[data-i] { width: 18px; height: 18px; display: inline-grid; }
.pa .people { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; margin-top: 24px; }
.pa .pcard { background: var(--panel); border: 1px solid var(--b1); border-radius: var(--r-lg); padding: 28px; }
.pa .pcard h4 { font-size: 17px; margin-bottom: 10px; }
.pa .role-row { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--b1); }
.pa .role-row b { display: block; font-size: 15px; }
.pa .role-row span { font-size: 13.5px; color: var(--t2); }
.pa .hand { display: grid; gap: 14px; margin-top: 10px; }
.pa .hand-step { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 12px; align-items: start; font-size: 14.5px; color: var(--t2); }
.pa .hand-step .n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--b2); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--vl); }
.pa .hand-step b { color: var(--t1); font-weight: 600; }
.pa .hand .tag { margin-left: 44px; align-self: start; justify-self: start; }
.pa .chan-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr); gap: 18px; }
.pa .chan-col { background: var(--panel); border: 1px solid var(--b1); border-radius: var(--r); padding: 26px; }
.pa .chan-col h4 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-bottom: 16px; }
.pa .chan-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-weight: 600; font-size: 15px; }
.pa .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pa .chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--b2); background: var(--bg2); font-size: 14px; font-weight: 600; color: var(--t2); }
.pa .voice { margin-top: 18px; display: flex; gap: 16px; align-items: center; border: 1px solid var(--b2); border-radius: 18px; padding: 18px 22px; background: var(--bg2); }
.pa .voice i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--amber) 10%, transparent); color: var(--amber); flex-shrink: 0; }
.pa .voice i svg { width: 20px; height: 20px; }
.pa .voice b { display: block; font-size: 15.5px; }
.pa .voice p { font-size: 14px; color: var(--t2); }

/* ---------- 11 · FAQ ---------- */
.pa .faq { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.pa .faq details { background: var(--panel); border: 1px solid var(--b1); border-radius: 18px; transition: border-color .2s; }
.pa .faq details[open] { border-color: var(--b2); }
.pa .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 24px; font-weight: 600; font-size: 17px; min-height: 64px; border-radius: 18px; }
.pa .faq summary::-webkit-details-marker { display: none; }
.pa .faq summary .q { display: flex; flex-direction: column; gap: 8px; }
.pa .faq summary .q .tag { align-self: flex-start; }
.pa .faq summary i { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--b2); display: grid; place-items: center; flex-shrink: 0; transition: transform .3s, background .3s, border-color .3s, color .3s; }
.pa .faq summary i svg { width: 15px; height: 15px; }
.pa .faq details[open] summary i { transform: rotate(45deg); background: var(--v); border-color: var(--v); color: #fff; }
.pa .faq .a { padding: 0 24px 22px; color: var(--t2); font-size: 15.5px; max-width: 740px; }

/* ---------- 12 · cierre ---------- */
.pa .close { position: relative; border-radius: 36px; border: 1px solid var(--b2); background: radial-gradient(700px 380px at 12% 0%, color-mix(in srgb, var(--v) 34%, transparent), transparent 70%), radial-gradient(560px 320px at 96% 100%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%), var(--panel); padding: 80px 56px; display: grid; justify-items: center; text-align: center; overflow: hidden; }
.pa .close .pa-h2 { font-size: clamp(28px, 3.2vw, 44px); }
.pa .close .lede { max-width: 640px; margin-left: auto; margin-right: auto; }
.pa .close .cta-row { justify-content: center; }

/* ---------- reveal ---------- */
.pa .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.pa .rv.in { opacity: 1; transform: none; }
.no-js .pa .rv, .pa-rm .pa .rv { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pa *, .pa *::before, .pa *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .pa .rv { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pa .pa-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .pa .pa-hero-stage { justify-content: center; }
  .pa .pa-hero-stage .journey { max-width: 300px; }
  .pa .exp-grid { grid-template-columns: 1fr; }
  .pa .exp-sum { border-left: 0; border-top: 1px solid var(--b1); }
  .pa .start { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pa .sstep::after { display: none; }
  .pa .team-grid { gap: 40px 28px; }
  .pa .chan-grid { grid-template-columns: 1fr 1fr; }
  .pa .chan-grid .chan-col:last-child { grid-column: span 2; }
  .pa .pa-plan { grid-template-columns: 1fr; justify-items: center; }
  .pa .pa-plan .panel { width: 100%; }
}
@media (max-width: 820px) {
  .pa .wrap { padding-left: 22px; padding-right: 22px; }
  .pa-sec { padding: 84px 0; }
  .pa-hero { padding: 116px 0 64px; }
  .pa-hero .lede { font-size: 17px; }
  .pa .head { margin-bottom: 40px; }
  .pa .lede { font-size: 16.5px; }
  .pa .proofs { grid-template-columns: 1fr; gap: 14px; margin-top: 44px; }
  .pa .pains, .pa .frags, .pa .people, .pa .pair, .pa .cases, .pa .brandmap { grid-template-columns: 1fr; }
  .pa .pain { padding: 20px; }
  .pa .team-grid { display: block; }
  .pa .team-lines { display: none; }
  .pa .core { position: sticky; top: 70px; z-index: 5; padding: 14px; gap: 8px; margin-bottom: 16px; text-align: left; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
  .pa .core-logo, .pa .core > p { display: none; }
  .pa .core h3 { font-size: 16px; }
  .pa .core-live { min-height: 0; padding: 10px; margin-top: 0; }
  .pa .team-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 22px 14px; margin: 0 -22px; scrollbar-width: none; }
  .pa .team-cards::-webkit-scrollbar { display: none; }
  .pa .team-cards .agent { flex: 0 0 86%; scroll-snap-align: center; }
  .pa .team.iso .agent:not(.lit) { opacity: 1; }
  .pa .car-dots { display: flex; }
  .pa .ag-legend { margin: -12px 0 28px; justify-content: flex-start; }
  .pa .exp-bar, .pa .exp-tl, .pa .exp-sum { padding-left: 18px; padding-right: 18px; }
  .pa .exp-tl li { grid-template-columns: 1fr; gap: 6px; }
  .pa .exp-tl li::before { left: -18px; }
  .pa .et-by { justify-self: start; }
  .pa .statement { margin-top: 48px; }
  .pa .br { padding: 12px 18px; }
  .pa .board-top, .pa .board-alert { padding-left: 18px; padding-right: 18px; }
  .pa .score { grid-template-columns: 1fr; }
  .pa .score-col { border-right: 0; border-bottom: 1px solid var(--b1); }
  .pa .score-col:last-child { border-bottom: 0; }
  .pa .chan-grid { grid-template-columns: 1fr; }
  .pa .chan-grid .chan-col:last-child { grid-column: auto; }
  .pa .bridge { margin-top: 44px; }
  .pa .close { padding: 48px 22px; border-radius: 26px; }
}
@media (max-width: 640px) {
  .pa .pa-hero-stage { flex-direction: column; align-items: center; }
  .pa .pa-hero-stage .journey { max-width: none; width: 100%; }
  .pa .float-ch { display: none; }
}
@media (max-width: 560px) {
  .pa .start, .pa .ctrl-grid { grid-template-columns: 1fr; }
  .pa .frag p { font-size: 17px; }
  .pa .cta-row .pa-btn { width: 100%; }
  .pa .occ-n { font-size: 54px; }
  .pa .faq summary { font-size: 16px; padding: 18px; }
  .pa .faq .a { padding: 0 18px 18px; }
  .pa .rung { grid-template-columns: minmax(0,1fr) 64px; }
}

/* cards: a light lift in light mode (none in dark), and the shared nav's
   demo button gets a visible hover on the home */
.pa .pain, .pa .frag, .pa .exp, .pa .sstep, .pa .agent, .pa .board, .pa .panel, .pa .rung, .pa .ctrl-item,
.pa .case, .pa .hier, .pa .contact, .pa .pcard, .pa .chan-col, .pa .faq details, .pa .journey { box-shadow: var(--card); }
.pa .agent-feed { background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
.pa .gly { background: color-mix(in srgb, var(--c) 14%, var(--panel)); }
.nav .nav-demo:hover { background: var(--violet); color: #fff; }
@media (min-width: 821px) and (max-width: 1100px) { .pa .cases { grid-template-columns: 1fr 1fr; } }

/* testimonials: brand color on the cards */
.pa .case { position: relative; overflow: hidden; background: linear-gradient(165deg, color-mix(in srgb, var(--v) 12%, var(--panel)), var(--panel) 55%); border-color: color-mix(in srgb, var(--vl) 30%, var(--b1)); }
.pa .case::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--v), #c084fc 60%, var(--gold-l)); }
.pa .case::after { content: "\201C"; position: absolute; right: 22px; top: 62px; font-family: var(--font-display); font-size: 96px; line-height: 1; font-weight: 800; color: color-mix(in srgb, var(--v) 16%, transparent); pointer-events: none; }
.pa .case .stars { font-size: 16px; letter-spacing: 3px; color: #eab308; }
.pa .case .flag { color: var(--vl); }
.pa .case .case-who .file-av { background: linear-gradient(135deg, var(--v), #6d28d9); border: none; color: #fff; }
.pa .case:nth-child(2) .case-who .file-av { background: linear-gradient(135deg, #c026d3, var(--v)); }
.pa .case:nth-child(3) .case-who .file-av { background: linear-gradient(135deg, var(--gold), #b45309); }
.pa .case-top { position: relative; z-index: 1; }

/* agent icons in the legend and in the chat attribution */
.pa .gly.xs { width: 22px; height: 22px; border-radius: 7px; }
.pa .gly.xs svg { width: 13px; height: 13px; }
.pa .ag-legend .ag-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pa .ag-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--t1); font-weight: 600; }
.pa .pa-bub .from { display: flex; align-items: center; gap: 5px; }
.pa .from-ic { width: 13px; height: 13px; display: inline-grid; flex-shrink: 0; }
.pa .from-ic svg { width: 13px; height: 13px; stroke-width: 2.2; }
.pa .from-ic { color: var(--c); }