/* ==========================================================================
   FerreApp — Landing de presentación
   Paleta: navy profundo + naranja industrial + neutros
   Tipografía: Poppins (títulos) + Inter (cuerpo)
   ========================================================================== */

:root{
  /* Marca */
  --brand:        #EA580C;
  --brand-bright: #F97316;
  --brand-dark:   #C2410C;
  --brand-soft:   #FFF3EA;
  --brand-ink:    #7C2D12;

  /* Tinta / neutros */
  --ink:     #0B1120;
  --ink-2:   #1E293B;
  --slate:   #475569;
  --slate-2: #64748B;
  --line:    #E5E8EE;
  --line-2:  #EDEFF3;

  /* Fondos */
  --bg:       #FFFFFF;
  --bg-soft:  #F6F7F9;
  --bg-soft2: #EFF1F4;

  /* Apoyo */
  --ok:    #16A34A;
  --ok-bg: #ECFDF3;
  --warn:  #D97706;
  --sky:   #0EA5E9;

  --radius:   14px;
  --radius-s: 10px;
  --radius-l: 22px;
  --shadow-sm: 0 1px 2px rgba(11,17,32,.05), 0 2px 6px rgba(11,17,32,.04);
  --shadow:    0 6px 18px rgba(11,17,32,.07), 0 2px 6px rgba(11,17,32,.05);
  --shadow-lg: 0 24px 60px rgba(11,17,32,.16), 0 8px 24px rgba(11,17,32,.10);
  --shadow-brand: 0 14px 30px rgba(234,88,12,.30);

  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-head: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:3px solid rgba(234,88,12,.55); outline-offset:2px; border-radius:6px; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Tipografía base ---------- */
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.18; letter-spacing:-.02em; font-weight:700; }

.h2{
  font-size:clamp(1.7rem, 1rem + 2.3vw, 2.65rem);
  font-weight:800;
  color:var(--ink);
}

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.container--narrow{ max-width:900px; }

.section{ padding:96px 0; position:relative; }
.section--soft{ background:var(--bg-soft); }
.section--dark{ background:var(--ink); color:#fff; }

.sec-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
.sec-head--light .h2{ color:#fff; }
.sec-head__lead{ margin-top:14px; color:var(--slate); font-size:1.08rem; }
.sec-head--light .sec-head__lead{ color:#94A3B8; }

.kicker{
  display:inline-block; font-family:var(--font-head); font-weight:700;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand); margin-bottom:14px;
}
.kicker--muted{ color:var(--slate-2); }
.kicker--onDark{ color:var(--brand-bright); }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-head); font-weight:600; font-size:.97rem;
  padding:.82em 1.5em; border-radius:var(--radius-s);
  transition:transform .18s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap; cursor:pointer; border:1.5px solid transparent;
}
.btn--sm{ padding:.62em 1.05em; font-size:.88rem; }
.btn--lg{ padding:.95em 1.8em; font-size:1.03rem; }
.btn--block{ width:100%; }

.btn--primary{
  background:linear-gradient(180deg,var(--brand-bright),var(--brand));
  color:#fff; box-shadow:var(--shadow-brand);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(234,88,12,.42); }

.btn--outline{
  background:#fff; color:var(--ink); border-color:var(--line);
}
.btn--outline:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
.btn--outline--light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn--outline--light:hover{ border-color:var(--brand-bright); color:var(--brand-bright); }

.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--bg-soft2); }

.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
}
.nav__inner{
  max-width:var(--container); margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; gap:24px;
}
.nav.scrolled{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line), 0 6px 22px rgba(11,17,32,.06);
}
.nav.scrolled .nav__inner{ padding-top:12px; padding-bottom:12px; }

.brand{ display:flex; align-items:center; gap:.55rem; font-family:var(--font-head); font-weight:800; font-size:1.32rem; }
.brand__mark{ color:var(--brand); display:flex; filter:drop-shadow(0 4px 8px rgba(234,88,12,.32)); }
.brand__text{ color:var(--ink); letter-spacing:-.02em; }
.brand__text span{ color:var(--brand); }

