/* ═══════════════════════════════════════════════════════════
   FROGGY PIXEL — SOBRE NOSOTROS v3
   Editorial + visual moments. Premium SaaS level.
   Uses landing :root tokens.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════
   PAGE
   ═══════════════════════════════════════ */
.ab-page{
  overflow-x:hidden;width:100%;max-width:100vw;
  background:#fff;min-height:100vh;
  font-family:var(--fb);color:var(--n8);line-height:1.6
}
.ab-nav-active{color:var(--p)!important}
.ab-nav-active::after{width:100%!important}


/* ═══════════════════════════════════════
   SHARED
   ═══════════════════════════════════════ */
.ab-badge{
  display:inline-block;width:fit-content;
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(139,92,246,.06));
  border:1.5px solid rgba(124,58,237,.25);
  border-radius:var(--r-f);
  padding:.5rem 1.1rem;
  font-size:.7rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--p);font-family:var(--fd);
  margin-bottom:1.25rem
}
.ab-badge-light{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25);
  color:rgba(255,255,255,.85)
}

.ab-h2{
  font-family:var(--fd);
  font-size:clamp(1.65rem,3.8vw,2.35rem);
  font-weight:900;line-height:1.12;
  letter-spacing:-.03em;
  color:var(--n9);margin-bottom:1rem
}

.ab-text{
  font-size:.92rem;line-height:1.8;
  color:var(--n6);font-weight:400;
  max-width:640px;margin-bottom:.5rem
}
.ab-text-center{text-align:center;margin-left:auto;margin-right:auto}

/* Buttons */
.ab-btn-primary{
  background:linear-gradient(135deg,var(--p),var(--s))!important;
  color:#fff!important;font-weight:700!important;
  padding:.7rem 1.5rem!important;border-radius:var(--r-l)!important;
  border:none!important;cursor:pointer;font-size:.88rem!important;
  box-shadow:0 6px 20px rgba(124,58,237,.2);
  transition:all var(--ts)!important;
  position:relative;overflow:hidden
}
.ab-btn-primary::before{
  content:'';position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .6s ease
}
.ab-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(124,58,237,.28)}
.ab-btn-primary:hover::before{left:100%}

.ab-btn-secondary{
  background:transparent!important;
  color:var(--n5)!important;font-weight:600!important;
  padding:.7rem 1.5rem!important;border-radius:var(--r-l)!important;
  border:1.5px solid var(--n3)!important;
  font-size:.88rem!important;cursor:pointer;
  transition:all var(--t)!important
}
.ab-btn-secondary:hover{
  color:var(--p)!important;
  border-color:rgba(124,58,237,.3)!important;
  transform:translateY(-2px)
}


/* ═══════════════════════════════════════
   §1 HERO — SPLIT: TEXT + SINGLE MOCKUP
   ═══════════════════════════════════════ */
.ab-hero-section{
  position:relative;
  min-height:72vh;
  display:flex;align-items:center;justify-content:center;
  padding:100px 2rem 60px;
  overflow:hidden;
  background:linear-gradient(135deg,#fff 0%,#faf8ff 50%,#f5f0ff 100%)
}

.ab-hero-deco-1{
  position:absolute;width:380px;height:380px;
  background:radial-gradient(circle at 30% 70%,rgba(124,58,237,.12),transparent 60%);
  border-radius:40% 60% 70% 30%/40% 50% 60% 50%;
  top:-140px;left:-60px;
  animation:blobR 25s ease-in-out infinite;
  filter:blur(70px);opacity:.45
}
.ab-hero-deco-2{
  position:absolute;width:320px;height:320px;
  background:radial-gradient(circle at 70% 30%,rgba(59,130,246,.1),transparent 60%);
  border-radius:60% 40% 30% 70%/60% 30% 70% 40%;
  bottom:-80px;right:-80px;
  animation:blobR 30s ease-in-out infinite reverse;
  filter:blur(70px);opacity:.35
}
.ab-hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(124,58,237,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,.015) 1px,transparent 1px);
  background-size:60px 60px;z-index:1
}

.ab-hero-split{
  position:relative;z-index:10;
  max-width:1140px;width:100%;
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:3.5rem;align-items:center
}

.ab-hero-left{animation:slideL 1s ease-out .15s both}

