/* ============================================================
   AI STRATEGY — pillar sections (appended to home)
   Reuses the home design system: tokens, .sec/.lt, .eyebrow,
   .h2, .lead, .btn, .grad. Only new components defined here.
   ============================================================ */

/* ---- S01 · pillar hero opener ---- */
.ais-open{position:relative;overflow:hidden;padding-top:150px;padding-bottom:96px}
.ais-open .gridbg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(17,18,23,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(17,18,23,.045) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 64% 70% at 78% 32%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 64% 70% at 78% 32%,#000,transparent 72%)}
.ais-open .wrap{position:relative;z-index:2}
.ais-open .inner{max-width:760px}
.ais-h1{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:clamp(34px,5.4vw,64px);
  line-height:1.04;letter-spacing:-.02em;color:var(--lt-ink);margin-top:6px}
.ais-osub{font-size:clamp(16px,1.9vw,19px);line-height:1.7;color:var(--lt-2);max-width:60ch;margin-top:24px}
.ais-kws{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.ais-kw{font-family:var(--mono);font-size:12px;padding:7px 13px;border-radius:100px;
  border:1px solid var(--lt-line2);color:var(--lt-2);background:var(--lt-card);transition:.25s var(--ease)}
.ais-kw:hover{border-color:var(--blue);color:var(--blue)}

/* ---- S02 · el problema (dark) ---- */
.ais-prob{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:start}
.ais-prob .lead{margin-top:22px}
.ais-pains{display:flex;flex-direction:column;gap:13px}
.ais-pain{display:flex;gap:16px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);transition:.35s var(--ease)}
.ais-pain:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--surface-2)}
.ais-pain .n{font-family:var(--mono);font-size:13px;color:var(--blue-bright);flex-shrink:0;padding-top:1px}
.ais-pain p{font-size:14.5px;color:var(--t2);line-height:1.65}
.ais-punch{margin-top:64px;text-align:center;font-size:clamp(26px,4.2vw,46px);font-weight:800;
  letter-spacing:-.035em;line-height:1.12;color:var(--t1)}
.ais-punch .dim{color:var(--t3)}

/* ---- S03 · para quién (cards) ---- */
.ais-aud{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ais-card{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--surface);
  padding:32px 30px;overflow:hidden;transition:.4s var(--ease)}
.ais-card:hover{transform:translateY(-5px);border-color:var(--line-2)}
.ais-card .wm{position:absolute;right:-6px;bottom:-26px;font-weight:800;font-size:128px;letter-spacing:-.05em;
  color:var(--blue-bright);opacity:.05;pointer-events:none;line-height:1}
.ais-card .code{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--blue-bright)}
.ais-card h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:7px 0 14px}
.ais-pill{display:inline-block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  padding:5px 11px;border-radius:100px;background:var(--blue-soft);color:var(--blue-bright);margin-bottom:16px}
.ais-card p{font-size:14px;line-height:1.72;color:var(--t2);position:relative;z-index:2}
/* light variants */
.lt .ais-card{background:var(--lt-card);border-color:var(--lt-line)}
.lt .ais-card:hover{background:var(--lt-surface);border-color:var(--lt-line2)}
.lt .ais-card .code,.lt .ais-pill{color:var(--blue)}
.lt .ais-pill{background:var(--lt-bluesoft)}
.lt .ais-card h3{color:var(--lt-ink)}
.lt .ais-card p{color:var(--lt-2)}
.lt .ais-card .wm{color:var(--blue)}

/* ---- S04 · tres formas (tiers) ---- */
.ais-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.ais-tier{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);padding:30px;transition:.4s var(--ease)}
.ais-tier:hover{transform:translateY(-5px);border-color:var(--line-2)}
.ais-tier.feat{border-color:var(--blue-bright);background:var(--surface-2);
  box-shadow:0 24px 70px -28px rgba(138,124,255,.55)}