.nav__links{ display:flex; gap:6px; margin-left:auto; }
.nav__links a{
  font-family:var(--font-head); font-weight:500; font-size:.93rem; color:var(--ink-2);
  padding:.5rem .85rem; border-radius:8px; transition:color .18s, background .18s;
}
.nav__links a:hover{ color:var(--brand); background:var(--bg-soft); }

.nav__actions{ display:flex; gap:10px; }

.nav__burger{ display:none; flex-direction:column; gap:5px; padding:8px; margin-left:auto; }
.nav__burger span{ width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s; }
.nav__burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2){ opacity:0; }
.nav__burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column; gap:4px; padding:0 24px;
  background:#fff; border-bottom:1px solid var(--line);
  max-height:0; overflow:hidden; transition:max-height .35s var(--ease), padding .35s;
}
.nav__mobile.open{ max-height:420px; padding:14px 24px 22px; }
.nav__mobile a{ font-family:var(--font-head); font-weight:500; padding:.7rem .2rem; border-bottom:1px solid var(--line-2); }
.nav__mobile a.btn{ border:none; margin-top:10px; justify-content:center; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; padding:148px 0 0; overflow:hidden;
  background:
    radial-gradient(900px 480px at 88% -4%, rgba(234,88,12,.13), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%, #F6F7F9 100%);
}
.hero__glow{
  position:absolute; top:-160px; right:-120px; width:520px; height:520px;
  background:radial-gradient(circle, rgba(249,115,22,.30), transparent 65%);
  filter:blur(40px); pointer-events:none;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line-2) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(900px 420px at 50% 0%, #000, transparent 75%);
          mask-image:radial-gradient(900px 420px at 50% 0%, #000, transparent 75%);
  opacity:.6; pointer-events:none;
}
.hero__inner{
  position:relative; max-width:var(--container); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.05fr 1.15fr; gap:54px; align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--line);
  padding:.42rem .85rem; border-radius:999px;
  font-family:var(--font-head); font-weight:600; font-size:.8rem; color:var(--ink-2);
  box-shadow:var(--shadow-sm); margin-bottom:22px;
}
.eyebrow__dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(234,88,12,.18); }

.hero h1{
  font-size:clamp(2.2rem, 1.1rem + 3.6vw, 3.85rem);
  font-weight:800; letter-spacing:-.03em; color:var(--ink);
}
.hero h1 .hl{
  color:var(--brand);
  background:linear-gradient(180deg, transparent 62%, rgba(249,115,22,.22) 62%);
}
.hero__lead{
  margin:22px 0 30px; font-size:1.13rem; color:var(--slate); max-width:540px;
}
.hero__lead strong{ color:var(--ink); font-weight:600; }

.hero__cta{ display:flex; gap:13px; flex-wrap:wrap; }
.hero__points{
  display:flex; gap:22px; flex-wrap:wrap; margin-top:26px;
}
.hero__points li{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--font-head); font-weight:500; font-size:.92rem; color:var(--ink-2);
}
.hero__points svg{ color:var(--ok); }

/* ---- Visual del hero ---- */
.hero__visual{ position:relative; }
.hero__badge{
  position:absolute; z-index:5;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:.7rem 1rem;
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-head);
}
.hero__badge strong{ font-weight:800; font-size:1.15rem; color:var(--brand); }
.hero__badge span{ font-size:.78rem; color:var(--slate); font-weight:500; }
.hero__badge--1{ top:18px; left:-26px; flex-direction:column; align-items:flex-start; gap:0; }
.hero__badge--2{ bottom:34px; right:-22px; }
.hero__badge--2 svg{ color:var(--ok); }
.hero__badge--2 span{ color:var(--ink-2); font-weight:600; font-size:.82rem; }

