/*
 * Landing de Administra. Los colores, la tipografía, el espaciado y los radios salen de
 * tokens.css (copia de administra-marca/brand/tokens.css). Aquí solo se declaran los
 * auxiliares que la marca no publica, tomados de los temas Administra de la plataforma
 * (frontend/src/platform/themes/themes.css) y de los degradados del símbolo.
 */
:root{
  --on-profundo-muted:#C4CFDA;   /* --on-deep-muted */
  --profundo-line:#2E435A;       /* --surface-deep-raised */
  --panel-1:#2E435A;             /* --surface-deep-raised */
  --panel-2:#334E68;             /* primario */
  --panel-3:#4A6683;             /* panel bajo del símbolo */
  --positivo-soft:#DDF2E6;
  --negativo-soft:#FBE3E0;
  --alerta-soft:#FFF0C9;
  --shadow-float:0 28px 56px -16px #00000073;
  --space-16:64px;
  --space-24:96px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="administra-light"]){
    --panel-1:#1B2A3A;           /* profundo claro */
    --panel-2:#22364A;           /* --accent-strong claro */
    --panel-3:#334E68;
    --positivo-soft:#143328;
    --negativo-soft:#3C1F22;
    --alerta-soft:#382D12;
    --shadow-float:0 28px 56px -16px #000000CC;
  }
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface)}
.mp{container-type:inline-size;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:22px;-webkit-font-smoothing:antialiased}
.mp *{box-sizing:border-box}
.mp a{color:var(--primario);text-decoration:none}
.mp figure{margin:0}
.mp .stack{display:flex;flex-direction:column}
.mp .stack-tight{gap:2px}
.mp .stack-1{gap:var(--space-1)}
.mp .stack-5{gap:20px}
.mp .strong{font-weight:600}
.mp .lead{font-size:17px;line-height:26px}
.mp .btn.btn-sm{min-height:36px;font-size:13px;padding:0 14px}
.skip{position:absolute;left:var(--space-4);top:-48px;z-index:30;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);background:var(--primario);color:var(--on-primario);font-family:var(--font-sans);font-weight:600;text-decoration:none}
.skip:focus{top:var(--space-2)}
.mp :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.mp .wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--space-12)}
.mp .cifra{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}
.mp .muted{color:var(--ink-muted)}
.mp h2{margin:0;font-weight:800;font-size:48px;line-height:52px;letter-spacing:-0.03em}
.mp p{margin:0}
.mp .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--space-6);border-radius:var(--radius-sm);font-weight:600;font-size:16px;border:1px solid transparent;white-space:nowrap}
.mp .btn-primary{background:var(--primario);color:var(--on-primario)}
.mp .btn-mint{background:var(--acento);color:var(--on-acento);min-height:56px;padding:0 var(--space-8);font-size:17px}
.mp .btn-ghost-dark{border-color:var(--profundo-line);color:var(--on-profundo);min-height:56px;padding:0 var(--space-6);font-size:17px}
.mp .btn-ghost-dark:hover{background:var(--profundo-line)}

/* Nav */
.mp .nav{background:var(--surface-raised);border-bottom:1px solid var(--line)}
.mp .nav .wrap{display:flex;align-items:center;gap:var(--space-8);min-height:72px}
.mp .nav-links{display:flex;gap:var(--space-6);flex:1;margin-left:var(--space-4)}
.mp .nav-links a,.mp .nav-login{color:var(--ink);font-weight:600}
.mp .logo{height:30px;width:auto;display:block}
.mp .logo-dark{display:none}
@media (prefers-color-scheme: dark){
  .mp .logo-light{display:none}
  .mp .logo-dark{display:block}
}