.ab-hero-badge{
  display:inline-flex;gap:.4rem;
  background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(59,130,246,.04));
  border:1.5px solid rgba(124,58,237,.18);
  border-radius:var(--r-f);
  padding:.45rem 1rem;margin-bottom:1.25rem;
  font-size:.68rem;font-weight:700;
  color:var(--p);font-family:var(--fd);
  letter-spacing:.1em;text-transform:uppercase
}

.ab-hero-h1{
  font-family:var(--fd);
  font-size:clamp(1.65rem,3.5vw,2.4rem);
  font-weight:900;line-height:1.15;
  letter-spacing:-.03em;
  color:var(--n9);margin-bottom:1.25rem
}

.ab-hero-sub{
  font-size:.95rem;line-height:1.8;
  color:var(--n7);font-weight:500;
  margin-bottom:.75rem;max-width:500px
}
.ab-hero-body{
  font-size:.88rem;line-height:1.8;
  color:var(--n5);font-weight:400;
  max-width:480px
}

/* Hero right — constellation visual */
.ab-hero-right{
  display:flex;justify-content:center;align-items:center;
  animation:slideR 1s ease-out .2s both
}

/* ── IDENTITY CONSTELLATION ──
   Vertical flow: Pillars → Core → Signal
   Same craft level as landing hero flow diagram,
   but oriented to company identity, not product. */

.ab-hero-visual{
  display:flex;flex-direction:column;
  align-items:center;gap:0;
  width:100%;max-width:360px
}


/* ── DNA CHIPS (top zone) — like landing brand chips ── */
.ab-zone-pillars{
  display:grid;grid-template-columns:1fr 1fr;
  gap:6px;width:100%
}

.ab-dna-chip{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(124,58,237,.1);
  border-radius:var(--r-m);
  padding:8px 10px;
  backdrop-filter:blur(8px);
  transition:all var(--t);
  cursor:default;
  box-shadow:0 2px 8px rgba(0,0,0,.04)
}
.ab-dna-chip:hover{
  border-color:rgba(124,58,237,.28);
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(124,58,237,.08)
}

.ab-dna-icon{
  width:30px;height:30px;
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(139,92,246,.06));
  border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;
  color:var(--p);flex-shrink:0
}

.ab-dna-text{display:flex;flex-direction:column;overflow:hidden}
.ab-dna-label{font-size:10px;font-weight:700;color:var(--n8);white-space:nowrap}
.ab-dna-detail{font-size:8px;font-weight:500;color:var(--n4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ── ORBIT CONNECTORS — like landing flow-connector ── */
.ab-orbit-conn{
  position:relative;
  width:100%;height:36px;
  display:flex;justify-content:center;
  flex-shrink:0
}

.ab-orbit-line{
  position:absolute;left:50%;top:0;bottom:0;
  width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(124,58,237,.06),rgba(124,58,237,.35),rgba(59,130,246,.35),rgba(59,130,246,.06));
  border-radius:1px
}
/* Glow behind line */
.ab-orbit-line::after{
  content:'';position:absolute;
  left:50%;top:10%;bottom:10%;
  width:8px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(124,58,237,.06),transparent);
  border-radius:4px;filter:blur(3px)
}

.ab-orbit-node{
  position:absolute;top:50%;left:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%);
  background:linear-gradient(135deg,var(--p),var(--s));
  border-radius:50%;
  box-shadow:0 0 8px rgba(124,58,237,.4);
  z-index:2;
  animation:nodeGlow 3s ease-in-out infinite
}

.ab-orbit-pulse{
  position:absolute;left:50%;
  width:4px;height:4px;
  background:var(--p4);
  border-radius:50%;
  transform:translateX(-50%);
  box-shadow:0 0 6px rgba(124,58,237,.5);
  animation:abOrbitDown 2.4s linear infinite;
  z-index:3
}
.ab-orbit-pulse-2{
  animation-delay:1.2s;
  background:var(--s4);
  box-shadow:0 0 6px rgba(59,130,246,.5)
}

/* Chevron at bottom */
.ab-orbit-conn::after{
  content:'';position:absolute;
  bottom:0;left:50%;
  width:5px;height:5px;
  transform:translateX(-50%) rotate(45deg);
  border-right:1.5px solid rgba(59,130,246,.35);
  border-bottom:1.5px solid rgba(59,130,246,.35);
  z-index:4;opacity:.6
}

