
    <style>
    

      .matfy-sector-features {
        position: relative;
        overflow: hidden;
        padding: 7rem 0;
      }

      .matfy-sector-features::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
      }

      .matfy-sector-features .container-lg {
        position: relative;
        z-index: 2;
      }

      .matfy-sector-intro {
        max-width: 760px;
        margin: 0 auto 5rem;
        text-align: center;
      }

      .matfy-sector-intro .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .45rem .85rem;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 1.25rem;
      }

      .matfy-sector-intro .eyebrow::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
      }

      .matfy-sector-intro h2 {
        font-size: clamp(2.2rem, 4vw, 3.6rem);
        line-height: 1.08;
        letter-spacing: -.045em;
        margin-bottom: 1.2rem;
        color: #272332;
      }

      .matfy-sector-intro p {
        font-size: 1.12rem;
        line-height: 1.7;
        color: #6e6977;
        margin: 0;
      }

      .matfy-feature-points {
        display: flex;
        flex-wrap: wrap;
        gap: .55rem;
      }

      .matfy-feature-points span {
        padding: .48rem .75rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, .7);
        border: 1px solid rgba(50, 40, 70, .07);
        color: #65606d;
        font-size: .78rem;
        font-weight: 600;
      }


      /* =========================================================
            VISUAL CONTAINER
          ========================================================= */


      .matfy-visual-stage {
        position: relative;
        width: min(100%, 610px);
        min-height: 350px;
        border-radius: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
      }


      .matfy-floating-dot {
        position: absolute;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .8);
        animation: matfyFloat 4s ease-in-out infinite;
      }

      .matfy-floating-dot.dot-1 {
        top: 16%;
        left: 13%;
      }

      .matfy-floating-dot.dot-2 {
        top: 72%;
        right: 14%;
        width: 6px;
        height: 6px;
        animation-delay: 1s;
      }

      .matfy-floating-dot.dot-3 {
        top: 22%;
        right: 18%;
        width: 5px;
        height: 5px;
        animation-delay: 1.8s;
      }

      @keyframes matfyFloat {

        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-10px);
        }
      }


      /* =========================================================
          GENERIC SAAS WINDOW
        ========================================================= */

      .matfy-ui-window {
        position: relative;
        z-index: 2;
        width: 82%;
        background: rgba(255, 255, 255, .94);
        border: 1px solid rgba(50, 40, 70, .08);
        border-radius: 18px;
        box-shadow: 0 25px 60px rgba(40, 30, 60, .13), 0 4px 12px rgba(40, 30, 60, .05);
        overflow: hidden;
        transform: translateY(10px);
        transition: transform .7s cubic-bezier(.2, .8, .2, 1);
      }

      .feature-visual flex-sub.is-visible .matfy-ui-window {
        transform: translateY(0);
      }

      .matfy-window-top {
        height: 45px;
        padding: 0 15px;
        border-bottom: 1px solid #eeeaf2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(250, 249, 252, .85);
      }

      .matfy-window-dots {
        display: flex;
        gap: 5px;
      }

      .matfy-window-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #d8d4dd;
      }

      .matfy-window-title {
        font-size: 10px;
        color: #817a8c;
        font-weight: 700;
      }

      .matfy-window-body {
        padding: 18px;
      }


      /* =========================================================
            ASESORÍAS
          ========================================================= */

      .matters-advisory {
        background: radial-gradient(circle at 10% 15%, rgba(180, 145, 235, .25), transparent 32%), #faf7fd;
      }

      .matters-advisory::before {
        right: -160px;
        top: 80px;
        background: #b99be9;
      }

      .advisory-eyebrow {
        color: #7654ad;
        background: rgba(118, 84, 173, .09);
      }


      /* =========================================================
          ASESORÍA — 01 CLIENTES
        ========================================================= */

     

      .client-list {
        display: flex;
        flex-direction: column;
        gap: 9px;
      }

      .client-row {
        display: grid;
        grid-template-columns: 30px 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 9px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #eeeaf2;
      }

      .client-avatar {
        width: 28px;
        height: 28px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e9ddfa;
        color: #7654ad;
        font-size: 10px;
        font-weight: 800;
      }

      .client-info strong {
        display: block;
        font-size: 10px;
        color: #393441;
      }

      .client-info small {
        font-size: 8px;
        color: #9b96a3;
      }

      .client-status {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #55b9a4;
      }

      .client-row:nth-child(2) .client-avatar {
        background: #e0edff;
        color: #377dff;
      }

      .client-row:nth-child(3) .client-avatar {
        background: #ffe4e8;
        color: #d96c88;
      }

      .client-row:nth-child(4) .client-avatar {
        background: #fff0df;
        color: #df8d55;
      }


      /* =========================================================
          ASESORÍA — 02 DOCUMENTACIÓN
        ========================================================= */

    

      .document-layout {
        display: grid;
        grid-template-columns: 1fr 145px;
        gap: 12px;
      }

      .document-main {
        background: #fff;
        border: 1px solid #e7eaf1;
        border-radius: 13px;
        padding: 15px;
      }

      .document-toolbar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
      }

      .document-toolbar span {
        height: 7px;
        width: 65px;
        border-radius: 99px;
        background: #d9dce3;
      }

      .document-toolbar span:last-child {
        width: 30px;
      }

      .document-title-line {
        height: 11px;
        width: 65%;
        border-radius: 5px;
        background: #424652;
        margin-bottom: 13px;
      }

      .document-line {
        height: 6px;
        border-radius: 5px;
        background: #e1e3e7;
        margin-bottom: 8px;
      }

      .document-line.short {
        width: 62%;
      }

      .document-line.medium {
        width: 82%;
      }

      .document-signature {
        margin-top: 20px;
        height: 48px;
        border-top: 1px dashed #cfd3dc;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
      }

      .signature {
        width: 75px;
        height: 24px;
        border-bottom: 2px solid #377dff;
        border-radius: 50%;
        transform: rotate(-5deg);
      }

      .document-sidebar {
        display: flex;
        flex-direction: column;
        gap: 9px;
      }

      .doc-mini-card {
        padding: 11px;
        background: rgba(255, 255, 255, .9);
        border: 1px solid #e5e9f1;
        border-radius: 11px;
      }

      .doc-mini-icon {
        width: 25px;
        height: 25px;
        border-radius: 8px;
        background: #dceaff;
        margin-bottom: 8px;
      }

      .doc-mini-card:nth-child(2) .doc-mini-icon {
        background: #d9f3ec;
      }

      .doc-mini-card:nth-child(3) .doc-mini-icon {
        background: #ffe0e7;
      }

      .doc-mini-card span {
        display: block;
        height: 5px;
        width: 70%;
        border-radius: 5px;
        background: #d9dce3;
      }


      /* =========================================================
          ASESORÍA — 03 PLAZOS
        ========================================================= */

      .advisory-calendar {
        width: 76%;
        background: #fff;
        border-radius: 17px;
        border: 1px solid #f0e8e9;
        box-shadow: 0 22px 45px rgba(100, 50, 60, .1);
        overflow: hidden;
      }

      .calendar-header {
        padding: 14px 17px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f0ebee;
      }

      .calendar-header strong {
        font-size: 12px;
        color: #403843;
      }

      .calendar-header span {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        background: #fce0e7;
      }

      .calendar-grid {
        padding: 14px;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 7px;
      }

      .calendar-grid span {
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        color: #99929d;
        border-radius: 7px;
      }

      .calendar-grid span:nth-child(11),
      .calendar-grid span:nth-child(18),
      .calendar-grid span:nth-child(27) {
        background: #f6d7e0;
        color: #b94e70;
        font-weight: 700;
      }

      .calendar-grid span:nth-child(14),
      .calendar-grid span:nth-child(24) {
        background: #e2ddfa;
        color: #7654ad;
        font-weight: 700;
      }

      .calendar-deadline {
        margin: 0 14px 14px;
        padding: 10px;
        border-radius: 9px;
        background: #fff4f6;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .calendar-deadline strong {
        font-size: 9px;
        color: #8e4059;
      }

      .calendar-deadline span {
        font-size: 8px;
        color: #b26a7f;
      }


      /* =========================================================
        ASESORÍA — 04 INFORMES / KPIs
      ========================================================= */
   
      .kpi-dashboard {
        width: 82%;
      }

      .kpi-top {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
        margin-bottom: 10px;
      }

      .kpi-card {
        background: rgba(255, 255, 255, .95);
        border: 1px solid #e6e8ed;
        border-radius: 11px;
        padding: 11px;
      }

      .kpi-card small {
        display: block;
        font-size: 8px;
        color: #99939e;
        margin-bottom: 5px;
      }

      .kpi-card strong {
        display: block;
        font-size: 16px;
        color: #34313a;
      }

      .kpi-card em {
        display: block;
        font-size: 7px;
        color: #50a994;
        font-style: normal;
        margin-top: 4px;
      }

      .kpi-chart {
        background: rgba(255, 255, 255, .96);
        border: 1px solid #e6e8ed;
        border-radius: 13px;
        padding: 16px;
        height: 170px;
      }

      .chart-label {
        height: 7px;
        width: 80px;
        border-radius: 5px;
        background: #d6d9df;
        margin-bottom: 15px;
      }

      .chart-area {
        height: 105px;
        position: relative;
        overflow: hidden;
      }

      .chart-area::before {
        content: "";
        position: absolute;
        inset: 10px 0;
        background: repeating-linear-gradient(to bottom, transparent 0, transparent 25px, #eef0f3 26px);
      }

      .chart-line {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 18px;
        height: 70px;
      }

      .chart-line::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-top: 3px solid #7654ad;
        border-radius: 50%;
        transform: rotate(-7deg) skewX(-25deg);
        transform-origin: left center;
      }

      .chart-dot {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #7654ad;
        box-shadow: 0 0 0 5px rgba(118, 84, 173, .12);
        animation: kpiPulse 2.5s ease-in-out infinite;
      }

      .chart-dot.one {
        left: 30%;
        top: 42px;
      }

      .chart-dot.two {
        left: 61%;
        top: 25px;
        animation-delay: .5s;
      }

      .chart-dot.three {
        right: 8%;
        top: 3px;
        animation-delay: 1s;
      }

      @keyframes kpiPulse {

        0%,
        100% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.25);
        }
      }


     


      /* =========================================================
        MOBILE
      ========================================================= */

      @media (max-width: 991px) {
        .matfy-sector-features {
          padding: 5rem 0;
        }

        .matfy-sector-intro {
          margin-bottom: 4rem;
          padding: 0 1rem;
        }

        .feature-copy {
          max-width: none;
          text-align: center;
        }

        .matfy-feature-points {
          justify-content: center;
        }

        .feature-visual flex-sub {
          min-height: 330px;
        }

        .matfy-visual-stage {
          min-height: 315px;
          border-radius: 27px;
        }

        .matfy-ui-window {
          width: 88%;
        }

        .project-board,
        .kpi-dashboard,
        .results-dashboard,
        .team-dashboard {
          width: 90%;
        }

        .document-layout {
          grid-template-columns: 1fr;
        }

        .document-sidebar {
          display: none;
        }

        .advisory-calendar {
          width: 85%;
        }

        .team-dashboard {
          grid-template-columns: 1fr;
        }

        .team-side {
          display: none;
        }

        .time-dashboard {
          width: 84%;
        }
      }

      @media (max-width: 575px) {
        .matfy-sector-features {
          padding: 4rem 0;
        }

        .feature-visual flex-sub {
          min-height: 285px;
        }

        .matfy-visual-stage {
          min-height: 275px;
        }

        .feature-copy h3 {
          font-size: 1.9rem;
        }

        .feature-copy .feature-lead {
          font-size: 1rem;
        }

        .project-columns {
          gap: 5px;
        }

        .project-column {
          padding: 6px;
        }

        .project-card {
          padding: 6px;
        }

        .project-card strong {
          font-size: 7px;
        }

        .results-main {
          gap: 6px;
        }

        .results-chart,
        .results-metrics {
          padding: 10px;
        }

      }


      /* =========================================================
        REDUCE MOTION
      ========================================================= */

      @media (prefers-reduced-motion: reduce) {

        .matfy-ui-window,
        .matfy-floating-dot,
        .chart-dot,
        .project-progress span,
        .time-bar span,
        .results-chart-lines span,
        .time-live i {
          animation: none !important;
          transition: none !important;
        }


      }
    </style>