/* Hero */
.mp .hero{background:var(--profundo);color:var(--on-profundo);overflow:hidden}
.mp .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:var(--space-16);padding-top:var(--space-24);padding-bottom:0;align-items:end}
.mp .hero-copy{display:flex;flex-direction:column;gap:var(--space-8);padding-bottom:var(--space-24)}
.mp .hero-logo{height:112px;width:auto;display:block;align-self:flex-start}
.mp .hero h1{margin:0;font-weight:800;font-size:clamp(56px,6.2cqw,96px);line-height:0.93;letter-spacing:-0.045em}
.mp .hero-lead{font-size:20px;line-height:30px;color:var(--on-profundo-muted);max-width:30em}
.mp .hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.mp .hero-note{font-size:14px;color:var(--on-profundo-muted)}

.mp .stage{display:flex;flex-direction:column;gap:var(--space-6)}
.mp .invoice{background:var(--surface-raised);color:var(--ink);border-radius:var(--radius-md);box-shadow:var(--shadow-float);padding:var(--space-6) 28px;display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:20px;width:400px}
.mp .inv-head{display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start}
.mp .inv-title{font-weight:800;font-size:18px;line-height:24px}
.mp .inv-small{font-size:12px;color:var(--ink-muted)}
.mp .inv-rule{height:1px;background:var(--line)}
.mp .inv-line{display:flex;justify-content:space-between;gap:var(--space-3)}
.mp .inv-total{display:flex;justify-content:space-between;align-items:baseline}
.mp .inv-total .cifra{font-weight:600;font-size:24px;line-height:30px}

.mp .effects{display:flex;align-items:flex-end;gap:var(--space-2);height:300px}
.mp .effect{flex:1 1 0;min-width:0;color:var(--on-profundo);clip-path:polygon(0 34px,100% 0,100% 100%,0 100%);padding:52px 16px 20px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.mp .effect span{display:block}
.mp .effect .lbl{font-size:13px;line-height:18px;color:var(--on-profundo-muted)}
.mp .effect .val{font-weight:800;font-size:22px;line-height:28px;white-space:nowrap}
.mp .effect .val.cifra{font-weight:600;font-size:17px}
.mp .e1{background:var(--panel-1);height:168px}
.mp .e2{background:var(--panel-2);height:236px}
.mp .e3{background:var(--panel-3);height:300px}
.mp .bar{flex:0 0 24px;height:276px;background:var(--acento);clip-path:polygon(0 8px,100% 0,100% 100%,0 100%);margin-left:var(--space-4)}

/* Sections */
.mp .sec{padding:var(--space-24) 0}
.mp .sec-raised{background:var(--surface-raised);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mp .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-8);margin-bottom:var(--space-12)}
.mp .sec-head p{max-width:26em;font-size:17px;line-height:26px;color:var(--ink-muted)}

.mp .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8)}
.mp .steps li{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-6);border-top:3px solid var(--primario)}
.mp .steps .n{font-family:var(--font-mono);font-weight:600;color:var(--primario)}
.mp .steps .t{font-weight:600;font-size:20px;line-height:28px}

/* App peek */
.mp .peek{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-12);align-items:center}
.mp .peek-copy{display:flex;flex-direction:column;gap:var(--space-6)}
.mp .peek-copy p{font-size:17px;line-height:26px;color:var(--ink-muted)}
.mp .peek-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mp .peek-list li{padding:14px 0;border-top:1px solid var(--line);font-weight:600}
.mp .peek-list li:last-child{border-bottom:1px solid var(--line)}
.mp .app{display:grid;grid-template-columns:176px minmax(0,1fr);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--surface);font-size:13px;line-height:18px}
.mp .side{background:var(--profundo);color:var(--on-profundo-muted);padding:var(--space-4) 0;display:flex;flex-direction:column;gap:2px}
.mp .side-logo{display:flex;align-items:center;gap:10px;padding:0 var(--space-4) var(--space-4);color:var(--on-profundo);font-weight:800;font-size:15px}
.mp .side-logo img{height:24px;width:auto}
.mp .side span{display:block;padding:9px var(--space-4);color:var(--on-profundo-muted);font-weight:600;border-left:3px solid transparent}
.mp .side span.on{color:var(--on-profundo);background:var(--profundo-line);border-left-color:var(--acento)}
.mp .main{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.mp .main-head{display:flex;justify-content:space-between;align-items:center}
.mp .main-head strong{font-size:20px;line-height:26px;font-weight:800}
.mp .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.mp .kpi{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:4px}
.mp .kpi .cifra{font-weight:600;font-size:16px;line-height:22px;color:var(--ink);white-space:nowrap}
.mp .kpi .neg{color:var(--negativo)}
.mp table{width:100%;font-size:12.5px;border-collapse:collapse;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.mp th{text-align:left;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-muted);padding:10px;border-bottom:1px solid var(--line)}
.mp td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.mp tr:last-child td{border-bottom:0}
.mp .r{text-align:right}
.mp .tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:var(--radius-sm)}
.mp .tag-neg{background:var(--negativo-soft);color:var(--negativo)}
.mp .tag-warn{background:var(--alerta-soft);color:var(--alerta)}
.mp .tag-ok{background:var(--positivo-soft);color:var(--positivo)}