@keyframes abOrbitDown{
  0%{top:-3px;opacity:0;transform:translateX(-50%) scale(.5)}
  10%{opacity:.8;transform:translateX(-50%) scale(1)}
  85%{opacity:.8;transform:translateX(-50%) scale(1)}
  100%{top:calc(100% - 3px);opacity:0;transform:translateX(-50%) scale(.5)}
}


/* ── CORE CARD — central identity piece ── */
.ab-zone-core{
  width:100%;display:flex;justify-content:center
}

.ab-core-card{
  width:100%;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  border:1.5px solid rgba(124,58,237,.12);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:
    0 20px 56px rgba(124,58,237,.1),
    0 4px 14px rgba(0,0,0,.04),
    0 0 0 1px rgba(124,58,237,.04);
  transition:all var(--ts);
  animation:mockFloat 7s ease-in-out infinite
}
.ab-core-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 72px rgba(124,58,237,.14),0 6px 20px rgba(0,0,0,.06);
  border-color:rgba(124,58,237,.22)
}

/* Core top bar */
.ab-core-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;
  background:linear-gradient(135deg,#faf8ff,#f0edff);
  border-bottom:1px solid rgba(124,58,237,.06)
}
.ab-dots{display:flex;gap:4px}
.ab-dot{width:7px;height:7px;border-radius:50%}
.ab-dot-r{background:#ff5f57}.ab-dot-y{background:#ffbd2e}.ab-dot-g{background:#28c840}
.ab-core-center{display:flex;align-items:center;gap:4px}
.ab-core-brand{font-size:9px;font-weight:800;color:var(--n8);font-family:var(--fd)}

/* Core body */
.ab-core-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px}

.ab-core-tag-row{display:flex;align-items:center;gap:5px}
.ab-core-tag{
  font-size:9px;font-weight:800;color:var(--p);
  text-transform:uppercase;letter-spacing:.08em;
  font-family:var(--fd)
}

.ab-core-statement{
  font-size:12px;line-height:1.65;
  color:var(--n7);font-weight:500;
  margin:0
}

/* Pills row */
.ab-core-pills{display:flex;gap:5px;flex-wrap:wrap}
.ab-core-pill{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px;
  background:rgba(124,58,237,.04);
  border:1px solid rgba(124,58,237,.08);
  border-radius:var(--r-f);
  font-size:8px;font-weight:700;color:var(--n6);
  transition:all var(--t)
}
.ab-core-pill:hover{
  border-color:rgba(124,58,237,.2);
  transform:translateY(-1px)
}


/* ── SIGNAL ZONE (bottom) — like landing flow-status ── */
.ab-zone-signal{
  display:flex;flex-direction:column;
  align-items:center;gap:6px;
  width:100%
}

.ab-signal-chip{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;
  background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.04));
  border:1.5px solid rgba(16,185,129,.18);
  border-radius:var(--r-f);
  transition:all var(--t)
}
.ab-signal-chip:hover{
  border-color:rgba(16,185,129,.35);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(16,185,129,.08)
}
.ab-signal-text{font-size:10px;font-weight:700;color:var(--a);font-family:var(--fd)}

.ab-signal-status{
  display:flex;align-items:center;gap:4px
}
.ab-signal-sub{font-size:8px;font-weight:600;color:var(--n4)}


/* ── RESPONSIVE HERO ── */
@media(max-width:960px){
  .ab-hero-split{grid-template-columns:1fr;text-align:center}
  .ab-hero-left{order:1}.ab-hero-right{order:2}
  .ab-hero-sub,.ab-hero-body{max-width:100%;margin-left:auto;margin-right:auto}
  .ab-hero-badge{margin-left:auto;margin-right:auto}
  .ab-hero-visual{max-width:340px}
}
@media(max-width:576px){
  .ab-hero-section{padding:90px 1.25rem 40px;min-height:auto}
  .ab-hero-visual{max-width:100%}
  .ab-zone-pillars{grid-template-columns:1fr 1fr;gap:5px}
  .ab-orbit-conn{height:28px}
}


/* ═══════════════════════════════════════
   §2 LA IDEA — 2 COLUMNAS + PULL QUOTE
   ═══════════════════════════════════════ */
.ab-idea-section{
  padding:5rem 2rem;
  background:#fff
}
.ab-idea-header{max-width:900px;margin:0 auto 2rem}

