:root{
    --ink:#0A0E17;
    --paper:#FFFFFF;
    --paper-soft:#F6F8FC;
    --blue:#004AAD;
    --blue-deep:#00296B;
    --blue-tint:#EAF1FE;
    --blue-tint-2:#DCE9FD;
    --slate:#5B6472;
    --slate-soft:#8891A0;
    --line:#E4E8F0;
    --radius-lg:22px;
    --radius-md:14px;
    --radius-sm:8px;
    --maxw:1180px;
    --ease:cubic-bezier(.22,1,.36,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Space Grotesk',sans-serif;
    margin:0;
    letter-spacing:-0.02em;
    color:var(--ink);
  }
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .mono{
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:0.02em;
  }
  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 24px;
  }
  section{position:relative;}

  /* ---------- reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- nav ---------- */
  .nav{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;
    transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .nav.scrolled{
    border-bottom-color:var(--line);
    box-shadow:0 1px 0 rgba(10,14,23,.02);
  }
  .nav-inner{
    max-width:var(--maxw);
    margin:0 auto;
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .brand img{
    width:30px;
    height:30px;
    border-radius:8px;
    flex-shrink:0;
  }
  .brand-name{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    font-size:1.02rem;
    letter-spacing:-0.01em;
  }
  .nav-cta{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.78rem;
    font-weight:600;
    background:var(--ink);
    color:var(--paper);
    padding:9px 16px;
    border-radius:100px;
    white-space:nowrap;
    transition:background .25s var(--ease), transform .25s var(--ease);
  }
  .nav-cta:hover{background:var(--blue); transform:translateY(-1px);}

  /* ---------- signature: signal waves ---------- */
  .signal{
    position:absolute;
    pointer-events:none;
  }
  .wave-field{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
  }
  .wave-field svg{
    position:absolute;
  }
  .arc-drift{
    animation:driftfade 7s ease-in-out infinite;
    transform-origin:0% 100%;
  }
  .arc-drift.d2{ animation-delay:.5s; }
  .arc-drift.d3{ animation-delay:1s; }
  @keyframes driftfade{
    0%,100%{ opacity:.55; }
    50%{ opacity:1; }
  }

  /* ripple button */
  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    font-size:1rem;
    padding:17px 30px;
    border-radius:100px;
    border:none;
    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
  }
  .btn-primary{
    background:var(--blue);
    color:var(--paper);
    box-shadow:0 10px 26px -12px rgba(0,74,173,.55);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px -12px rgba(0,74,173,.62);
  }
  .btn-primary::before,
  .btn-primary::after{
    content:'';
    position:absolute;
    left:50%; top:50%;
    width:14px; height:14px;
    border:2px solid rgba(255,255,255,.9);
    border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
    z-index:-1;
  }
  .btn-primary:hover::before{
    animation:ripple 1.1s var(--ease) infinite;
  }
  .btn-primary:hover::after{
    animation:ripple 1.1s var(--ease) infinite .35s;
  }
  @keyframes ripple{
    0%{ transform:translate(-50%,-50%) scale(0); opacity:.8; }
    100%{ transform:translate(-50%,-50%) scale(9); opacity:0; }
  }
  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border:1.5px solid var(--line);
    transition:border-color .25s var(--ease), background .25s var(--ease);
  }
  .btn-ghost:hover{ border-color:var(--blue); background:var(--blue-tint); }

  /* ---------- hero ---------- */
  .hero{
    padding:64px 0 56px;
    position:relative;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:0.72rem;
    font-weight:600;
    color:var(--blue);
    background:var(--blue-tint);
    padding:7px 13px;
    border-radius:100px;
    margin-bottom:22px;
  }
  .eyebrow .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--blue);
  }
  h1.headline{
    font-size:clamp(2.15rem, 6vw, 3.6rem);
    line-height:1.06;
    font-weight:700;
    max-width:11ch;
  }
  h1.headline .accent{ color:var(--blue); }
  .sub{
    margin-top:22px;
    font-size:1.08rem;
    line-height:1.55;
    color:var(--slate);
    max-width:38ch;
  }
  .hero-actions{
    margin-top:34px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
  }
  .hero-tag{
    margin-top:26px;
    font-size:0.9rem;
    color:var(--slate-soft);
    font-weight:500;
  }
  .hero-visual{
    margin-top:52px;
    position:relative;
    border-radius:var(--radius-lg);
    background:linear-gradient(160deg, var(--blue-deep) 0%, var(--blue) 62%, #0862D6 100%);
    padding:40px 28px 34px;
    overflow:hidden;
    isolation:isolate;
  }
  .hero-visual .waves{
    position:absolute;
    right:-30px; top:-30px;
    opacity:.5;
  }
  .hero-visual-inner{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* ---------- section shell ---------- */
  .section{
    padding:76px 0;
    border-top:1px solid var(--line);
  }
  .section-head{
    max-width:46ch;
    margin-bottom:44px;
  }
  .kicker{
    font-size:0.74rem;
    font-weight:600;
    color:var(--blue);
    margin-bottom:12px;
    display:block;
  }
  h2.section-title{
    font-size:clamp(1.55rem, 4vw, 2.15rem);
    line-height:1.15;
    font-weight:700;
  }
  .section-desc{
    margin-top:14px;
    color:var(--slate);
    font-size:1rem;
    line-height:1.6;
  }

  /* ---------- steps (cómo funciona) ---------- */
  .steps{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  .step-card{
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:26px 24px;
    background:var(--paper);
    transition:border-color .3s var(--ease), transform .3s var(--ease);
  }
  .step-card:hover{ border-color:var(--blue); transform:translateY(-3px); }
  .step-num{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    font-weight:600;
    color:var(--blue);
    margin-bottom:14px;
    display:block;
  }
  .step-card h3{
    font-size:1.12rem;
    font-weight:600;
    margin-bottom:8px;
  }
  .step-card p{
    color:var(--slate);
    font-size:0.95rem;
    line-height:1.55;
  }

  .flow{
    margin-top:34px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.78rem;
    font-weight:600;
  }
  .flow-chip{
    background:var(--blue-tint);
    color:var(--blue-deep);
    padding:9px 15px;
    border-radius:100px;
  }
  .flow-arrow{ color:var(--slate-soft); }

  /* ---------- interactive business-model panel ---------- */
  .model-interactive{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
    margin-top:34px;
  }
  .step-card{ cursor:pointer; user-select:none; }
  .step-card.is-active{
    border-color:var(--blue);
    background:var(--blue-tint);
    box-shadow:inset 0 0 0 1px var(--blue);
  }
  .step-card.is-active .step-num{ color:var(--blue-deep); }
  .model-panel{
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    background:var(--paper-soft);
    min-height:200px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px 22px;
    position:relative;
    overflow:hidden;
  }
  .model-visual{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    text-align:center;
    animation:panelIn .45s var(--ease);
  }
  @keyframes panelIn{
    from{ opacity:0; transform:translateY(10px) scale(.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  .model-visual .m-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    font-weight:600;
    color:var(--blue-deep);
    letter-spacing:0.03em;
  }
  .model-visual svg{ display:block; }
  .model-visual svg text{ font-family:'IBM Plex Mono',monospace; }

  /* ---------- card demo section ---------- */
  .card-demo{
    display:grid;
    grid-template-columns:1fr;
    gap:36px;
    align-items:center;
  }
  .card-visual{
    background:var(--paper-soft);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:42px 26px;
    position:relative;
    overflow:hidden;
  }
  .card-visual-caption{
    margin-top:16px;
    font-size:0.78rem;
    color:var(--slate-soft);
    text-align:center;
  }
  .tap-scene{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    position:relative;
  }
  .nfc-card{
    width:170px;
    height:108px;
    border-radius:14px;
    background:linear-gradient(135deg,#0A1220 0%, #050810 100%);
    position:relative;
    box-shadow:0 20px 40px -18px rgba(10,14,23,.45);
    flex-shrink:0;
  }
  .nfc-card::before{
    content:'';
    position:absolute;
    left:16px; top:16px;
    width:26px; height:20px;
    border-radius:4px;
    background:linear-gradient(135deg,#C9A227,#8A6E14);
  }
  .nfc-card .nfc-word{
    position:absolute;
    left:16px; bottom:14px;
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    font-size:0.78rem;
    color:#fff;
    letter-spacing:0.02em;
  }
  .phone{
    width:70px;
    height:132px;
    border-radius:16px;
    background:#fff;
    border:6px solid var(--ink);
    position:relative;
    flex-shrink:0;
  }
  .phone::before{
    content:'';
    position:absolute;
    inset:6px;
    border-radius:9px;
    background:linear-gradient(160deg,var(--blue-tint),#fff);
  }
  .tap-waves{
    position:absolute;
    left:50%;
    top:38%;
    transform:translate(-50%,-50%);
  }
  .tap-waves svg{ overflow:visible; }
  .tap-arc{
    animation:pulseArc 2.4s var(--ease) infinite;
    opacity:0;
  }
  .tap-arc.a2{ animation-delay:.3s; }
  .tap-arc.a3{ animation-delay:.6s; }
  @keyframes pulseArc{
    0%{ opacity:0; transform:scale(.5); }
    30%{ opacity:.9; }
    100%{ opacity:0; transform:scale(1.3); }
  }

  /* ---------- real card photo ---------- */
  .card-photo{
    width:190px;
    filter:drop-shadow(0 22px 30px rgba(10,14,23,.20));
  }
  .hero-visual .card-photo{ width:170px; }

  /* ---------- tap-to-try demo (product section) ---------- */
  .tap-demo{
    position:relative;
    width:100%;
    min-height:300px;
    background:none;
    border:none;
    padding:8px 0 0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .demo-stage{ position:relative; display:flex; justify-content:center; }
  .tap-demo-scene{
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .tap-demo.result .tap-demo-scene{
    opacity:0;
    transform:scale(.94);
    pointer-events:none;
  }
  .phone-icon{
    position:absolute;
    top:-4px; right:44px;
    width:38px; height:70px;
    border:3px solid var(--ink);
    border-radius:11px;
    background:#fff;
    box-shadow:0 12px 20px -9px rgba(10,14,23,.28);
    transform:translateY(-30px) rotate(-10deg);
    transition:transform .55s var(--ease);
    z-index:2;
  }
  .phone-icon::after{
    content:'';
    position:absolute;
    left:50%; top:7px;
    width:12px; height:3px;
    background:var(--line);
    border-radius:2px;
    transform:translateX(-50%);
  }
  .tap-demo.tapping .phone-icon,
  .tap-demo.result .phone-icon{
    transform:translateY(6px) rotate(0deg);
  }
  .demo-waves{
    position:absolute;
    top:2px; right:34px;
    opacity:0;
    transition:opacity .15s ease;
    z-index:1;
  }
  .tap-demo.tapping .demo-waves{ opacity:1; }
  .tap-demo.tapping .demo-waves .tap-arc{ animation:pulseArc .9s var(--ease) infinite; }
  .tap-hint{
    display:block;
    margin-top:20px;
    font-size:0.72rem;
    color:var(--blue);
    letter-spacing:0.03em;
    transition:opacity .2s ease;
  }
  .tap-demo.tapping .tap-hint,
  .tap-demo.result .tap-hint{ opacity:0; }
  .tap-result{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    opacity:0;
    transform:scale(.92);
    transition:opacity .4s var(--ease) .12s, transform .4s var(--ease) .12s;
    pointer-events:none;
    padding:20px;
  }
  .tap-demo.result .tap-result{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
  }
  .result-stars{ color:#F5A623; font-size:1.35rem; letter-spacing:4px; }
  .result-text{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    font-size:1rem;
    max-width:22ch;
  }
  .result-again{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.68rem;
    color:var(--slate-soft);
  }

  .card-copy p.lead{
    font-size:1.14rem;
    line-height:1.55;
    font-weight:500;
  }
  .card-copy .fine{
    margin-top:16px;
    color:var(--slate);
    font-size:0.92rem;
    line-height:1.6;
  }

  /* ---------- why grid ---------- */
  .why-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
  .why-card{
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .why-icon{
    width:38px; height:38px;
    border-radius:10px;
    background:var(--blue-tint);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .why-icon svg{ width:19px; height:19px; }
  .why-card h3{ font-size:1.02rem; font-weight:600; margin-bottom:6px; }
  .why-card p{ color:var(--slate); font-size:0.93rem; line-height:1.55; }

  /* ---------- empezar (numbered list) ---------- */
  .start-list{
    display:flex;
    flex-direction:column;
  }
  .start-item{
    display:flex;
    gap:20px;
    padding:22px 0;
    border-bottom:1px solid var(--line);
  }
  .start-item:last-child{ border-bottom:none; }
  .start-num{
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:0.85rem;
    color:var(--paper);
    background:var(--ink);
    width:30px; height:30px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:background .3s var(--ease);
  }
  .start-item:hover .start-num{ background:var(--blue); }
  .start-item h3{ font-size:1rem; font-weight:600; margin-bottom:4px; }
  .start-item p{ color:var(--slate); font-size:0.93rem; line-height:1.5; }

  /* ---------- faq ---------- */
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-item:first-child{ border-top:1px solid var(--line); }
  .faq-q{
    width:100%;
    background:none;
    border:none;
    text-align:left;
    padding:22px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    cursor:pointer;
    font-family:'Space Grotesk',sans-serif;
    font-size:1rem;
    font-weight:600;
    color:var(--ink);
  }
  .faq-q .plus{
    width:22px; height:22px;
    flex-shrink:0;
    position:relative;
  }
  .faq-q .plus::before,
  .faq-q .plus::after{
    content:'';
    position:absolute;
    background:var(--ink);
    left:50%; top:50%;
    transition:transform .3s var(--ease), background .3s var(--ease);
  }
  .faq-q .plus::before{ width:14px; height:2px; transform:translate(-50%,-50%); }
  .faq-q .plus::after{ width:2px; height:14px; transform:translate(-50%,-50%); }
  .faq-item.open .faq-q .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
  .faq-item.open .faq-q .plus::before{ background:var(--blue); }
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  .faq-a-inner{
    padding-bottom:22px;
    color:var(--slate);
    font-size:0.94rem;
    line-height:1.6;
    max-width:60ch;
  }

  /* ---------- final CTA ---------- */
  .final{
    background:linear-gradient(165deg, var(--blue-deep) 0%, var(--blue) 100%);
    color:#fff;
    padding:80px 0 56px;
    position:relative;
    overflow:hidden;
  }
  .final .wave-field{ opacity:.35; }
  .final-inner{
    position:relative;
    z-index:1;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .final h2{
    font-size:clamp(1.7rem,5vw,2.5rem);
    color:#fff;
    max-width:16ch;
  }
  .final p{
    margin-top:16px;
    color:rgba(255,255,255,.82);
    font-size:1.02rem;
    max-width:38ch;
    line-height:1.55;
  }
  .final .btn-primary{
    margin-top:32px;
    background:#fff;
    color:var(--blue-deep);
    box-shadow:0 12px 30px -12px rgba(0,0,0,.35);
  }
  .final .btn-primary::before,
  .final .btn-primary::after{ border-color:rgba(0,74,173,.55); }

  footer{
    padding:40px 0 34px;
    text-align:center;
  }
  .footer-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:6px;
  }
  .footer-brand img{ width:24px; height:24px; border-radius:6px; }
  .footer-brand span{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    letter-spacing:0.02em;
    font-size:0.98rem;
  }
  .footer-tag{
    font-size:0.85rem;
    color:rgba(255,255,255,.65);
  }
  .footer-note{
    margin-top:18px;
    font-size:0.76rem;
    color:rgba(255,255,255,.5);
  }

  /* ---------- focus ---------- */
  a:focus-visible, button:focus-visible{
    outline:2.5px solid var(--blue);
    outline-offset:3px;
    border-radius:6px;
  }

  /* ---------- responsive ---------- */
  @media (min-width:720px){
    .hero{ padding:96px 0 80px; }
    .hero-grid{
      display:grid;
      grid-template-columns:1.05fr 0.95fr;
      gap:56px;
      align-items:center;
    }
    .hero-visual{ margin-top:0; }
    h1.headline{ max-width:13ch; }
    .steps{ grid-template-columns:repeat(3,1fr); }
    .why-grid{ grid-template-columns:repeat(2,1fr); }
    .card-demo{ grid-template-columns:1fr 1fr; }
    .section{ padding:100px 0; }
    .model-interactive{ grid-template-columns:1fr 1fr; align-items:stretch; gap:24px; }
    .steps{ grid-template-columns:1fr; }
    .model-panel{ min-height:auto; }
  }
  @media (min-width:1000px){
    h1.headline{ font-size:4rem; }
  }