.ais-tier .core{position:absolute;top:-11px;left:30px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:100px;background:var(--blue);color:#fff}
.ais-tier .tname{font-size:18px;font-weight:700;letter-spacing:-.01em}
.ais-tier .price{font-size:clamp(28px,3vw,36px);font-weight:800;letter-spacing:-.035em;margin:14px 0 3px;color:var(--t1)}
.ais-tier .price.custom{font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.02em;color:var(--t2)}
.ais-tier .dur{font-family:var(--mono);font-size:12.5px;color:var(--t3)}
.ais-keyd{margin:20px 0;padding:14px 16px;border-radius:11px;background:var(--bg-2);border:1px solid var(--line)}
.ais-keyd .kl{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);display:block;margin-bottom:5px}
.ais-keyd .kv{font-size:13.5px;color:var(--t1);font-weight:500;line-height:1.45}
.ais-tier .desc{font-size:13.5px;color:var(--t2);line-height:1.72;flex:1}
.ais-tier .note{font-size:12px;color:var(--t3);font-style:italic;margin-top:12px;line-height:1.55}
.ais-tier .btn{margin-top:22px;justify-content:center;width:100%}

/* ---- S05 · 5 dimensiones (interactive radar) ---- */
.ais-dims{display:grid;grid-template-columns:0.92fr 1.08fr;gap:50px;align-items:center}
.ais-radar-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
#aisRadar{width:100%;max-width:360px;display:block;overflow:visible}
#aisRadar .grid{fill:none;stroke:var(--lt-line2);stroke-width:1}
#aisRadar .spoke{stroke:var(--lt-line2);stroke-width:1}
#aisRadar .spoke.on{stroke:var(--blue);stroke-width:2}
#aisRadar .poly{fill:rgba(80,70,229,.12);stroke:var(--blue);stroke-width:2;stroke-linejoin:round;
  transform:scale(.04);transform-origin:center;transition:transform 1.1s var(--ease),opacity .8s;opacity:0}
.ais-dims.in #aisRadar .poly{transform:scale(1);opacity:1}
#aisRadar .vtx{fill:var(--lt-card);stroke:var(--blue);stroke-width:2;cursor:pointer;transition:.25s}
#aisRadar .vtx.on{fill:var(--blue);r:9}
#aisRadar .vlabel{font-family:var(--mono);font-size:12px;font-weight:600;fill:var(--lt-3);cursor:pointer;transition:.25s}
#aisRadar .vlabel.on{fill:var(--blue)}
.ais-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--lt-3)}
.ais-dim-list{display:flex;flex-direction:column;gap:9px}
.ais-dim{display:flex;gap:15px;align-items:flex-start;text-align:left;width:100%;cursor:pointer;
  padding:15px 18px;border:1px solid var(--lt-line);border-radius:13px;background:var(--lt-card);transition:.25s var(--ease)}
.ais-dim:hover{border-color:var(--lt-line2);background:var(--lt-surface)}
.ais-dim.active{border-color:var(--blue);background:#fff;box-shadow:0 8px 30px -16px rgba(80,70,229,.45)}
.ais-dim .di{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--blue);border:1px solid var(--lt-line2);transition:.25s}
.ais-dim.active .di{background:var(--blue);color:#fff;border-color:var(--blue)}
.ais-dim h4{font-size:15.5px;font-weight:700;color:var(--lt-ink);letter-spacing:-.01em}
.ais-dim p{font-size:13px;color:var(--lt-2);line-height:1.6;margin-top:6px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .35s var(--ease),opacity .3s,margin .3s}
.ais-dim.active p{max-height:120px;opacity:1;margin-top:7px}

/* ---- S06 · proceso (weeks timeline, dark) ---- */
.ais-weeks{position:relative;margin-top:8px;padding-left:36px}
.ais-weeks::before{content:"";position:absolute;left:6px;top:6px;bottom:46px;width:2px;background:var(--line)}
.ais-week{position:relative;padding-bottom:36px}
.ais-week:last-child{padding-bottom:0}
.ais-week .dot{position:absolute;left:-36px;top:2px;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--line-2);background:var(--bg);transition:.35s}
.ais-week:hover .dot{border-color:var(--blue-bright);background:var(--blue-bright);box-shadow:0 0 0 6px var(--blue-soft)}
.ais-week .wk{font-family:var(--mono);font-size:12px;color:var(--blue-bright)}
.ais-week h4{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:5px 0 9px}
.ais-week p{font-size:14px;color:var(--t2);line-height:1.72;max-width:66ch}
.ais-week.ext .dot{border-style:dashed;background:transparent}
.ais-week.ext{opacity:.82}
.ais-week.ext .wk{color:var(--t3)}