.ab-idea-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2.5rem;max-width:900px;margin:0 auto;
  align-items:start
}

.ab-idea-col-text{
  display:flex;flex-direction:column;gap:1rem
}
.ab-idea-col-quote{
  display:flex;flex-direction:column;gap:1.25rem
}

.ab-editorial-p{
  font-size:.9rem;line-height:1.85;
  color:var(--n6);font-weight:400;margin:0
}
.ab-editorial-p-sm{font-size:.85rem;color:var(--n5)}

/* Pull quote — premium accent */
.ab-pull-quote{
  position:relative;
  padding:1.5rem 1.75rem;
  background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(59,130,246,.02));
  border-radius:var(--r-l);
  border-left:4px solid var(--p)
}
.ab-quote-text{
  font-family:var(--fd);
  font-size:1.05rem;
  font-weight:700;
  line-height:1.55;
  color:var(--n8);
  font-style:italic;
  margin:0
}

@media(max-width:768px){
  .ab-idea-grid{grid-template-columns:1fr;gap:1.5rem}
}
@media(max-width:576px){
  .ab-idea-section{padding:3.5rem 1.25rem}
}


/* ═══════════════════════════════════════
   §2b STATEMENT BAND — VISUAL MOMENT A
   Full-width tipográfico. Rompe el ritmo.
   ═══════════════════════════════════════ */
.ab-band-section{
  padding:2.5rem 2rem;
  background:linear-gradient(135deg,#f8f4ff,#f0f0ff 50%,#eef5ff);
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
  border-top:1px solid rgba(124,58,237,.06);
  border-bottom:1px solid rgba(124,58,237,.06);
  overflow:hidden
}

.ab-band-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.15))
}
.ab-band-line-r{
  background:linear-gradient(90deg,rgba(124,58,237,.15),transparent)
}

.ab-band-content{
  display:flex;align-items:center;gap:1.25rem;
  flex-shrink:0
}

.ab-band-icon{
  width:36px;height:36px;
  background:rgba(255,255,255,.8);
  border:1.5px solid rgba(124,58,237,.12);
  border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0
}

.ab-band-text{
  font-family:var(--fd);
  font-size:clamp(1rem,2.5vw,1.45rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--n8);
  margin:0;white-space:nowrap
}
.ab-band-x{
  color:var(--p);
  font-weight:400;
  padding:0 .15rem;
  opacity:.5
}

@media(max-width:768px){
  .ab-band-line{display:none}
  .ab-band-section{flex-direction:column;gap:.75rem;padding:2rem 1.25rem}
  .ab-band-content{flex-direction:column;gap:.5rem}
  .ab-band-text{white-space:normal;text-align:center;font-size:1.1rem}
  .ab-band-icon{display:none}
}


/* ═══════════════════════════════════════
   §3 QUÉ CONSTRUIMOS — NUMBERED + ACCENT
   ═══════════════════════════════════════ */
.ab-build-section{
  padding:5rem 2rem;
  background:linear-gradient(180deg,#fff,var(--n0))
}
.ab-build-header{max-width:760px;margin:0 auto 2rem}

.ab-build-list{
  display:flex;flex-direction:column;gap:1.25rem;
  max-width:800px;margin:0 auto
}

.ab-build-row{
  display:flex;align-items:flex-start;gap:1.25rem;
  padding:1.5rem 1.75rem;
  background:#fff;
  border:1.5px solid rgba(124,58,237,.06);
  border-radius:var(--r-xl);
  transition:all .35s ease-out;
  position:relative;
  overflow:hidden
}
/* Left accent line on hover */
.ab-build-row::before{
  content:'';position:absolute;
  top:0;left:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--p),var(--s));
  opacity:0;transition:opacity .3s ease
}
.ab-build-row:hover::before{opacity:1}
.ab-build-row:hover{
  border-color:rgba(124,58,237,.15);
  box-shadow:0 8px 28px rgba(124,58,237,.06);
  transform:translateY(-2px)
}

.ab-build-left{
  display:flex;flex-direction:column;
  align-items:center;gap:.35rem;
  flex-shrink:0;min-width:48px
}

.ab-build-num{
  font-family:var(--fd);
  font-size:1.5rem;font-weight:900;
  background:linear-gradient(135deg,var(--p),var(--s));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1;opacity:.25
}