/* Local */
.mp .local{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16)}
.mp .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-12)}
.mp .fact{padding:var(--space-6) 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.mp .fact strong{font-size:17px;line-height:24px}
.mp .fineprint{font-size:13px;line-height:20px;color:var(--ink-muted);margin-top:var(--space-6)}

/* Modules */
.mp .mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-12)}
.mp .mod{padding:var(--space-6) 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.mp .mod strong{font-size:17px;line-height:24px;display:flex;gap:10px;align-items:center}
.mp .soon{font-size:12px;font-weight:600;padding:2px 8px;border-radius:var(--radius-sm);border:1px solid var(--line);color:var(--ink-muted)}

/* Prices */
.mp .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);align-items:stretch}
.mp .plan{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3)}
.mp .plan .name{font-weight:600;font-size:20px;line-height:28px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.mp .plan .price{font-family:var(--font-mono);font-weight:600;font-size:40px;line-height:44px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.mp .plan .per{font-size:14px;color:var(--ink-muted)}
.mp .plan-feat{background:var(--primario);color:var(--on-primario);border-color:var(--primario)}
.mp .plan-feat .per,.mp .plan-feat .desc{color:inherit;opacity:0.86}
.mp .plan-next{border-style:dashed}
.mp .pill{font-size:12px;font-weight:600;padding:2px 8px;border-radius:var(--radius-sm);border:1px solid currentColor}
.mp .founders{margin-top:var(--space-8);padding:var(--space-6) var(--space-8);border-radius:var(--radius-md);background:var(--primario-soft);display:flex;justify-content:space-between;align-items:center;gap:var(--space-8)}
.mp .founders strong{font-size:17px}
.mp .extras{margin-top:var(--space-4);font-size:14px;color:var(--ink-muted)}

/* Band + footer */
.mp .band{background:var(--profundo);color:var(--on-profundo);padding:var(--space-24) 0}
.mp .band .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-12)}
.mp .band-copy{display:flex;flex-direction:column;gap:var(--space-8)}
.mp .band h2{font-size:64px;line-height:64px;letter-spacing:-0.04em;max-width:12em}
.mp .band img{height:44px;width:auto;display:block;align-self:flex-start}
.mp .foot{background:var(--profundo);color:var(--on-profundo-muted);border-top:1px solid var(--profundo-line);padding:var(--space-6) 0;font-size:13px;line-height:20px}
.mp .foot .wrap{display:flex;justify-content:space-between;gap:var(--space-6)}

/* Movimiento: una entrada orquestada en el hero y efectos ligados al desplazamiento.
   Solo transform, opacity y clip-path; nada se mueve solo en bucle. Sin soporte o con
   movimiento reducido, la página queda exactamente como la versión estática. */
