:root{
    --bg:#F7F9FB;
    --ink:#170F40;
    --body:#5B5680;
    --muted:#8A84B0;
    --purple:#342B7F;
    --violet:#8956FF;
    --mint:#3FD9AE;
    --mint-soft:#6CEECC;
    --cyan:#0AC6F9;
    --line:rgba(255,255,255,.7);
    --line-strong:rgba(255,255,255,.95);
    --card:rgba(255,255,255,.62);
    --tint-cyan:rgba(255,255,255,.55);
    --tint-violet:rgba(255,255,255,.55);
    --tint-mint:rgba(255,255,255,.55);
    --dark:#170F40;
    --dark-2:#241A5E;
    --radius:24px;
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Montserrat',sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{
    font-family:'Staatliches',sans-serif;
    letter-spacing:.26em;
    text-transform:uppercase;
    font-size:12.5px;
    color:var(--violet);
  }
  .grad-text{
    background:linear-gradient(92deg, var(--cyan), var(--violet) 55%, var(--mint));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  a{color:inherit;text-decoration:none}
  section{position:relative}
  p{color:var(--body)}

  .btn-cta{
    display:inline-flex;align-items:center;gap:10px;
    border:0;cursor:pointer;text-decoration:none;
    background:linear-gradient(92deg,var(--cyan),#4fa8ff 55%,var(--violet));
    color:#fff;font-family:inherit;font-weight:800;font-size:15.5px;
    padding:16px 26px;border-radius:14px;transition:.25s cubic-bezier(.2,.8,.2,1);
    letter-spacing:.01em;
    box-shadow:0 14px 30px rgba(137,86,255,.28);
    white-space:nowrap;
  }
  .btn-cta:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(137,86,255,.38)}
  .btn-cta svg{transition:.25s}
  .btn-cta:hover svg{transform:translateX(3px)}
  .btn-cta.sm{padding:11px 18px;font-size:13.5px;border-radius:11px}
  .btn-cta.light{background:#fff;color:#3B2C8A;box-shadow:0 16px 36px rgba(10,198,249,.24)}
  .btn-cta.light:hover{box-shadow:0 20px 40px rgba(0,0,0,.24)}

  @keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-50px) scale(1.06)}}

  /* ===== Nav ===== */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    backdrop-filter:blur(16px);
    background:rgba(255,255,255,.55);
    border-bottom:1px solid rgba(255,255,255,.8);
  }
  .nav-inner{
    max-width:var(--maxw);margin:0 auto;padding:14px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
  }
  .nav-logo{display:flex;align-items:center;gap:13px}
  .nav-logo .nl-ima{height:23px;width:auto}
  .nav-logo .nl-sep{width:1px;height:18px;background:rgba(23,15,64,.18);display:block}
  .nav-logo .nl-infinixe{height:14px;width:auto;opacity:.62}
  @media(max-width:560px){
    .nav-logo{gap:10px}
    .nav-logo .nl-ima{height:20px}
    .nav-logo .nl-sep,.nav-logo .nl-infinixe{display:none}
  }
  .nav-links{display:flex;gap:28px;font-size:13.5px;font-weight:600;color:var(--body)}
  .nav-links a{transition:.2s}
  .nav-links a:hover{color:var(--violet)}
  @media(max-width:760px){.nav-links{display:none}}

  /* ===== Hero: contenido limpio + fondo técnico contenido ===== */
  .hero{padding:148px 0 76px;position:relative;overflow:hidden}
  .hero::before{
    content:'';position:absolute;inset:-15% -10%;z-index:-1;pointer-events:none;
    background:
      radial-gradient(46% 58% at 86% 4%, rgba(10,198,249,.13), transparent 64%),
      radial-gradient(40% 50% at 4% 98%, rgba(63,217,174,.10), transparent 64%);
    animation:heroDrift 20s ease-in-out infinite;
  }
  .hero::after{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
    background-image:radial-gradient(circle, rgba(52,43,127,.10) 1px, transparent 1.4px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(58% 60% at 74% 32%, #000, transparent 72%);
    mask-image:radial-gradient(58% 60% at 74% 32%, #000, transparent 72%);
    animation:gridPan 36s linear infinite;
  }
  @keyframes heroDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-3%,3%)}}
  @keyframes gridPan{0%{background-position:0 0}100%{background-position:260px 260px}}

  .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero-kicker{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Staatliches',sans-serif;letter-spacing:.28em;font-size:12px;
    color:var(--purple);border:1px solid rgba(137,86,255,.3);
    background:rgba(137,86,255,.08);border-radius:100px;padding:8px 16px;margin-bottom:22px;
  }
  .hero h1{
    font-weight:800;font-size:clamp(34px,5.2vw,56px);line-height:1.08;letter-spacing:-1px;margin-bottom:18px;color:var(--ink);
  }
  .hero .sub{
    font-size:16.5px;line-height:1.6;color:var(--body);max-width:480px;margin-bottom:30px;font-weight:400;
  }
  .hero .sub b{color:var(--ink);font-weight:700}
  .hero-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .hero-note{font-size:12px;color:var(--muted)}

  /* Visual del hero: "reporte" con tarjeta flotante superpuesta */
  .hero-visual{position:relative;display:flex;flex-direction:column;align-items:center;padding-bottom:8px}
  .hero-caption{
    align-self:flex-start;margin:52px 0 0 6px;max-width:230px;
    font-size:10.5px;color:var(--muted);font-style:italic;text-align:left;line-height:1.45;
  }
  @media(max-width:980px){.hero-caption{align-self:center;text-align:center;max-width:none;margin-left:0}}
  .report-card{
    width:100%;max-width:392px;
    background:linear-gradient(160deg, var(--dark) 0%, var(--dark-2) 100%);
    border-radius:22px;overflow:hidden;
    box-shadow:0 40px 80px rgba(23,15,64,.26);
    animation:floatPanel 8s ease-in-out infinite;
    color:#fff;
  }
  @keyframes floatPanel{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-14px) rotate(.3deg)}}
  .rc-topbar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
  .rc-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
  .rc-url{margin-left:8px;font-size:10px;color:#9C93C9;letter-spacing:.02em}
  .rc-scanline{position:relative;height:2px;background:rgba(255,255,255,.05);overflow:hidden}
  .rc-scanline::after{
    content:'';position:absolute;top:0;left:-30%;width:30%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(10,198,249,.95),transparent);
    animation:scan 2.8s linear infinite;
  }
  @keyframes scan{0%{left:-30%}100%{left:100%}}
  .rc-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
  .rc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
  .rc-head .dp-badge{margin:0}
  .rc-row{display:flex;align-items:center;gap:12px}
  .rc-label{width:78px;font-size:12px;font-weight:700;flex-shrink:0}
  .rc-track{flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.09);overflow:hidden}
  .rc-fill{height:100%;border-radius:8px;width:0;transition:width 1.3s cubic-bezier(.2,.8,.2,1)}
  .rc-val{width:28px;text-align:right;font-family:'Staatliches',sans-serif;font-size:15px}

  .dp-badge{
    display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
    background:rgba(108,238,204,.15);color:var(--mint-soft);border:1px solid rgba(108,238,204,.3);
    border-radius:100px;padding:6px 12px;
  }

  .floating-badge{
    position:absolute;right:2%;bottom:-18px;background:#fff;border-radius:18px;
    padding:14px 18px 12px;box-shadow:0 24px 54px rgba(23,15,64,.18);
    animation:floatBadge 7s ease-in-out infinite;min-width:190px;
  }
  @keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .fb-rings{display:flex;gap:14px;justify-content:space-between}
  .fb-item{text-align:center}
  .fb-item .fb-name{font-size:9px;color:var(--muted);margin-top:4px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
  .ring{position:relative}
  .ring svg{transform:rotate(-90deg)}
  .ring .ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Staatliches',sans-serif;color:var(--ink)}
  .ring-sm{width:42px;height:42px}
  .ring-sm .ring-val{font-size:12px}

  @media(max-width:980px){
    .hero-inner{grid-template-columns:1fr}
    .hero-visual{margin-top:6px;padding-bottom:40px}
    .report-card{max-width:420px}
  }
  @media(max-width:560px){
    .hero{padding:126px 0 56px}
    .floating-badge{right:4%}
  }

  /* ===== Marquee (logos) ===== */
  .marquee-shell{overflow:hidden;position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .marquee-track{display:flex;align-items:center;gap:64px;width:max-content;animation:scrollX 32s linear infinite}
  .marquee-track img{height:26px;width:auto;flex-shrink:0;opacity:.8}
  .marquee-track.press img{height:22px}
  .marquee-shell:hover .marquee-track{animation-play-state:paused}
  @keyframes scrollX{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

  .trust{padding:34px 0 44px}
  .trust .tt{text-align:center;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;font-weight:600}

  /* ===== Section shell ===== */
  .section{padding:88px 0}
  .section-head{max-width:680px;margin-bottom:48px}
  .section-head-row{display:flex;align-items:center;gap:12px;margin-bottom:4px}
  .section-head h2{font-size:clamp(27px,3.2vw,38px);font-weight:800;line-height:1.15;letter-spacing:-.5px;margin-top:12px;color:var(--ink)}
  .section-head p{font-size:15.5px;line-height:1.65;margin-top:14px}
  .center{text-align:center;margin-left:auto;margin-right:auto}
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:translateY(0)}

  /* ===== Recorrido del IMA en 3 pasos (Evalúa/Compara/Identifica) ===== */
  .journey{display:flex;align-items:stretch;gap:18px;margin-bottom:28px}
  .journey-step{
    flex:1;border:1px solid transparent;border-radius:22px;position:relative;overflow:hidden;
    padding:34px 28px 30px;transition:.28s cubic-bezier(.2,.8,.2,1);
    /* el filo es un degradado de marca, no una linea plana */
    background:
      linear-gradient(158deg,#191048 0%,#221765 100%) padding-box,
      linear-gradient(140deg, rgba(111,230,255,.95) 0%, rgba(180,155,255,.45) 50%, rgba(140,245,220,.85) 100%) border-box;
    box-shadow:0 26px 52px rgba(23,15,64,.28);
  }
  /* Destellos: tintes CLAROS de la paleta, no los saturados. Sobre fondo
     oscuro un color saturado oscurece; el tinte claro es el que ilumina.
     La ultima parada es un velo oscuro bajo el texto, que es lo que permite
     subir tanto los destellos sin perder legibilidad. */
  .journey-step::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(92% 80% at -4% -22%, rgba(120,222,255,.72), transparent 62%),
      radial-gradient(88% 78% at 114% 26%, rgba(192,166,255,.74), transparent 62%),
      radial-gradient(64% 52% at 20% 152%, rgba(130,242,218,.30), transparent 60%),
      radial-gradient(70% 58% at 50% 60%, rgba(18,11,50,.52), transparent 74%),
      linear-gradient(180deg, transparent 26%, rgba(16,10,46,.80) 74%);
    animation:auroraDrift 16s ease-in-out infinite alternate;
  }
  /* Malla fina que se desvanece hacia abajo */
  .journey-step::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:30px 30px,30px 30px;
    -webkit-mask-image:radial-gradient(94% 84% at 50% -8%, #000 6%, transparent 78%);
    mask-image:radial-gradient(94% 84% at 50% -8%, #000 6%, transparent 78%);
  }
  @keyframes auroraDrift{
    from{transform:translate3d(-3%,-2%,0) scale(1.04)}
    to  {transform:translate3d(3%,2%,0) scale(1.10)}
  }
  .journey-step > *{position:relative;z-index:1}
  .journey-step:hover{transform:translateY(-6px);box-shadow:0 34px 66px rgba(23,15,64,.46)}
  /* Entrada escalonada: las tres aparecen una por una al revelarse el bloque.
     Va como animation y no como transition para no ralentizar el hover. */
  .journey.in .journey-step{animation:pasoEntra .62s cubic-bezier(.2,.8,.2,1) both}
  .journey.in .journey-step:nth-child(2){animation-delay:.16s}
  .journey.in .journey-step:nth-child(3){animation-delay:.32s}
  @keyframes pasoEntra{
    from{opacity:0;transform:translateY(22px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }

  /* Icono: único elemento con movimiento */
  /* Icono: ilustracion propia, pasada a linea clara con acento de marca y
     fondo transparente. Sin caja: se apoya en la tarjeta, no encima de ella. */
  .journey-step .js-icon{
    display:flex;justify-content:center;align-items:center;
    margin-bottom:18px;
    animation:jsFloat 4.6s ease-in-out infinite;
  }
  .journey-step .js-icon img.ic{
    width:92px;height:92px;display:block;
  }
  @media(max-width:760px){.journey-step .js-icon img.ic{width:80px;height:80px}}
  .journey-step:nth-child(2) .js-icon{animation-delay:.45s}
  .journey-step:nth-child(3) .js-icon{animation-delay:.9s}
  @keyframes jsFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
  }
  .journey-step .js-icon svg{display:block;overflow:visible}

  .journey-step{text-align:center}
  .journey-step h3{
    font-weight:800;letter-spacing:.055em;text-transform:uppercase;
    font-size:19px;line-height:1.2;margin-bottom:10px;
    background:linear-gradient(95deg,#6FE6FF 0%,#5FB0FF 46%,#9FA9FF 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .journey-step p{font-size:13.5px;line-height:1.65;color:#B6AEDD}
  .journey-step b{color:#EDEAFB;font-weight:700}
  .journey-arrow{flex-shrink:0;align-self:center;margin:0 -1px}
  .journey-arrow .ja-line{animation:dashMove 1.4s linear infinite}
  @keyframes dashMove{to{stroke-dashoffset:-22}}

  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .stat-card{
    position:relative;overflow:hidden;border-radius:20px;padding:26px 18px;text-align:center;
    box-shadow:0 22px 44px rgba(23,15,64,.16);
  }
  .stat-card::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(60% 60% at 15% 0%, rgba(255,255,255,.4), transparent 60%);
  }
  .stat-card b{
    position:relative;z-index:1;display:block;font-family:'Staatliches',sans-serif;font-size:38px;
    margin-bottom:4px;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.12);
  }
  .stat-card span{position:relative;z-index:1;font-size:12.5px;color:rgba(255,255,255,.94);font-weight:600;line-height:1.4}
  .stat-card.sc-1{background:linear-gradient(140deg,#0AC6F9,#3f9dff)}
  .stat-card.sc-2{background:linear-gradient(140deg,#8956FF,#B48CFF)}
  .stat-card.sc-3{background:linear-gradient(140deg,#3FD9AE,#6CEECC)}
  .stat-card.sc-4{background:linear-gradient(135deg,#0AC6F9,#8956FF 55%,#3FD9AE)}
  @media(max-width:860px){
    .journey{flex-direction:column;gap:20px}
    .journey-arrow{transform:rotate(90deg);align-self:center;margin:-6px 0}
    .stat-grid{grid-template-columns:repeat(2,1fr)}
  }

  /* ===== Triángulo de marca (IMA Framework) ===== */
  .tri-mark polygon{transition:opacity .3s ease}
  .fw-triangle{display:block;margin:0 auto 28px;filter:drop-shadow(0 12px 26px rgba(23,15,64,.14));cursor:pointer}
  .fw-triangle .tri-seg{transition:opacity .3s ease, transform .3s ease;transform-box:fill-box;transform-origin:center;}
  .fw-triangle .tri-seg.dim{opacity:.22}
  .fw-triangle .tri-seg.active{opacity:1;transform:scale(1.045)}


  /* Reporte detallado del hero */
  .rc-title{font-size:14px;font-weight:800;letter-spacing:.01em}
  .rc-sub{font-size:10px;color:#9C93C9;margin-top:2px;font-weight:500}
  .rc-foot{font-size:9.5px;color:#8078AD;font-style:italic;text-align:center;padding-top:2px}
  .rc-group{border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
  .rc-ghead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
  .rc-gname{font-size:12.5px;font-weight:800;letter-spacing:.02em}
  .rc-gval{font-family:'Staatliches',sans-serif;font-size:19px}
  .rc-group[data-c="cyan"] .rc-gname,.rc-group[data-c="cyan"] .rc-gval{color:#4fd8ff}
  .rc-group[data-c="violet"] .rc-gname,.rc-group[data-c="violet"] .rc-gval{color:#B48CFF}
  .rc-group[data-c="mint"] .rc-gname,.rc-group[data-c="mint"] .rc-gval{color:#6CEECC}
  .rc-sub-row{display:flex;align-items:center;gap:9px;margin-bottom:7px}
  .rc-sub-row span{width:66px;font-size:10px;color:#C4BDE4;flex-shrink:0}
  .rc-sub-row b{width:20px;text-align:right;font-size:10px;color:#E6E2F7;font-weight:700}
  .rc-track.sm{height:5px;border-radius:5px}
  .rc-track.sm{position:relative}
  .rc-track.sm i{
    display:block;height:100%;border-radius:5px;width:0;position:relative;overflow:hidden;
    transition:width 1.25s cubic-bezier(.16,.84,.24,1);
  }
  .rc-track.sm i::after{
    content:'';position:absolute;inset:0;border-radius:5px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
    transform:translateX(-120%);
  }
  .rc-track.sm i.shine::after{animation:barShine 1.1s ease-out}
  @keyframes barShine{to{transform:translateX(220%)}}
  .rc-tip{
    position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
    transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;
    transition:left 1.25s cubic-bezier(.16,.84,.24,1),opacity .4s,transform .4s;
  }
  .rc-tip.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .rc-group{transition:background .5s,box-shadow .5s}
  .rc-group.lit{background:rgba(255,255,255,.04);border-radius:12px;margin:0 -8px;padding:12px 8px 4px}
  .rc-gval{transition:transform .45s cubic-bezier(.2,1.6,.3,1);display:inline-block}
  .rc-gval.pop{transform:scale(1.3)}
  .rc-sub-row{opacity:0;transform:translateX(-8px);transition:opacity .45s ease,transform .45s ease}
  .rc-sub-row.in{opacity:1;transform:translateX(0)}
  .rc-head .dp-badge.pulse{animation:badgePulse 1.6s ease-out}
  @keyframes badgePulse{
    0%{box-shadow:0 0 0 0 rgba(108,238,204,.55)}
    100%{box-shadow:0 0 0 18px rgba(108,238,204,0)}
  }
  .rc-live{display:inline-flex;align-items:center;gap:6px;font-size:9px;color:#9C93C9;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
  .rc-live i{width:6px;height:6px;border-radius:50%;background:#3FD9AE;animation:livePulse 1.4s ease-in-out infinite}
  @keyframes livePulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

  /* ===== Casos de éxito ===== */
  .logo-band{padding:74px 0 20px}
  .band-head{text-align:center;margin-bottom:34px}
  .band-head .bh-eyebrow{
    font-family:'Staatliches',sans-serif;letter-spacing:.24em;text-transform:uppercase;
    font-size:12px;color:var(--violet);margin-bottom:10px;
  }
  .band-head h2{font-size:clamp(34px,4.4vw,52px);font-weight:800;line-height:1.1;letter-spacing:-1px;color:var(--ink)}
  .band-head p{font-size:14px;margin-top:10px;max-width:520px;margin-left:auto;margin-right:auto}
  .band-stat{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    margin-top:18px !important;max-width:560px !important;
  }
  .band-stat .bs-num{
    display:inline-flex;align-items:baseline;
    font-family:'Staatliches',sans-serif;font-size:clamp(46px,6vw,70px);line-height:1;
    background:linear-gradient(92deg,var(--cyan),var(--violet) 58%,var(--mint));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .band-stat .bs-plus{font-size:.62em;margin-right:.06em}
  .band-stat .bs-label{
    font-size:14.5px;color:var(--body);line-height:1.5;max-width:430px;font-weight:500;
  }
  .logo-grid{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:22px 40px;max-width:1080px;margin:0 auto;
  }
  .logo-cell{display:flex;align-items:center;justify-content:center;height:42px}
  .logo-cell img{
    max-height:24px;width:auto;opacity:.42;filter:grayscale(1);
    transition:opacity .25s ease,filter .25s ease;
  }
  .logo-cell:hover img{opacity:.9;filter:grayscale(0)}
  @media(max-width:768px){.logo-grid{gap:20px 36px}.logo-cell img{max-height:22px}}
  @media(max-width:480px){.logo-grid{gap:16px 26px}.logo-cell img{max-height:19px}}

  /* ===== Prensa ===== */
  .press-band{padding:64px 0 26px}
  .press-row{
    display:flex;align-items:center;justify-content:center;gap:52px;flex-wrap:wrap;
    padding:6px 0 2px;
  }
  .press-row img{max-height:27px;width:auto;opacity:.72;transition:.25s}
  .press-row img:hover{opacity:1}
  @media(max-width:560px){.press-row{gap:26px;padding:22px 18px}.press-row img{max-height:20px}}

  /* ===== Framework al estilo original ===== */
  .fw-head{text-align:left;max-width:720px;margin:0 0 32px}
  .fw-kicker{
    letter-spacing:.4em;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:14px;
  }
  .fw-head h2{font-weight:800;font-size:clamp(24px,2.9vw,33px);line-height:1.32;letter-spacing:-.3px;color:var(--ink)}
  .fw-head h2.fw-logo{margin:0}
  .fw-logo img{display:block;width:min(430px,86%);height:auto}
  @media(max-width:560px){.fw-logo img{width:min(300px,94%)}}
  .fw-head .fw-sub{font-size:14.5px;line-height:1.78;margin-top:18px;margin-left:0;margin-right:0}
  .fw-head .fw-sub b{color:var(--ink);font-weight:700}
  .pillars-o{display:flex;gap:10px;margin-bottom:8px}
  .pillar-o{
    flex:1;background:rgba(255,255,255,.72);border:1.5px solid rgba(52,43,127,.1);border-radius:16px;
    backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(23,15,64,.05), inset 0 1px 0 rgba(255,255,255,.9);
    padding:15px 12px 13px;cursor:pointer;transition:.25s;text-align:center;
  }
  .pillar-o:hover{transform:translateY(-2px);border-color:rgba(52,43,127,.2);box-shadow:0 14px 30px rgba(23,15,64,.1)}
  .pillar-o .name{
    font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:9px;justify-content:center;
  }
  .pillar-o .p-tri{
    flex-shrink:0;transform-origin:50% 65%;
    animation:triPulse 3.2s ease-in-out infinite;
    filter:drop-shadow(0 2px 5px rgba(23,15,64,.18));
  }
  .pillar-o[data-p="m"] .p-tri{animation-delay:.4s}
  .pillar-o[data-p="f"] .p-tri{animation-delay:.8s}
  @keyframes triPulse{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-3px) scale(1.12)}
  }
  .pillar-o:hover .p-tri{animation-duration:1.1s}
  /* al activarse el pilar el triángulo pasa a blanco */
  .pillar-o.active .p-tri polygon{fill:#fff}
  .pillar-o .q{font-size:10.5px;color:var(--muted);margin-top:7px;font-weight:500;line-height:1.5}
  .pillar-o[data-p="s"] .name{color:#0891c4}
  .pillar-o[data-p="m"] .name{color:var(--violet)}
  .pillar-o[data-p="f"] .name{color:#1fa980}
  .pillar-o.active{border-color:transparent;transform:translateY(-2px)}
  .pillar-o.active .name{color:#fff}
  .pillar-o.active .q{color:rgba(255,255,255,.86)}
  .pillar-o[data-p="s"].active{background:linear-gradient(150deg,#0AC6F9,#2f8fef);box-shadow:0 16px 32px rgba(10,150,220,.34)}
  .pillar-o[data-p="m"].active{background:linear-gradient(150deg,#8956FF,#6a3bdb);box-shadow:0 16px 32px rgba(137,86,255,.34)}
  .pillar-o[data-p="f"].active{background:linear-gradient(150deg,#3FD9AE,#17b489);box-shadow:0 16px 32px rgba(31,169,128,.34)}
  .fw-hint{text-align:center;font-size:11px;color:var(--muted);margin:8px 0 14px;opacity:.85}
  .fw-meta{text-align:center;font-size:12px;color:var(--muted);letter-spacing:.02em;margin-top:20px}
  .fw-meta .dot{opacity:.5;margin:0 7px}
  @media(max-width:560px){
    .pillars-o{flex-direction:column}
    .pillar-o .q{font-size:11px}
  }

  /* ===== Framework interactivo ===== */
  .fw-shell{
    background:linear-gradient(150deg, rgba(255,255,255,.7), rgba(255,255,255,.42));
    border:1px solid rgba(255,255,255,.85);border-radius:28px;padding:44px 26px 32px;
    box-shadow:0 24px 60px rgba(23,15,64,.07), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:blur(18px) saturate(1.1);
  }
  .pillar-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:26px;flex-wrap:wrap}
  .p-tab{
    font-family:inherit;font-weight:700;font-size:13.5px;padding:10px 22px;border-radius:100px;
    border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:.2s;color:var(--body);
  }
  .p-tab:hover{border-color:var(--line-strong)}
  .p-tab.active[data-p="s"]{border-color:var(--cyan);color:#0891c4;background:var(--tint-cyan)}
  .p-tab.active[data-p="m"]{border-color:var(--violet);color:var(--violet);background:var(--tint-violet)}
  .p-tab.active[data-p="f"]{border-color:var(--mint);color:#1fa980;background:var(--tint-mint)}

  .fw-panel{padding:8px 8px 4px;display:none}
  .fw-panel.open{display:block;animation:panelIn .42s cubic-bezier(.2,.8,.2,1)}
  @keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .fw-panel .p-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:10px}
  .fw-panel .p-title{font-weight:800;font-size:22px}
  .fw-panel .p-focus{font-size:13px;color:var(--muted);font-weight:500}
  .fw-panel .p-def{font-size:14.5px;color:var(--body);line-height:1.8;margin-bottom:18px;max-width:760px}
  .fw-panel .p-symptom{
    font-size:13px;line-height:1.7;max-width:760px;
    background:rgba(255,255,255,.55);border-radius:0 12px 12px 0;padding:11px 15px;
    border-left:3px solid currentColor;margin-bottom:22px;backdrop-filter:blur(8px);
  }
  .subs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .sub-card{
    background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.85);border-radius:14px;
    padding:16px 16px 14px;backdrop-filter:blur(10px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  }
  .sub-card .s-name{font-weight:700;font-size:14px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
  .sub-card .s-name i{width:7px;height:7px;border-radius:50%;display:inline-block}
  .sub-card .s-def{font-size:12.5px;color:var(--body);line-height:1.7}
  .sub-card .s-elems{margin-top:11px;font-size:10.5px;color:var(--muted);line-height:1.75}
  @media(max-width:860px){
    .subs{grid-template-columns:1fr}
  }

  /* ===== Problemáticas ===== */
  .problems{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .problem{
    border-radius:20px;padding:26px 22px;border:1px solid var(--line);background:var(--card);
    box-shadow:0 16px 36px rgba(23,15,64,.05);
    border-left:4px solid var(--line-strong);
  }
  .problem .pr-tag{font-family:'Staatliches',sans-serif;letter-spacing:.06em;font-size:20px;margin-bottom:10px}
  .problem p{font-size:13.5px;line-height:1.6}
  .problem.p-s{border-left-color:var(--cyan)}
  .problem.p-m{border-left-color:var(--violet)}
  .problem.p-f{border-left-color:var(--mint)}
  .problem.p-s .pr-tag{color:#0891c4}
  .problem.p-m .pr-tag{color:var(--violet)}
  .problem.p-f .pr-tag{color:#1fa980}
  @media(max-width:860px){.problems{grid-template-columns:1fr}}

  /* ===== Niveles de madurez ===== */
  .levels{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:20px}
  .level{
    position:relative;
    background:var(--card);border:1.5px solid var(--line);border-radius:16px;
    padding:18px 10px;text-align:center;transition:.2s;cursor:pointer;
    box-shadow:0 12px 26px rgba(23,15,64,.04);
  }
  .level:hover{border-color:var(--line-strong);transform:translateY(-3px)}
  .level .lv-n{
    font-family:'Staatliches',sans-serif;font-size:26px;
    background:linear-gradient(92deg,var(--cyan),var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .level .lv-name{font-weight:800;font-size:12px;margin-top:6px;letter-spacing:.01em;color:var(--ink)}
  .level.active{border-color:var(--violet);box-shadow:0 0 0 2px rgba(137,86,255,.16), 0 14px 30px rgba(137,86,255,.1)}
  .level .lv-tag{
    position:absolute;top:-8px;right:-6px;background:var(--mint);color:#fff;font-size:8px;font-weight:800;
    padding:3px 7px;border-radius:100px;letter-spacing:.02em;white-space:nowrap;
  }
  #levelPanel{
    background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 26px;
    box-shadow:0 14px 30px rgba(23,15,64,.05);
  }
  .lp-title{font-weight:800;font-size:17px;margin-bottom:8px;color:var(--ink)}
  .lp-def{font-size:13.5px;color:var(--body);line-height:1.6}
  @media(max-width:980px){.levels{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.levels{grid-template-columns:repeat(2,1fr)}}

  /* ===== Resultados ejemplo ===== */
  .results{
    display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;
  }
  .res-panel{
    background:linear-gradient(160deg, var(--dark) 0%, var(--dark-2) 100%);
    border-radius:28px;padding:30px 26px;color:#fff;
    box-shadow:0 40px 80px rgba(23,15,64,.22);
  }
  .res-panel .dp-badge{margin-bottom:22px}

  .res-copy h3{font-size:23px;font-weight:800;margin-bottom:14px;line-height:1.3;color:var(--ink)}
  .res-copy p{font-size:14px;line-height:1.65;margin-bottom:18px}
  .res-copy ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
  .res-copy li{font-size:13px;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
  .res-copy li svg{flex-shrink:0;margin-top:2px}
  .res-note{font-size:11px;color:var(--muted);font-style:italic}
  @media(max-width:900px){.results{grid-template-columns:1fr}.res-panel{max-width:440px;margin:0 auto}}

  /* Mini-barras subpilares dentro del panel oscuro */
  .mini-bars{margin-top:18px;display:flex;flex-direction:column;gap:10px}
  .mini-bar .mb-top{display:flex;justify-content:space-between;font-size:10.5px;color:#D9D4F0;margin-bottom:4px}
  .mini-bar .mb-track{height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
  .mini-bar .mb-fill{height:100%;border-radius:5px;width:0}

  /* ===== Testimonio + prensa ===== */
  .testi-card{
    border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(23,15,64,.14);
    margin-bottom:56px;
  }
  .testi-card img{width:100%;display:block}
  .press{padding-top:6px}
  .press .tt{text-align:center;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;font-weight:600}

  /* ===== Medidor de nivel de madurez (CTA) ===== */
  .gauge-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:26px}
  .gauge{width:212px;height:auto;overflow:visible;filter:drop-shadow(0 14px 30px rgba(0,0,0,.34))}
  .gauge .g-seg{fill:none;stroke-width:11;stroke-linecap:butt;opacity:.34}
  .gauge .g-tick{
    font-family:'Staatliches',sans-serif;font-size:13px;fill:#B6AEDD;
    text-anchor:middle;dominant-baseline:middle;
  }
  .gauge .g-tick.on{fill:#fff}
  .gauge .g-seg.lit{opacity:1}
  .gauge .g-needle{
    transform-origin:100px 100px;
    animation:needleScan 5.6s cubic-bezier(.42,0,.35,1) infinite;
    filter:drop-shadow(0 0 6px rgba(255,255,255,.55));
  }
  /* la aguja barre el arco como si midiera y se asienta en el nivel 3 */
  @keyframes needleScan{
    0%   {transform:rotate(-75deg)}
    14%  {transform:rotate(75deg)}
    26%  {transform:rotate(-48deg)}
    38%  {transform:rotate(58deg)}
    48%  {transform:rotate(-18deg)}
    57%  {transform:rotate(40deg)}
    65%  {transform:rotate(4deg)}
    72%  {transform:rotate(23deg)}
    78%  {transform:rotate(11deg)}
    84%,100%{transform:rotate(15deg)}
  }
  .gauge-cap{
    display:inline-flex;align-items:center;gap:8px;margin-top:14px;
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#9C93C9;
  }
  .gauge-cap .gc-dot{
    width:6px;height:6px;border-radius:50%;background:#3FD9AE;
    animation:livePulse 1.4s ease-in-out infinite;
  }


  /* ===== Frase destacada ===== */
  .statement{padding:86px 0 12px}
  .statement .st-inner{
    max-width:900px;margin:0 auto;text-align:center;position:relative;
  }
  .statement .st-tri{
    width:78px;height:69px;margin:0 auto 30px;display:block;overflow:visible;
    filter:drop-shadow(0 10px 22px rgba(23,15,64,.18));
  }
  /* cada pieza entra desde su propia dirección y se acopla */
  .statement .st-tri polygon{
    transform-box:fill-box;transform-origin:50% 50%;
    animation-duration:6.2s;animation-timing-function:cubic-bezier(.18,.9,.24,1);
    animation-iteration-count:infinite;
  }
  .statement .st-tri .pz-top  {animation-name:pzTop}
  .statement .st-tri .pz-left {animation-name:pzLeft}
  .statement .st-tri .pz-right{animation-name:pzRight}
  .statement .st-tri .pz-core {animation-name:pzCore}

  @keyframes pzTop{
    0%,4%   {opacity:0;transform:translate(0,-30px) scale(.7)}
    20%,74% {opacity:1;transform:translate(0,0) scale(1)}
    90%,100%{opacity:0;transform:translate(0,-30px) scale(.7)}
  }
  @keyframes pzLeft{
    0%,12%  {opacity:0;transform:translate(-32px,20px) scale(.7)}
    30%,74% {opacity:1;transform:translate(0,0) scale(1)}
    90%,100%{opacity:0;transform:translate(-32px,20px) scale(.7)}
  }
  @keyframes pzRight{
    0%,22%  {opacity:0;transform:translate(32px,20px) scale(.7)}
    40%,74% {opacity:1;transform:translate(0,0) scale(1)}
    90%,100%{opacity:0;transform:translate(32px,20px) scale(.7)}
  }
  /* la pieza central cierra el rompecabezas con un pequeño golpe de acople */
  @keyframes pzCore{
    0%,32%  {opacity:0;transform:translate(0,26px) scale(.5)}
    50%     {opacity:1;transform:translate(0,0) scale(1.16)}
    56%,74% {opacity:1;transform:translate(0,0) scale(1)}
    90%,100%{opacity:0;transform:translate(0,26px) scale(.5)}
  }
  .statement p{
    font-size:clamp(21px,2.9vw,33px);font-weight:700;line-height:1.4;letter-spacing:-.4px;
    color:var(--ink);
  }
  .statement p .st-hl{
    background:linear-gradient(92deg,var(--cyan),var(--violet) 58%,var(--mint));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .statement .st-rule{
    width:64px;height:3px;border-radius:3px;margin:30px auto 0;
    background:linear-gradient(92deg,var(--cyan),var(--violet),var(--mint));
  }
  @media(max-width:640px){.statement{padding:64px 0 8px}}

  /* ===== Reseñas ===== */
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:46px 0 10px}
  .quote{
    position:relative;border-radius:22px;padding:30px 26px 26px;
    background:linear-gradient(155deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 20px 44px rgba(23,15,64,.07), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter:blur(18px) saturate(1.1);
    transition:.28s cubic-bezier(.2,.8,.2,1);
    display:flex;flex-direction:column;
  }
  .quote:hover{transform:translateY(-5px);box-shadow:0 30px 60px rgba(23,15,64,.11)}
  .quote .q-mark{
    font-family:'Staatliches',sans-serif;font-size:52px;line-height:.6;margin-bottom:16px;
    background:linear-gradient(92deg,var(--cyan),var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .quote .q-text{font-size:13.5px;line-height:1.68;color:var(--body);flex:1}
  .quote .q-text b{color:var(--ink);font-weight:700}
  .quote .q-person{
    display:flex;align-items:center;gap:13px;margin-top:22px;
    padding-top:18px;border-top:1px solid rgba(52,43,127,.09);
  }
  .quote .q-person img{
    width:46px;height:46px;border-radius:50%;flex-shrink:0;object-fit:cover;
    box-shadow:0 4px 14px rgba(23,15,64,.16);
  }
  .quote .q-name{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.25}
  .quote .q-role{font-size:11px;color:var(--muted);line-height:1.35;margin-top:3px}
  @media(max-width:900px){.quotes{grid-template-columns:1fr;gap:18px;margin:34px 0 8px}}

  /* ===== CTA final ===== */
  .cf-lockup{
    display:block;width:min(330px,72%);height:auto;margin:0 auto 26px;
    opacity:.95;
  }
  @media(max-width:560px){.cf-lockup{width:min(260px,80%);margin-bottom:20px}}
  .cta-final{
    padding:6px 0 90px;
  }
  .cta-final .cf-inner{
    border:1px solid transparent;
    background:
      linear-gradient(158deg,#191048 0%,#221765 100%) padding-box,
      linear-gradient(140deg, rgba(111,230,255,.95) 0%, rgba(180,155,255,.45) 50%, rgba(140,245,220,.85) 100%) border-box;
    border-radius:32px;padding:62px 40px 66px;text-align:center;color:#fff;
    box-shadow:0 34px 76px rgba(23,15,64,.34);
    position:relative;overflow:hidden;
  }
  /* Mismo lenguaje que las tarjetas, un escalon mas arriba: el bloque tiene
     mucha mas superficie y aguanta mas color sin aplanar nada. */
  .cta-final .cf-inner::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(104% 92% at -8% -26%, rgba(138,228,255,.92), transparent 64%),
      radial-gradient(98% 88% at 118% 22%, rgba(206,182,255,.92), transparent 64%),
      radial-gradient(72% 60% at 20% 150%, rgba(140,246,222,.38), transparent 62%),
      radial-gradient(72% 60% at 50% 58%, rgba(17,10,48,.58), transparent 76%),
      linear-gradient(180deg, transparent 30%, rgba(15,9,44,.78) 78%);
    animation:auroraDrift 16s ease-in-out infinite alternate;
  }
  .cta-final .cf-inner::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:30px 30px,30px 30px;
    -webkit-mask-image:radial-gradient(94% 84% at 50% -8%, #000 6%, transparent 78%);
    mask-image:radial-gradient(94% 84% at 50% -8%, #000 6%, transparent 78%);
  }
  .cta-final .wrap-inner{max-width:680px;margin:0 auto;position:relative;z-index:1}
  .cta-final .eyebrow{color:rgba(255,255,255,.85)}
  .cta-final h2{font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.15;letter-spacing:-.5px;margin-bottom:16px;color:#fff}
  @media(max-width:560px){
    .cta-final h2{font-size:24px;line-height:1.22;letter-spacing:-.2px}
    .cta-final .cf-inner{padding:46px 24px 50px}
  }
  .cta-final p{color:#B6AEDD;font-size:15.5px;line-height:1.65;margin-bottom:30px}
  .cta-final .btn-cta{padding:18px 32px;font-size:16.5px}

  .conf{
    display:flex;gap:10px;align-items:flex-start;text-align:left;
    margin:30px auto 0;padding:14px 18px;max-width:520px;
    background:rgba(9,5,28,.42);border:1px solid rgba(255,255,255,.16);border-radius:14px;
    backdrop-filter:blur(4px);
  }
  .conf svg{flex-shrink:0;margin-top:2px}
  .conf p{font-size:12px;color:#B6AEDD;line-height:1.55;margin:0}
  .conf b{color:#fff;font-weight:700}

  /* ===== Footer ===== */
  footer{border-top:1px solid var(--line);padding:34px 0;background:var(--card)}
  .foot-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
  .foot-inner img{height:17px}
  .foot-inner .fr{font-size:12px;color:var(--muted)}
  .foot-inner .fr a{text-decoration:underline;text-decoration-color:var(--line-strong);color:var(--body)}