/* ---- Trustbar ---- */
.trustbar{
  position:relative; max-width:var(--container); margin:64px auto 0; padding:26px 24px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
}
.trustbar > span{
  font-family:var(--font-head); font-weight:700; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--slate-2);
}
.trustbar__items{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.trustbar__items span{ font-family:var(--font-head); font-weight:600; color:var(--ink-2); font-size:.95rem; }
.trustbar__items i{ color:var(--brand); font-style:normal; }

/* ==========================================================================
   BROWSER MOCKUP
   ========================================================================== */
.browser{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.browser--lg{ transform:perspective(1600px) rotateY(-7deg) rotateX(2deg); transition:transform .5s var(--ease); }
.browser--lg:hover{ transform:perspective(1600px) rotateY(0) rotateX(0); }

.browser__bar{
  display:flex; align-items:center; gap:12px;
  background:#F1F2F5; border-bottom:1px solid var(--line); padding:9px 13px;
}
.browser__dots{ display:flex; gap:6px; }
.browser__dots i{ width:11px; height:11px; border-radius:50%; background:#D4D7DE; }
.browser__dots i:nth-child(1){ background:#FF5F57; }
.browser__dots i:nth-child(2){ background:#FEBC2E; }
.browser__dots i:nth-child(3){ background:#28C840; }
.browser__url{
  flex:1; display:flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid var(--line); border-radius:7px;
  padding:.32rem .7rem; font-size:.78rem; color:var(--slate-2);
  font-family:var(--font-body);
}
.browser__url svg{ color:var(--ok); flex-shrink:0; }
.browser__body{ background:#fff; }

/* ==========================================================================
   APP MOCKUP (hero — panel completo)
   ========================================================================== */
.app{ display:grid; grid-template-columns:178px 1fr; min-height:392px; }
.app__side{ background:var(--ink); color:#CBD5E1; padding:16px 12px; }
.app__logo{ font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:#fff; padding:4px 8px 14px; }
.app__logo span{ color:var(--brand-bright); }
.app__user{
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.06); border-radius:9px; padding:.5rem; margin-bottom:14px;
}
.app__avatar{
  width:30px; height:30px; border-radius:7px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-bright),var(--brand));
  color:#fff; font-family:var(--font-head); font-weight:700; font-size:.72rem;
  display:flex; align-items:center; justify-content:center;
}
.app__user strong{ display:block; font-size:.72rem; color:#fff; font-family:var(--font-head); }
.app__user small{ font-size:.64rem; color:#94A3B8; }

.app__nav{ display:flex; flex-direction:column; gap:1px; }
.app__navlabel{
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:#64748B; padding:11px 8px 4px; font-family:var(--font-head); font-weight:700;
}
.app__nav a{
  display:flex; align-items:center; gap:.5rem;
  padding:.42rem .55rem; border-radius:7px; font-size:.76rem; color:#CBD5E1;
  font-family:var(--font-head); font-weight:500;
}
.app__nav a.is-active{ background:var(--brand); color:#fff; }

.ni{ width:14px; height:14px; flex-shrink:0; border-radius:3px; background:currentColor; opacity:.85;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.ni--grid{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/%3E%3C/svg%3E"); }
.ni--box{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4zM3 7v10l9 4 9-4V7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4zM3 7v10l9 4 9-4V7'/%3E%3C/svg%3E"); }
.ni--layers{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l10 5-10 5L2 7zM2 12l10 5 10-5M2 17l10 5 10-5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l10 5-10 5L2 7zM2 12l10 5 10-5M2 17l10 5 10-5'/%3E%3C/svg%3E"); }
.ni--tag{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8l10 10-8 8L3 11zM7 7h.01'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8l10 10-8 8L3 11zM7 7h.01'/%3E%3C/svg%3E"); }
.ni--cart{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h4l3 13h11l2-9H6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h4l3 13h11l2-9H6'/%3E%3C/svg%3E"); }
.ni--doc{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v14H6zM14 2v6h6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v14H6zM14 2v6h6'/%3E%3C/svg%3E"); }
.ni--store{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9l1-5h14l1 5v2H4zM5 11v9h14v-9'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9l1-5h14l1 5v2H4zM5 11v9h14v-9'/%3E%3C/svg%3E"); }

.app__main{ background:var(--bg-soft); padding:18px; }
.app__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.app__top h3{ font-size:1rem; color:var(--ink); }
.app__pill{
  font-family:var(--font-head); font-weight:600; font-size:.66rem;
  background:var(--ok-bg); color:var(--ok); padding:.28rem .6rem; border-radius:999px;
}
.app__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.stat{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:.7rem .65rem;
}
.stat__ico{
  width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.stat__ico .ni{ width:13px; height:13px; }
.stat--a .stat__ico{ background:var(--brand-soft); color:var(--brand); }
.stat--b .stat__ico{ background:#E7F0FF; color:#2563EB; }
.stat--c .stat__ico{ background:var(--ok-bg); color:var(--ok); }
.stat strong{ display:block; font-family:var(--font-head); font-weight:800; font-size:1.2rem; color:var(--ink); }
.stat small{ font-size:.62rem; color:var(--slate-2); }

.app__panel{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:.85rem; }
.app__panelhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.app__panelhead strong{ font-family:var(--font-head); font-size:.8rem; color:var(--ink); }
.app__panelhead span{ font-size:.66rem; color:var(--brand); font-family:var(--font-head); font-weight:600; }
.app__list li{
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; color:var(--ink-2); padding:.4rem 0; border-top:1px solid var(--line-2);
}
.app__list li em{ margin-left:auto; font-style:normal; font-size:.62rem; color:var(--slate-2); }
.dotok,.dotwarn{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dotok{ background:var(--ok); }
.dotwarn{ background:var(--warn); }

/* ==========================================================================
   PROPUESTA — split
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.split__half{ padding:14px 4px; }
.split__half--card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l);
  padding:38px 34px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.split__half--card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--brand-bright),var(--brand));
}
.split__half .h2{ font-size:clamp(1.4rem,1rem + 1.4vw,1.95rem); margin-top:6px; }

.painlist{ margin-top:20px; display:flex; flex-direction:column; gap:13px; }
.painlist li{ display:flex; gap:.7rem; color:var(--slate); font-size:1rem; }
.painlist li strong{ color:var(--ink); font-weight:600; }
.painlist__x,.painlist__ok{
  flex-shrink:0; width:24px; height:24px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.78rem;
}
.painlist__x{ background:#FEE7E7; color:#DC2626; }
.painlist__ok{ background:var(--ok-bg); color:var(--ok); }

/* ==========================================================================
   CARACTERÍSTICAS
   ========================================================================== */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.feature:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:#fff; }
.feature__ico{
  width:54px; height:54px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.feature__ico--1{ background:var(--brand-soft); color:var(--brand); }
.feature__ico--2{ background:#FEF3DD; color:#B45309; }
.feature__ico--3{ background:#E7F0FF; color:#2563EB; }
.feature__ico--4{ background:#E7F8EE; color:var(--ok); }
.feature__ico--5{ background:#E6F6FD; color:var(--sky); }
.feature__ico--6{ background:#F0EBFE; color:#7C3AED; }
.feature h3{ font-size:1.16rem; margin-bottom:8px; color:var(--ink); }
.feature p{ color:var(--slate); font-size:.97rem; }

/* ==========================================================================
   PASOS (sección oscura)
   ========================================================================== */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  counter-reset:step;
}
.steps__item{
  position:relative; padding:30px 24px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius);
}
.steps__num{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px; margin-bottom:16px;
  background:linear-gradient(160deg,var(--brand-bright),var(--brand));
  font-family:var(--font-head); font-weight:800; font-size:1.25rem; color:#fff;
  box-shadow:var(--shadow-brand);
}
.steps__item h3{ font-size:1.18rem; color:#fff; margin-bottom:7px; }
.steps__item p{ color:#94A3B8; font-size:.95rem; }
.steps__item:not(:last-child)::after{
  content:""; position:absolute; top:52px; right:-14px; width:28px; height:2px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 5px, transparent 5px 10px);
}

/* ==========================================================================
   TOUR — el recorrido del programa
   ========================================================================== */
.tour{ display:flex; flex-direction:column; gap:34px; }
.tour__step{
  display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l);
  padding:44px; box-shadow:var(--shadow-sm);
}
.tour__step--rev{ direction:rtl; }
.tour__step--rev > *{ direction:ltr; }

.tour__badge{
  display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.74rem;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--brand-soft); color:var(--brand);
  padding:.4rem .8rem; border-radius:999px; margin-bottom:14px;
}
.tour__badge--final{ background:var(--ok-bg); color:var(--ok); }
.tour__text h3{ font-size:clamp(1.4rem,1rem + 1.2vw,1.85rem); color:var(--ink); margin-bottom:10px; }
.tour__text p{ color:var(--slate); font-size:1.03rem; }
.tour__cta{ text-align:center; margin-top:46px; }

.linkbtn{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-head); font-weight:600; font-size:.95rem; color:var(--brand);
  padding:.6rem .2rem; transition:gap .18s var(--ease), color .18s;
}
.linkbtn svg{ transition:transform .18s var(--ease); }
.linkbtn:hover{ color:var(--brand-dark); }
.linkbtn:hover svg{ transform:translate(2px,-2px); }

/* ---- Mini app mockup (rail + screen) ---- */
.mini{ display:grid; grid-template-columns:38px 1fr; min-height:248px; }
.mini__rail{
  background:var(--ink); display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:16px 0;
}
.r-dot{ width:16px; height:16px; border-radius:5px; background:rgba(255,255,255,.14); }
.r-dot.is-active{ background:var(--brand); }
.mini__screen{ background:var(--bg-soft); padding:16px; }
.mini__head{ margin-bottom:12px; }
.mini__head strong{ font-family:var(--font-head); font-size:.92rem; color:var(--ink); }

.mini__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:12px; }
.mtile{ background:#fff; border:1px solid var(--line); border-radius:9px; padding:.6rem; border-left:3px solid; }
.mtile--a{ border-left-color:var(--brand); }
.mtile--b{ border-left-color:#2563EB; }
.mtile--c{ border-left-color:var(--ok); }
.mtile b{ font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--ink); display:block; }
.mtile span{ font-size:.6rem; color:var(--slate-2); }

.mini__block{ background:#fff; border:1px solid var(--line); border-radius:9px; padding:.7rem; display:flex; flex-direction:column; gap:8px; }
.bar{ height:9px; border-radius:5px; background:var(--line); display:block; }
.bar--60{ width:60%; } .bar--75{ width:75%; } .bar--90{ width:90%; }

.mini__search{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:.5rem .65rem; font-size:.74rem; color:var(--slate-2); margin-bottom:11px;
}
.mini__search span{ width:13px; height:13px; border:2px solid var(--slate-2); border-radius:50%; position:relative; }
.mini__search span::after{ content:""; position:absolute; right:-4px; bottom:-3px; width:6px; height:2px; background:var(--slate-2); transform:rotate(45deg); }

.mini__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:.45rem; }
.pcard__img{
  display:block; height:34px; border-radius:5px; margin-bottom:6px;
  background:linear-gradient(135deg,#EEF0F4,#E2E5EB);
}
.pcard b{ font-size:.6rem; color:var(--ink); display:block; line-height:1.3; margin-bottom:5px; }
.pcard__act{
  display:block; text-align:center; font-family:var(--font-head); font-weight:600;
  font-size:.56rem; padding:.28rem; border-radius:5px;
  background:var(--brand); color:#fff;
}
.pcard__act--on{ background:var(--ok-bg); color:var(--ok); }

.mtable{ background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden; font-size:.68rem; }
.mtable th{
  background:var(--bg-soft2); text-align:left; padding:.5rem .6rem;
  font-family:var(--font-head); font-weight:700; color:var(--slate); font-size:.6rem;
  text-transform:uppercase; letter-spacing:.04em;
}
.mtable td{ padding:.5rem .6rem; border-top:1px solid var(--line-2); color:var(--ink-2); }
.mtable td:first-child{ font-weight:500; }
.chip{
  font-family:var(--font-head); font-weight:700; font-size:.6rem;
  background:var(--brand-soft); color:var(--brand); padding:.15rem .45rem; border-radius:999px;
}

.dropzone{
  border:2px dashed var(--line); border-radius:10px; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:1.3rem; margin-bottom:11px; color:var(--slate-2);
}
.dropzone svg{ color:var(--brand); }
.dropzone span{ font-size:.7rem; }
.rowok{
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; color:var(--ink-2); padding:.32rem 0;
}
.rowok i{ width:13px; height:13px; border-radius:50%; background:var(--ok); flex-shrink:0; position:relative; }
.rowok i::after{ content:""; position:absolute; left:4px; top:2.5px; width:3.5px; height:6px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }

.themes{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:12px; }
.theme{
  font-family:var(--font-head); font-weight:600; font-size:.72rem;
  padding:.6rem; border-radius:8px; border:1.5px solid var(--line); background:#fff;
  display:flex; align-items:center; gap:.45rem; color:var(--ink-2);
}
.theme::before{ content:""; width:14px; height:14px; border-radius:50%; }
.theme--clasico::before{ background:#C0392B; }
.theme--moderno::before{ background:#1A1A2E; }
.theme--industrial::before{ background:#FF6B35; }
.theme--natural::before{ background:#2E7D32; }
.theme.is-on{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(234,88,12,.14); }
.swatches{ display:flex; gap:7px; }
.swatches span{ width:30px; height:30px; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }

/* ---- Store mockup ---- */
.store{ min-height:248px; }
.store__head{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff; padding:.85rem 1rem; display:flex; align-items:center; justify-content:space-between;
}
.store__head strong{ font-family:var(--font-head); font-weight:700; font-size:.92rem; }
.store__cart{
  display:flex; align-items:center; gap:.3rem; font-family:var(--font-head); font-weight:700;
  font-size:.78rem; background:rgba(255,255,255,.18); padding:.3rem .6rem; border-radius:999px;
}
.store__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; padding:16px; background:var(--bg-soft); }
.sitem{ background:#fff; border:1px solid var(--line); border-radius:9px; padding:.55rem; }
.sitem__img{ display:block; height:54px; border-radius:6px; margin-bottom:7px; background:linear-gradient(135deg,#EEF0F4,#DEE2E9); }
.sitem b{ font-size:.66rem; color:var(--ink); display:block; }
.sitem em{ font-family:var(--font-head); font-style:normal; font-weight:800; font-size:.82rem; color:var(--brand); display:block; margin:3px 0 6px; }
.sitem__btn{
  display:block; text-align:center; font-family:var(--font-head); font-weight:600; font-size:.6rem;
  background:var(--ink); color:#fff; padding:.3rem; border-radius:5px;
}

/* ==========================================================================
   DEMO / DESCARGAR
   ========================================================================== */
.section--demo{ background:var(--ink); color:#fff; }
.demo{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.demo .h2{ color:#fff; }
.demo__lead{ color:#94A3B8; margin-top:14px; font-size:1.07rem; }

.demo__steps{ margin:28px 0; display:flex; flex-direction:column; gap:16px; }
.demo__steps li{ display:flex; gap:14px; }
.demo__n{
  flex-shrink:0; width:34px; height:34px; border-radius:9px;
  background:rgba(249,115,22,.16); color:var(--brand-bright);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; font-size:1rem;
}
.demo__steps strong{ font-family:var(--font-head); font-size:1.02rem; color:#fff; }
.demo__steps p{ color:#94A3B8; font-size:.93rem; margin-top:2px; }
code{
  font-family:'Courier New', monospace; font-size:.88em;
  background:rgba(255,255,255,.1); color:var(--brand-bright);
  padding:.1rem .4rem; border-radius:5px;
}
.demo__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.demo__note{
  display:flex; align-items:center; gap:.5rem; margin-top:18px;
  font-size:.86rem; color:#94A3B8;
}
.demo__note svg{ color:var(--warn); flex-shrink:0; }
.demo__note strong{ color:var(--brand-bright); }

/* Terminal */
.terminal{
  background:#0A0E1A; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.terminal__bar{
  display:flex; align-items:center; gap:12px; padding:10px 13px;
  background:#11162A; border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--font-head); font-size:.78rem; color:#94A3B8;
}
.terminal__body{
  padding:20px; font-family:'Courier New', monospace; font-size:.85rem; line-height:1.95;
}
.terminal__body p{ white-space:nowrap; }
.t-dim{ color:#5B6478; }
.t-cmd{ color:#fff; }
.t-out{ color:#94A3B8; }
.t-ok{ color:#34D399; }
.t-cursor{ margin-top:2px; }
.caret{ display:inline-block; width:8px; height:15px; background:var(--brand-bright); vertical-align:-2px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.demo__hint{
  margin-top:18px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-s);
  padding:16px 18px;
}
.demo__hint strong{ display:block; font-family:var(--font-head); color:#fff; font-size:.97rem; margin-bottom:3px; }
.demo__hint span{ color:#94A3B8; font-size:.9rem; }

/* ==========================================================================
   LICENCIA
   ========================================================================== */
.license{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
.license__col{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); padding:34px 32px;
}
.license__col--yes{ box-shadow:0 10px 30px rgba(22,163,74,.07); }
.license__col--no{ box-shadow:0 10px 30px rgba(220,38,38,.06); }
.license__col h3{ margin-bottom:18px; }
.license__tag{
  font-family:var(--font-head); font-weight:700; font-size:.92rem;
  padding:.4rem .9rem; border-radius:999px;
}
.license__tag--yes{ background:var(--ok-bg); color:var(--ok); }
.license__tag--no{ background:#FEE7E7; color:#DC2626; }
.license__col ul{ display:flex; flex-direction:column; gap:13px; }
.license__col li{ display:flex; gap:.65rem; color:var(--slate); font-size:1rem; }
.license__col li strong{ color:var(--ink); font-weight:600; }
.li-ok,.li-no{
  flex-shrink:0; width:22px; height:22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.72rem;
}
.li-ok{ background:var(--ok-bg); color:var(--ok); }
.li-no{ background:#FEE7E7; color:#DC2626; }

.license__legal{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--brand-soft); border:1px solid #FAD9BE; border-radius:var(--radius);
  padding:20px 24px; color:var(--brand-ink); font-size:.96rem; max-width:880px; margin:0 auto;
}
.license__legal svg{ color:var(--brand); flex-shrink:0; margin-top:3px; }
.license__legal strong{ font-weight:700; }

/* ==========================================================================
   PLANES / SERVICIOS
   ========================================================================== */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l);
  padding:34px 30px; display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.plan:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.plan--featured{
  border-color:transparent; position:relative;
  box-shadow:0 24px 50px rgba(234,88,12,.16);
  outline:2px solid var(--brand); outline-offset:-2px;
}
.plan__ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--brand-bright),var(--brand)); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.74rem;
  padding:.35rem 1rem; border-radius:999px; box-shadow:var(--shadow-brand); white-space:nowrap;
}
.plan__head{ padding-bottom:20px; border-bottom:1px solid var(--line-2); margin-bottom:20px; }
.plan__head h3{ font-size:1.25rem; color:var(--ink); }
.plan__price{ margin:10px 0 8px; }
.plan__price span{ font-family:var(--font-head); font-weight:800; font-size:1.85rem; color:var(--brand); }
.plan__desc{ color:var(--slate); font-size:.95rem; }
.plan__list{ display:flex; flex-direction:column; gap:11px; margin-bottom:24px; flex:1; }
.plan__list li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.95rem; color:var(--ink-2); }
.plan__list i{
  flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:var(--ok-bg); position:relative; margin-top:2px;
}
.plan__list i::after{
  content:""; position:absolute; left:6px; top:3.5px; width:4px; height:7px;
  border:solid var(--ok); border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ==========================================================================
   COMPARACIÓN
   ========================================================================== */
.compare{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l);
  overflow:hidden; box-shadow:var(--shadow);
}
.compare table{ font-size:.96rem; }
.compare th,.compare td{ padding:16px 20px; text-align:left; }
.compare thead th{
  font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--slate);
  background:var(--bg-soft); border-bottom:1px solid var(--line);
}
.compare thead th.compare__us{ color:var(--brand); }
.compare tbody td{ border-bottom:1px solid var(--line-2); }
.compare tbody tr:last-child td{ border-bottom:none; }
.compare tbody td:first-child{ font-weight:500; color:var(--ink); }
.compare td.x{ color:var(--slate-2); }
.compare td.ok{ color:var(--ok); font-weight:600; }
.compare th.compare__us,.compare td:last-child{
  background:var(--brand-soft);
}
.compare thead th.compare__us{ background:#FCE6D4; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ display:flex; flex-direction:column; gap:12px; }
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .2s, border-color .2s;
}
.faq__item[open]{ box-shadow:var(--shadow); border-color:#FAD9BE; }
.faq__item summary{
  list-style:none; cursor:pointer; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--font-head); font-weight:600; font-size:1.04rem; color:var(--ink);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__ico{ position:relative; width:20px; height:20px; flex-shrink:0; }
.faq__ico::before,.faq__ico::after{
  content:""; position:absolute; background:var(--brand); border-radius:2px;
  transition:transform .25s var(--ease);
}
.faq__ico::before{ top:9px; left:0; width:20px; height:2.5px; }
.faq__ico::after{ top:0; left:9px; width:2.5px; height:20px; }
.faq__item[open] .faq__ico::after{ transform:rotate(90deg); opacity:0; }
.faq__body{ padding:0 24px 22px; }
.faq__body p{ color:var(--slate); font-size:.99rem; }

/* ==========================================================================
   CTA FINAL / CONTACTO
   ========================================================================== */
.section--cta{
  background:
    radial-gradient(700px 360px at 20% 0%, rgba(234,88,12,.22), transparent 62%),
    radial-gradient(620px 320px at 90% 100%, rgba(14,165,233,.14), transparent 60%),
    var(--ink);
  color:#fff;
}
.finalcta{ text-align:center; max-width:760px; margin:0 auto; }
.finalcta h2{
  font-size:clamp(1.9rem, 1.1rem + 2.6vw, 3rem); font-weight:800; color:#fff;
  letter-spacing:-.03em;
}
.finalcta p{ color:#94A3B8; margin:14px auto 28px; font-size:1.1rem; max-width:560px; }
.finalcta__btns{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

.contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.contact__card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--radius); padding:24px 20px; text-align:center;
  transition:transform .2s var(--ease), border-color .2s, background .2s;
}
a.contact__card:hover{ transform:translateY(-4px); border-color:var(--brand); background:rgba(255,255,255,.08); }
.contact__ico{
  width:48px; height:48px; border-radius:12px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(249,115,22,.16); color:var(--brand-bright);
}
.contact__card strong{ display:block; font-family:var(--font-head); font-size:1rem; color:#fff; }
.contact__card span{ font-size:.9rem; color:#94A3B8; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:#070B14; color:#94A3B8; padding:64px 0 30px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 2fr; gap:48px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand--footer{ font-size:1.4rem; margin-bottom:14px; }
.brand--footer .brand__text{ color:#fff; }
.footer__brand p{ font-size:.95rem; max-width:330px; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.footer__col h4{ font-family:var(--font-head); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.footer__col a{ display:block; font-size:.93rem; padding:.32rem 0; transition:color .15s; }
.footer__col a:hover{ color:var(--brand-bright); }
.footer__bottom{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:24px; font-size:.85rem;
}
.footer__legal{ color:#5B6478; }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.totop{
  position:fixed; bottom:26px; right:26px; z-index:90;
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(180deg,var(--brand-bright),var(--brand)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-brand);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s, visibility .3s, transform .3s var(--ease);
}
.totop.show{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ transform:translateY(-3px); }

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; gap:48px; }
  .hero__visual{ max-width:560px; margin:0 auto; }
  .browser--lg{ transform:none; }
  .browser--lg:hover{ transform:none; }
  .demo{ grid-template-columns:1fr; gap:38px; }
  .footer__top{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__actions{ display:none; }
  .nav__burger{ display:flex; }
  .nav__mobile{ display:flex; }
  .features{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps__item:not(:last-child)::after{ display:none; }
  .plans{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .plan--featured{ order:-1; }
  .split{ grid-template-columns:1fr; }
  .license{ grid-template-columns:1fr; }
  .tour__step{ grid-template-columns:1fr; gap:26px; padding:30px; }
  .tour__step--rev{ direction:ltr; }
  .tour__visual{ order:2; }
  .contact{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .section{ padding:68px 0; }
  body{ font-size:15.5px; }
  .container{ padding:0 18px; }
  .hero{ padding-top:120px; }
  .hero__cta .btn,.demo__cta .btn,.finalcta__btns .btn{ width:100%; }
  .hero__cta,.demo__cta,.finalcta__btns{ width:100%; }
  .hero__badge{ display:none; }
  .features{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .sec-head{ margin-bottom:40px; }
  .tour__step,.split__half--card,.license__col,.plan{ padding:26px 22px; }
  .mini__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .footer__bottom{ flex-direction:column; gap:6px; }
  .compare th,.compare td{ padding:12px 12px; font-size:.86rem; }
  .trustbar__items i{ display:none; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .browser--lg{ transform:none; }
}