.mp .nav{position:sticky;top:0;z-index:20}
.mp .steps li{position:relative}
/* clip, no hidden: hidden convierte el hero en contenedor de desplazamiento y anula sus líneas de tiempo. */
.mp .hero{overflow:clip}
.mp .effect{position:relative;isolation:isolate;clip-path:none}
.mp .e1,.mp .e2,.mp .e3{background:none}
.mp .effect::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(0 34px,100% 0,100% 100%,0 100%);transform-origin:bottom}
.mp .e1::before{background:var(--panel-1)}
.mp .e2::before{background:var(--panel-2)}
.mp .e3::before{background:var(--panel-3)}
@media (prefers-reduced-motion: no-preference){
  @keyframes mp-drop-in{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
  @keyframes mp-rise{from{transform:translateY(105%)}to{transform:none}}
  @keyframes mp-fade{from{opacity:0}to{opacity:1}}
  @keyframes mp-lead{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  /* 1. Entrada del hero: el titular, la factura y después los paneles que crecen como el símbolo. */
  .mp .hero-logo,.mp .hero h1{animation:mp-lead 700ms cubic-bezier(.2,.7,.2,1) both}
  .mp .hero h1{animation-delay:80ms}
  .mp .hero-lead,.mp .hero-actions,.mp .hero-note{animation:mp-lead 700ms cubic-bezier(.2,.7,.2,1) 180ms both}
  .mp .invoice{animation:mp-drop-in 700ms cubic-bezier(.2,.7,.2,1) 250ms both}
  .mp .e1{animation:mp-rise 800ms cubic-bezier(.2,.8,.2,1) 650ms both}
  .mp .e2{animation:mp-rise 800ms cubic-bezier(.2,.8,.2,1) 780ms both}
  .mp .e3{animation:mp-rise 800ms cubic-bezier(.2,.8,.2,1) 910ms both}
  .mp .bar{animation:mp-rise 900ms cubic-bezier(.2,.8,.2,1) 1060ms both}
  .mp .e1 span{animation:mp-fade 400ms ease 1250ms both}
  .mp .e2 span{animation:mp-fade 400ms ease 1380ms both}
  .mp .e3 span{animation:mp-fade 400ms ease 1510ms both}

  @supports (animation-timeline: view()){
    @keyframes mp-nav{to{box-shadow:var(--shadow-lg);border-bottom-color:transparent}}
    @keyframes mp-grow-1{to{transform:scaleY(1.12)}}
    @keyframes mp-grow-2{to{transform:scaleY(1.24)}}
    @keyframes mp-grow-3{to{transform:scaleY(1.36)}}
    @keyframes mp-lift{to{transform:translateY(-72px)}}
    @keyframes mp-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @keyframes mp-step{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:none}}
    @keyframes mp-tilt{from{opacity:.35;transform:perspective(1800px) rotateX(16deg) translateY(80px) scale(.94)}to{opacity:1;transform:none}}
    @keyframes mp-row{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}

    /* 2. La barra superior se asienta con sombra en cuanto empiezas a bajar. */
    .mp .nav{animation:mp-nav linear both;animation-timeline:scroll(nearest);animation-range:0 160px}

    /* 3. Al salir del hero, los paneles siguen creciendo y la factura sube: el negocio crece. */
    .mp .effects{view-timeline-name:--mp-hero}
    .mp .e1::before{animation:mp-grow-1 linear both;animation-timeline:--mp-hero;animation-range:exit 0% exit 90%}
    .mp .e2::before{animation:mp-grow-2 linear both;animation-timeline:--mp-hero;animation-range:exit 0% exit 90%}
    .mp .e3::before{animation:mp-grow-3 linear both;animation-timeline:--mp-hero;animation-range:exit 0% exit 90%}
    .mp .bar{transform-origin:bottom;animation:mp-rise 900ms cubic-bezier(.2,.8,.2,1) 1060ms both,mp-grow-3 linear both;animation-timeline:auto,--mp-hero;animation-range:normal,exit 0% exit 90%;animation-composition:replace,add}
    .mp .invoice{animation:mp-drop-in 700ms cubic-bezier(.2,.7,.2,1) 250ms both,mp-lift linear both;animation-timeline:auto,view();animation-range:normal,exit 0% exit 100%;animation-composition:replace,add}

    /* 4. Los pasos se completan en orden: la línea de cada uno se llena mientras bajas. */
    .mp .steps{view-timeline-name:--mp-steps}
    .mp .steps li{border-top-color:var(--line)}
    .mp .steps li::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--primario);transform-origin:left;animation:mp-fill linear both;animation-timeline:--mp-steps}
    .mp .steps li > *{animation:mp-step linear both;animation-timeline:--mp-steps}
    .mp .steps li:nth-child(1)::before,.mp .steps li:nth-child(1) > *{animation-range:cover 18% cover 30%}
    .mp .steps li:nth-child(2)::before,.mp .steps li:nth-child(2) > *{animation-range:cover 28% cover 40%}
    .mp .steps li:nth-child(3)::before,.mp .steps li:nth-child(3) > *{animation-range:cover 38% cover 50%}
    .mp .steps li:nth-child(4)::before,.mp .steps li:nth-child(4) > *{animation-range:cover 48% cover 60%}

    /* 5. La aplicación se endereza al entrar y la cartera aparece fila por fila. */
    .mp .app{animation:mp-tilt linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .mp .app{view-timeline-name:--mp-app}
    .mp tbody tr{animation:mp-row linear both;animation-timeline:--mp-app}
    .mp tbody tr:nth-child(1){animation-range:cover 14% cover 26%}
    .mp tbody tr:nth-child(2){animation-range:cover 18% cover 30%}
    .mp tbody tr:nth-child(3){animation-range:cover 22% cover 34%}
    .mp tbody tr:nth-child(4){animation-range:cover 26% cover 38%}
    .mp tbody tr:nth-child(5){animation-range:cover 30% cover 42%}
  }
}