/* ---- S07 · entregables (comparison table, light) ---- */
.ais-deliv{border:1px solid var(--lt-line);border-radius:16px;overflow:hidden;background:var(--lt-card)}
.ais-drow{display:grid;grid-template-columns:1fr 168px 168px;align-items:center;
  padding:15px 24px;border-top:1px solid var(--lt-line)}
.ais-drow:first-child{border-top:0}
.ais-drow.head{background:var(--lt-surface)}
.ais-drow .d{font-size:14px;color:var(--lt-ink);font-weight:500;line-height:1.45;padding-right:16px}
.ais-drow.head .d{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--lt-3);font-weight:500}
.ais-colh{text-align:center;font-size:13.5px;font-weight:700;color:var(--lt-ink);line-height:1.25}
.ais-colh small{display:block;font-family:var(--sans);font-size:11px;font-weight:500;color:var(--lt-3);margin-top:6px;text-transform:none;letter-spacing:0;line-height:1.45;font-style:normal}
.ais-pricing{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.ais-pricing p{max-width:56ch;font-size:15px;line-height:1.62;color:var(--lt-2)}
.ais-c{display:flex;justify-content:center}
.ais-ck{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;font-size:12px;font-weight:800}
.ais-ck.no{background:transparent;color:var(--lt-3);font-weight:600}
.ais-drow .hl{background:var(--lt-bluesoft)}

/* ---- S08 · social proof (dark) ---- */
.ais-social{display:grid;grid-template-columns:1.15fr 0.85fr;gap:50px;align-items:center}
.ais-social .quote{font-size:clamp(17px,1.9vw,20px);line-height:1.65;color:var(--t1);margin-top:20px}
.ais-social .quote b{color:var(--blue-bright);font-weight:700}
.ais-metrics{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:6px 30px}
.ais-metrics .stat{display:block;padding:24px 0;border-bottom:1px solid var(--line)}
.ais-metrics .stat:last-child{border-bottom:0}
.ais-metrics .v{font-size:clamp(36px,4vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1;display:flex;align-items:baseline;gap:3px}
.ais-metrics .v .u{font-size:20px;color:var(--blue-bright);font-weight:600}
.ais-metrics .l{font-size:13px;color:var(--t3);margin-top:8px}

/* ---- S09 · final cta (light band) ---- */
.ais-final{text-align:center;position:relative;overflow:hidden}
.ais-final .glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 50% -10%,rgba(80,70,229,.10),transparent 62%)}
.ais-final .wrap{position:relative;z-index:2}
.ais-final h2{font-size:clamp(28px,4.4vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.08;
  color:var(--lt-ink);max-width:20ch;margin:0 auto}
.ais-final .sub{font-size:17px;line-height:1.7;color:var(--lt-2);max-width:60ch;margin:22px auto 32px}
.ais-final .ctas{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.ais-final .note{font-size:13px;color:var(--lt-3);margin-top:26px}

/* ---- responsive ---- */
@media(max-width:920px){
  .ais-prob,.ais-aud,.ais-tiers,.ais-dims,.ais-social{grid-template-columns:1fr;gap:30px}
  .ais-open .inner{max-width:none}
  .ais-tier.feat{order:-1}
}
@media(max-width:560px){
  .ais-drow{grid-template-columns:1fr 64px 64px;padding:13px 16px}
  .ais-colh{font-size:0}
  .ais-colh small{font-size:10px}
  .ais-colh::first-line{font-size:0}
}