:root {
      --ink: #0b1220;
      --ink-2: #162033;
      --muted: #5a6577;
      --paper: #f8fafc;
      --paper-2: #eef3f8;
      --line: rgba(17, 24, 39, .12);
      --blue: #2563eb;
      --cyan: #0e9bb8;
      --green: #188b57;
      --amber: #c77912;
      --white: #ffffff;
      --shadow: 0 22px 60px rgba(15, 23, 42, .16);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      line-height: 1.6;
    }

    img {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
    }

    .shell {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }

    .hero {
      min-height: 92vh;
      display: grid;
      align-items: end;
      color: var(--white);
      background:
        linear-gradient(90deg, rgba(6, 15, 30, .94) 0%, rgba(6, 15, 30, .78) 44%, rgba(6, 15, 30, .26) 100%),
        url("/assets/embedded-2.webp") center right / cover no-repeat;
      border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    .hero .shell {
      padding: 34px 0 84px;
    }

    .nav {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      background: rgba(6, 15, 30, .52);
      backdrop-filter: blur(18px);
    }

    .nav-inner {
      width: min(1180px, calc(100% - 40px));
      min-height: 72px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      color: var(--white);
      text-decoration: none;
    }

    .brand img {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      box-shadow: 0 10px 32px rgba(0, 0, 0, .22);
    }

    .brand span {
      color: rgba(255, 255, 255, .94);
      font-size: .98rem;
      font-weight: 760;
      white-space: nowrap;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 18px;
      color: rgba(255, 255, 255, .82);
      font-size: .94rem;
    }

    .nav-links a {
      text-decoration: none;
    }

    .profile-lockup {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-bottom: 34px;
    }

    .profile-lockup img {
      width: 108px;
      height: 108px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, .32);
      box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
    }

    .eyebrow {
      color: #67e8f9;
      font-size: .79rem;
      font-weight: 820;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3 {
      margin: 0;
      line-height: 1.04;
      letter-spacing: 0;
    }

    h1 {
      max-width: 780px;
      font-size: clamp(3rem, 7vw, 6.6rem);
    }

    .founder-line {
      margin: 12px 0 0;
      color: rgba(248, 250, 252, .76);
      font-size: clamp(1rem, 2vw, 1.34rem);
      font-weight: 720;
      letter-spacing: .02em;
    }

    .hero-copy {
      max-width: 730px;
      margin: 24px 0 0;
      color: rgba(248, 250, 252, .86);
      font-size: clamp(1.1rem, 2vw, 1.42rem);
    }

    .hero-actions,
    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .btn {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 18px;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: 8px;
      color: var(--white);
      background: rgba(255, 255, 255, .09);
      text-decoration: none;
      font-weight: 760;
    }

    .btn.primary {
      border-color: var(--blue);
      background: var(--blue);
      box-shadow: 0 18px 46px rgba(37, 99, 235, .32);
    }

    .btn.dark {
      color: var(--white);
      border-color: var(--ink);
      background: var(--ink);
    }

    .btn.light {
      color: var(--ink);
      border-color: var(--line);
      background: var(--white);
    }

    .section {
      padding: 78px 0;
    }

    .section.alt {
      background: var(--paper-2);
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(260px, .5fr);
      gap: 44px;
      align-items: end;
      margin-bottom: 34px;
    }

    h2 {
      font-size: clamp(2.2rem, 4.6vw, 4rem);
    }

    .lead {
      margin: 0;
      color: var(--muted);
      font-size: 1.08rem;
    }

    .capability-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .capability {
      min-height: 224px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
      box-shadow: 0 10px 32px rgba(15, 23, 42, .06);
    }

    .capability svg,
    .method-step svg {
      width: 34px;
      height: 34px;
      color: var(--blue);
      margin-bottom: 18px;
    }

    .capability:nth-child(2) svg {
      color: var(--green);
    }

    .capability:nth-child(3) svg {
      color: var(--amber);
    }

    .capability:nth-child(4) svg {
      color: var(--cyan);
    }

    h3 {
      font-size: 1.16rem;
      margin-bottom: 10px;
    }

    .capability p,
    .project p,
    .method-step p,
    .play-copy p {
      margin: 0;
      color: var(--muted);
    }

    .proof-band {
      color: var(--white);
      background:
        linear-gradient(90deg, rgba(8, 20, 38, .98), rgba(8, 20, 38, .84)),
        url("/assets/embedded-3.webp") center / cover no-repeat;
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .metric {
      padding: 22px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 8px;
      background: rgba(255, 255, 255, .08);
      backdrop-filter: blur(10px);
    }

    .metric strong {
      display: block;
      font-size: clamp(1.9rem, 4vw, 3rem);
      line-height: 1;
      margin-bottom: 10px;
    }

    .metric span {
      color: rgba(248, 250, 252, .76);
    }

    .method {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .method-step {
      position: relative;
      min-height: 226px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
    }

    .step-number {
      position: absolute;
      top: 18px;
      right: 18px;
      color: rgba(37, 99, 235, .18);
      font-size: 2.4rem;
      font-weight: 860;
      line-height: 1;
    }

    .projects {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .project {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
      box-shadow: 0 14px 40px rgba(15, 23, 42, .07);
    }

    .project-media {
      aspect-ratio: 16 / 10;
      background: var(--ink);
      overflow: hidden;
    }

    .project-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .project-body {
      padding: 22px;
    }

    .project-media img.control-gastos-media {
      object-position: center 27%;
    }

    .project.project-featured {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
    }

    .project-featured .project-media {
      min-height: 300px;
      aspect-ratio: auto;
      background: #071827;
    }

    .project-media img.ltv-media {
      padding: 42px;
      object-fit: contain;
      background: #071827;
    }

    .project-featured .project-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .project-type {
      display: inline-flex;
      margin-bottom: 12px;
      color: var(--blue);
      font-size: .79rem;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }


    .project-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
    }
    .project-video {
      display: inline-flex;
      align-items: center;
      margin-top: 18px;
      color: var(--blue);
      font-weight: 760;
      text-decoration: none;
    }

    .project-video:hover {
      color: #1d4ed8;
    }

    .tool-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
    }

    .tool-card {
      min-height: 210px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
    }

    .tool-card h3 {
      margin: 7px 0 10px;
      font-size: 1.06rem;
    }

    .tool-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.62;
    }

    .tool-kicker {
      color: var(--blue);
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 8px;
      color: #334155;
      background: #eaf0f7;
      font-size: .86rem;
      font-weight: 680;
    }

    .image-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 28px;
    }

    .image-panel {
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 8px;
      background: rgba(255, 255, 255, .08);
    }

    .image-panel img {
      width: 100%;
      height: 100%;
      min-height: 280px;
      object-fit: cover;
    }

    .play-card {
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr);
      gap: 34px;
      align-items: center;
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
      box-shadow: var(--shadow);
    }

    .play-card img {
      width: 220px;
      height: 220px;
      border-radius: 24px;
      box-shadow: 0 22px 54px rgba(15, 23, 42, .18);
    }

    .linkedin-connect {
      display: grid;
      gap: 16px;
      width: 100%;
      padding: 22px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 8px;
      background: rgba(255, 255, 255, .08);
    }

    .linkedin-connect h3 {
      margin: 6px 0 0;
      color: var(--white);
      font-size: 1.08rem;
    }

    .linkedin-badge-wrap {
      min-width: 0;
    }

    .linkedin-badge-wrap .LI-simple-link {
      display: none;
    }

    .quote {
      margin: 18px 0 0;
      padding: 18px 20px;
      border-left: 4px solid var(--blue);
      color: var(--ink-2);
      background: #eef5ff;
      font-size: 1.06rem;
      font-weight: 720;
    }

    .closing {
      color: var(--white);
      background: linear-gradient(135deg, #081426, #0d2c42 48%, #0b3f3b);
    }

    .closing .shell {
      display: grid;
      gap: 30px;
    }

    .closing-layout {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(280px, .45fr);
      gap: 40px;
      align-items: center;
    }

    .closing p {
      color: rgba(248, 250, 252, .78);
      margin: 18px 0 0;
      font-size: 1.1rem;
    }

    .closing-side {
      display: grid;
      gap: 18px;
      align-content: start;
    }

    .badge-list {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }

    .badge-list span {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 54px;
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 8px;
      background: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .84);
      font-weight: 700;
      text-align: center;
    }

    footer {
      padding: 28px 20px;
      color: #64748b;
      text-align: center;
      background: var(--white);
      border-top: 1px solid var(--line);
      font-size: .94rem;
    }

    @media (max-width: 980px) {
      .section-head,
      .closing-layout,
      .play-card {
        grid-template-columns: 1fr;
      }

      .capability-grid,
      .method,
      .metrics,
      .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .badge-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .projects {
        grid-template-columns: 1fr 1fr;
      }

      .project.project-featured {
        grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
      }

      .play-card img {
        width: 168px;
        height: 168px;
      }
    }

    @media (max-width: 680px) {
      .shell,
      .nav-inner {
        width: min(100% - 28px, 1180px);
      }

      .hero {
        min-height: 86vh;
        background-position: center right;
      }

      .hero .shell {
        padding-bottom: 56px;
      }

      .nav-links {
        display: none;
      }

      .profile-lockup {
        align-items: flex-start;
        flex-direction: column;
      }

      .profile-lockup img {
        width: 86px;
        height: 86px;
      }

      h1 {
        font-size: clamp(2.58rem, 15vw, 4.6rem);
      }

      .section {
        padding: 56px 0;
      }

      .capability-grid,
      .method,
      .metrics,
      .tool-grid,
      .projects,
      .image-grid {
        grid-template-columns: 1fr;
      }

      .image-panel img {
        display: block;
        height: auto;
        min-height: 0;
        object-fit: contain;
      }

      .project-media {
        aspect-ratio: 4 / 3;
      }

      .project.project-featured {
        grid-column: auto;
        grid-template-columns: 1fr;
      }

      .project-featured .project-media {
        min-height: 0;
        aspect-ratio: 4 / 3;
      }

      .btn {
        width: 100%;
      }

      .linkedin-badge-wrap {
        min-width: 0;
      }

      .badge-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  
  /* Servicio: integración de pasarelas de pago (tarjeta discreta, mismo componente que .capability) */
  .section.section-compact{padding:44px 0}
  .capability.capability-wide{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center}
  .capability.capability-wide svg{margin:0;align-self:start;color:var(--cyan)}
  .capability-wide-kickers{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .demo-badge{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:.04em}
  .capability-wide-copy h3{margin:6px 0 8px}
  .capability-wide-copy p{max-width:720px}
  .capability-wide-copy .chips{margin-top:14px}
  .capability-wide-action{display:grid;justify-items:end;gap:8px;text-align:right}
  .capability-wide-action .btn{min-height:42px;padding:0 16px;font-size:.95rem}
  .pay-note{max-width:220px;color:var(--muted);font-size:.84rem;line-height:1.4}
  @media (max-width:760px){
    .capability.capability-wide{grid-template-columns:1fr;gap:14px}
    .capability-wide-action{justify-items:start;text-align:left}
    .pay-note{max-width:none}
  }