/* Phone width */
@container (max-width: 760px){
  .mp .wrap{padding:0 var(--space-4)}
  .mp .nav-links,.mp .nav-login{display:none}
  .mp .nav .wrap{justify-content:space-between;min-height:60px}
  .mp .nav .btn{min-height:44px;padding:0 var(--space-4);font-size:14px}
  .mp .logo{height:24px}
  .mp .hero .wrap{grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding-top:var(--space-12)}
  .mp .hero-copy{padding-bottom:0;gap:var(--space-6)}
  .mp .hero h1{font-size:52px}
  .mp .hero-logo{height:64px}
  .mp .hero-lead{font-size:17px;line-height:26px}
  .mp .btn-mint,.mp .btn-ghost-dark{width:100%}
  .mp .invoice{width:100%;padding:var(--space-4) 18px}
  .mp .effects{height:220px}
  .mp .effect{padding:44px 10px 14px}
  .mp .effect .val{font-size:16px;line-height:22px}
  .mp .effect .val.cifra{font-size:12px;white-space:normal}
  .mp .effect .lbl{font-size:12px}
  .mp .e1{height:132px}.mp .e2{height:176px}.mp .e3{height:220px}
  .mp .bar{flex-basis:12px;height:204px;margin-left:var(--space-1)}
  .mp .sec{padding:var(--space-16) 0}
  .mp h2{font-size:34px;line-height:38px}
  .mp .sec-head{flex-direction:column;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-8)}
  .mp .steps,.mp .facts,.mp .mods,.mp .plans,.mp .kpis{grid-template-columns:minmax(0,1fr)}
  .mp .steps{gap:var(--space-6)}
  .mp .peek,.mp .local{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .mp .app{grid-template-columns:minmax(0,1fr)}
  .mp .side{display:none}
  .mp .main{padding:var(--space-4)}
  .mp .hide-sm{display:none}
  .mp td.client{white-space:normal}
  .mp .founders{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .mp .band .wrap{flex-direction:column;align-items:stretch}
  .mp .band h2{font-size:40px;line-height:42px}
  .mp .band .btn{width:100%}
  .mp .foot .wrap{flex-direction:column}
}