.ab-build-icon{
  width:40px;height:40px;
  background:linear-gradient(135deg,var(--p),var(--s));
  border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(124,58,237,.2);
  transition:all var(--t)
}
.ab-build-row:hover .ab-build-icon{
  transform:scale(1.08) rotate(-5deg);
  box-shadow:0 6px 18px rgba(124,58,237,.25)
}

.ab-build-right{flex:1;min-width:0}
.ab-build-title{
  font-size:.95rem;font-weight:700;
  color:var(--n8);margin-bottom:.35rem
}
.ab-build-desc{
  font-size:.85rem;line-height:1.75;
  color:var(--n5);font-weight:400;margin:0
}

@media(max-width:576px){
  .ab-build-section{padding:3.5rem 1.25rem}
  .ab-build-row{flex-direction:column;gap:.85rem;padding:1.25rem}
  .ab-build-left{flex-direction:row;gap:.5rem}
}


/* ═══════════════════════════════════════
   §4 FILOSOFÍA — CORAZÓN
   Gradient background para destacar.
   ═══════════════════════════════════════ */
.ab-philo-section{
  padding:5rem 2rem;
  background:linear-gradient(135deg,#f8f4ff 0%,#fff 50%,#f0f9ff 100%);
  position:relative
}
.ab-philo-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(124,58,237,.06),transparent 50%);
  z-index:0;pointer-events:none
}
.ab-philo-section>*{position:relative;z-index:1}

.ab-philo-header{
  text-align:center;max-width:680px;
  margin:0 auto 2.5rem
}
.ab-philo-intro{
  font-size:.95rem!important;
  line-height:1.8!important;
  max-width:620px!important
}

.ab-pillar-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.5rem;max-width:900px;margin:0 auto
}
.ab-pillar-card{
  background:rgba(255,255,255,.92);
  border:1.5px solid rgba(124,58,237,.08);
  border-radius:var(--r-xl);
  padding:1.75rem;
  transition:all var(--ts);
  box-shadow:0 4px 16px rgba(0,0,0,.03);
  backdrop-filter:blur(8px)
}
.ab-pillar-card:hover{
  transform:translateY(-4px);
  border-color:rgba(124,58,237,.2);
  box-shadow:0 10px 28px rgba(124,58,237,.08)
}

.ab-pillar-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.65rem}
.ab-pillar-icon{
  width:44px;height:44px;
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(139,92,246,.05));
  border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;
  color:var(--p);flex-shrink:0;
  transition:all var(--t)
}
.ab-pillar-card:hover .ab-pillar-icon{
  transform:scale(1.08) rotate(-5deg);
  background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(139,92,246,.08))
}
.ab-pillar-title{font-size:.95rem;font-weight:700;color:var(--n8)}
.ab-pillar-desc{font-size:.85rem;line-height:1.75;color:var(--n5)}

@media(max-width:768px){.ab-pillar-grid{grid-template-columns:1fr}}


/* ═══════════════════════════════════════
   §5 PRINCIPIOS
   White background — contrasta con filosofía.
   ═══════════════════════════════════════ */
.ab-princ-section{
  padding:5rem 2rem;
  background:#fff
}
.ab-princ-header{
  text-align:center;max-width:640px;
  margin:0 auto 2.5rem
}

.ab-princ-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.5rem;max-width:900px;margin:0 auto
}

.ab-princ-card{
  padding:1.5rem;
  border-bottom:2px solid rgba(124,58,237,.08);
  transition:all .3s ease-out
}
.ab-princ-card:hover{border-bottom-color:rgba(124,58,237,.25)}

.ab-princ-head{
  display:flex;align-items:center;gap:.65rem;
  margin-bottom:.5rem
}
.ab-princ-icon{
  width:36px;height:36px;
  background:rgba(124,58,237,.06);
  border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;
  color:var(--p);flex-shrink:0
}
.ab-princ-title{font-size:.88rem;font-weight:700;color:var(--n8)}
.ab-princ-desc{font-size:.83rem;line-height:1.75;color:var(--n5)}

@media(max-width:768px){.ab-princ-grid{grid-template-columns:1fr}}


/* ═══════════════════════════════════════
   §6 VISIÓN — DARK BLOCK
   ═══════════════════════════════════════ */
.ab-vision-section{
  position:relative;
  padding:5rem 2rem;
  background:linear-gradient(135deg,#0f172a,#1a1f3a 50%,#0f2d4a);
  overflow:hidden
}

.ab-vision-glow-1{
  position:absolute;width:320px;height:320px;
  background:radial-gradient(circle,rgba(124,58,237,.18),transparent 70%);
  border-radius:50%;top:-100px;left:-50px;
  filter:blur(70px);opacity:.5;pointer-events:none
}
.ab-vision-glow-2{
  position:absolute;width:280px;height:280px;
  background:radial-gradient(circle,rgba(59,130,246,.12),transparent 70%);
  border-radius:50%;bottom:-80px;right:-40px;
  filter:blur(70px);opacity:.4;pointer-events:none
}

.ab-vision-content{
  position:relative;z-index:1;
  max-width:660px;margin:0 auto;text-align:center
}

.ab-vision-h2{
  font-family:var(--fd);
  font-size:clamp(1.65rem,3.8vw,2.35rem);
  font-weight:900;line-height:1.12;
  letter-spacing:-.03em;
  color:#fff;margin-bottom:1.5rem
}

.ab-vision-text{display:flex;flex-direction:column;gap:.85rem}
.ab-vision-p{
  font-size:.9rem;line-height:1.85;
  color:rgba(255,255,255,.65);
  font-weight:400;margin:0
}


/* ═══════════════════════════════════════
   §6b PREVIEW BAND — VISUAL MOMENT C
   Flujo de producto elegante.
   Dark-ish background para transicionar de visión a CTA.
   ═══════════════════════════════════════ */
.ab-prev-section{
  padding:2.5rem 2rem;
  background:linear-gradient(180deg,#0f172a,#1a1f3a 30%,#252b45);
  border-bottom:1px solid rgba(124,58,237,.15)
}

.ab-prev-content{
  max-width:700px;margin:0 auto;
  position:relative
}

.ab-prev-row{
  display:flex;justify-content:space-between;
  gap:1rem
}

.ab-prev-item{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  gap:.65rem;text-align:center;
  padding:1.25rem .75rem;
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.15);
  border-radius:var(--r-l);
  backdrop-filter:blur(8px);
  transition:all .3s ease-out
}
.ab-prev-item:hover{
  background:rgba(124,58,237,.12);
  border-color:rgba(124,58,237,.3);
  transform:translateY(-2px)
}

.ab-prev-icon{
  width:44px;height:44px;
  background:linear-gradient(135deg,var(--p),var(--s));
  border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(124,58,237,.3)
}

.ab-prev-text{display:flex;flex-direction:column;gap:.1rem}
.ab-prev-label{
  font-family:var(--fd);
  font-size:.82rem;font-weight:800;
  color:#fff;letter-spacing:-.01em
}
.ab-prev-desc{
  font-size:.7rem;font-weight:500;
  color:rgba(255,255,255,.5)
}

/* Flow indicators between items */
.ab-prev-flow{
  display:flex;align-items:center;justify-content:center;
  gap:0;padding:.75rem 0 0;
  max-width:500px;margin:0 auto
}
.ab-prev-connector{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.25),transparent)
}
.ab-prev-arrow{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0
}

@media(max-width:576px){
  .ab-prev-row{flex-direction:column;gap:.75rem}
  .ab-prev-flow{display:none}
  .ab-prev-section{padding:2rem 1.25rem}
}


/* ═══════════════════════════════════════
   §7 CTA — SOBRIO
   ═══════════════════════════════════════ */
.ab-cta-section{
  padding:4.5rem 2rem;
  text-align:center;
  background:var(--n0);
  border-top:1px solid var(--n2)
}

.ab-cta-content{max-width:560px;margin:0 auto}

.ab-cta-h2{
  font-family:var(--fd);
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:800;line-height:1.15;
  letter-spacing:-.02em;
  color:var(--n9);margin-bottom:.75rem
}
.ab-cta-sub{
  font-size:.9rem;color:var(--n5);
  font-weight:400;line-height:1.75;
  margin-bottom:1.75rem
}
.ab-cta-btns{
  display:flex;gap:1rem;
  justify-content:center;flex-wrap:wrap
}

@media(max-width:576px){
  .ab-cta-section{padding:3rem 1.25rem}
  .ab-cta-btns{flex-direction:column;align-items:stretch}
}