/* ============================================================
   TradeFix — estilo SaaS claro (referencia: intiza.com)
   Archivo · blanco · índigo · gradiente hero · mockups de panel
   ============================================================ */
:root{
  --ink:#1A1A1A; --muted:#65667F; --soft:#8A8BA0;
  --brand:#4C49BD; --brand-2:#6A5AE0; --brand-3:#8A6FF0; --brand-ink:#3A38A0; --link:#2E2AE0;
  --bg:#FFFFFF; --bg-soft:#F5F6FC; --bg-soft-2:#EEEFFA; --panel:#FFFFFF;
  --line:#E7E8F2; --line-2:#EFF0F7;
  --ok:#17B26A; --ok-bg:#E7F7EF; --warn:#F5A623; --warn-bg:#FDF3E1; --bad:#EF4444; --bad-bg:#FDECEC; --info:#2E90FA; --info-bg:#E8F2FE;

  --f: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-1:.8125rem; --s0:1rem; --s1:1.125rem; --s2:1.375rem;
  --h4:clamp(1.15rem,1.05rem + .4vw,1.35rem);
  --h3:clamp(1.5rem,1.2rem + 1vw,1.9rem);
  --h2:clamp(1.9rem,1.4rem + 1.9vw,2.6rem);
  --h1:clamp(2.3rem,1.6rem + 3vw,3.5rem);

  --sp:clamp(3.5rem,2.4rem + 5vw,6.5rem);
  --rad:10px; --rad-sm:6px; --rad-lg:18px; --rad-pill:100px;
  --maxw:1180px;
  --shadow-sm:0 2px 10px rgba(26,26,50,.06);
  --shadow:0 18px 45px -20px rgba(40,38,110,.28);
  --shadow-card:0 24px 60px -28px rgba(40,38,110,.35);
  --ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{ font-family:var(--f); font-size:var(--s0); line-height:1.6; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden }
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
::selection{ background:var(--brand); color:#fff }

/* layout */
.wrap{ width:min(100% - 2.4rem,var(--maxw)); margin-inline:auto }
.section{ padding-block:var(--sp); position:relative }
.section.soft{ background:var(--bg-soft) }
.grid{ display:grid; gap:clamp(1.4rem,3vw,2.4rem) }
@media(min-width:800px){ .cols-2{ grid-template-columns:repeat(2,1fr) } .cols-3{ grid-template-columns:repeat(3,1fr) } .cols-4{ grid-template-columns:repeat(4,1fr) } }

/* tipografía */
h1,h2,h3,h4{ font-weight:700; line-height:1.15; letter-spacing:-.015em; color:var(--ink) }
h1{ font-size:var(--h1); line-height:1.08 } h2{ font-size:var(--h2) } h3{ font-size:var(--h3) } h4{ font-size:var(--h4) }
p{ max-width:62ch } .lead{ font-size:var(--s1); color:var(--muted); line-height:1.6 }
.muted{ color:var(--muted) } .brandc{ color:var(--brand) }
.eyebrow{ display:inline-block; font-size:var(--s-1); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin-bottom:.9rem }
.section-head{ max-width:640px; margin-bottom:2.6rem } .section-head.center{ margin-inline:auto; text-align:center }
.section-head p{ margin-top:.8rem }

/* botones */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-weight:600; font-size:var(--s0);
  padding:.8em 1.4em; border-radius:var(--rad-sm); transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s; min-height:46px; white-space:nowrap }
.btn svg{ width:1.05em; height:1.05em; transition:transform .2s var(--ease) }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 10px 24px -12px rgba(76,73,189,.7) }
.btn-primary:hover{ background:var(--brand-ink); transform:translateY(-2px) }
.btn-white{ background:#fff; color:var(--brand); box-shadow:var(--shadow-sm) }
.btn-white:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(0,0,0,.3) }
.btn-outline{ border:1.5px solid var(--line); color:var(--ink); background:#fff }
.btn-outline:hover{ border-color:var(--brand); color:var(--brand) }
.btn-lg{ padding:1em 1.7em; min-height:52px }
.btn:hover svg{ transform:translateX(3px) }
.link-arrow{ display:inline-flex; align-items:center; gap:.5em; color:var(--brand); font-weight:600 }
.link-arrow svg{ width:1.1em; height:1.1em; transition:transform .2s var(--ease) } .link-arrow:hover svg{ transform:translateX(4px) }

/* nav */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem clamp(1rem,4vw,2.2rem); transition:background .3s,box-shadow .3s; color:#fff }
.nav.scrolled{ background:var(--brand); box-shadow:0 6px 24px -10px rgba(40,38,110,.5) }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.4rem; letter-spacing:-.02em; color:#fff }
.brand .mark{ width:34px; height:34px; flex:none }
.nav-links{ display:none; gap:.3rem; align-items:center }
.nav-links a{ font-size:.98rem; font-weight:500; color:#fff; opacity:.9; padding:.5rem .85rem; border-radius:var(--rad-sm); transition:opacity .2s,background .2s }
.nav-links a:hover,.nav-links a[aria-current="page"]{ opacity:1; background:rgba(255,255,255,.12) }
.nav-right{ display:none; align-items:center; gap:.7rem }
@media(min-width:1000px){ .nav-links{ display:flex } .nav-right{ display:flex } }
.burger{ display:inline-flex; flex-direction:column; gap:5px; padding:.55rem; border-radius:8px; border:1px solid rgba(255,255,255,.35) }
.burger span{ width:20px; height:2px; background:#fff; transition:transform .3s,opacity .3s }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger.open span:nth-child(2){ opacity:0 }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
@media(min-width:1000px){ .burger{ display:none } }
.mobile-menu{ position:fixed; inset:0; z-index:99; display:grid; align-content:center; gap:.3rem; padding:2rem;
  background:var(--brand); transform:translateY(-100%); transition:transform .45s var(--ease); visibility:hidden }
.mobile-menu.open{ transform:none; visibility:visible }
.mobile-menu a{ font-size:1.6rem; font-weight:600; color:#fff; padding:.35rem 0; opacity:.92 }
.mobile-menu .btn{ margin-top:1.2rem; justify-self:start }

/* hero */
.hero{ position:relative; padding:9rem 0 clamp(3.5rem,6vw,6rem); color:#fff; overflow:hidden;
  background:linear-gradient(120deg,#3F3CB0 0%,#4C49BD 42%,#6A5AE0 78%,#8A6FF0 100%) }
.hero::after{ content:""; position:absolute; right:-10%; top:-30%; width:60%; height:120%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%) }
.hero-grid{ display:grid; gap:2.5rem; align-items:center; position:relative }
@media(min-width:920px){ .hero-grid{ grid-template-columns:1.05fr .95fr } }
.hero h1{ color:#fff }
.hero .lead{ color:rgba(255,255,255,.9); margin-top:1.2rem; max-width:44ch; font-size:var(--s2) }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem }
.hero-note{ margin-top:1.3rem; font-size:.9rem; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:.5rem }
.hero-note svg{ width:1.1em; height:1.1em }

/* ---- mockups de panel (reemplazan fotos) ---- */
.mock{ position:relative }
.mock-card{ background:#fff; border-radius:var(--rad-lg); box-shadow:var(--shadow-card); color:var(--ink); overflow:hidden }
.mock-head{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.1rem; border-bottom:1px solid var(--line-2) }
.mock-head .t{ font-weight:700; font-size:.95rem } .mock-head .dots{ display:flex; gap:.35rem }
.mock-head .dots i{ width:9px; height:9px; border-radius:50%; background:var(--line); display:block }
.mock-row{ display:grid; grid-template-columns:1.4fr auto auto; gap:.8rem; align-items:center; padding:.7rem 1.1rem; border-bottom:1px solid var(--line-2); font-size:.85rem }
.mock-row .c{ display:flex; align-items:center; gap:.55rem }
.mock-row .av{ width:26px; height:26px; border-radius:50%; background:var(--bg-soft-2); color:var(--brand); font-size:.7rem; font-weight:700; display:grid; place-items:center }
.mock-row .date{ color:var(--muted); font-variant-numeric:tabular-nums }
.pill{ font-size:.72rem; font-weight:600; padding:.22rem .6rem; border-radius:var(--rad-pill); white-space:nowrap }
.pill.ok{ background:var(--ok-bg); color:#0E7A47 } .pill.info{ background:var(--info-bg); color:#1667C7 }
.pill.warn{ background:var(--warn-bg); color:#B26B00 } .pill.bad{ background:var(--bad-bg); color:#C42B2B }
.mock-float{ position:absolute; background:#fff; border-radius:var(--rad); box-shadow:var(--shadow-card); padding:1rem 1.1rem; }
.mock-float .k{ font-size:.72rem; color:var(--muted); font-weight:600 } .mock-float .v{ font-size:1.5rem; font-weight:800; color:var(--ink); line-height:1.1 }
.mock-float .up{ font-size:.75rem; color:var(--ok); font-weight:700 }
.bars{ display:flex; align-items:flex-end; gap:6px; height:54px; margin-top:.6rem }
.bars i{ width:12px; border-radius:3px 3px 0 0; background:var(--brand); opacity:.85; display:block }
.bars i.alt{ background:var(--brand-3) }

/* features alternadas */
.feature{ display:grid; gap:2.4rem; align-items:center }
@media(min-width:900px){ .feature{ grid-template-columns:1fr 1fr } .feature.rev .feature-media{ order:2 } }
.feature-media{ position:relative }
.feature-copy h2{ margin-bottom:1rem } .feature-copy p{ color:var(--muted); margin-bottom:1.4rem }
.feature-list{ display:grid; gap:.7rem; margin:1.2rem 0 1.6rem }
.feature-list li{ display:flex; gap:.6rem; align-items:flex-start; list-style:none; color:var(--ink) }
.feature-list .ic{ color:var(--ok); flex:none; margin-top:.15rem } .feature-list .ic svg{ width:20px; height:20px }

/* grilla de funciones */
.func{ background:var(--bg); border:1px solid var(--line); border-radius:var(--rad); padding:1.7rem; transition:transform .2s var(--ease),box-shadow .2s,border-color .2s }
.func:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent }
.func .ic{ width:52px; height:52px; border-radius:12px; background:var(--bg-soft-2); color:var(--brand); display:grid; place-items:center; margin-bottom:1.1rem }
.func .ic svg{ width:26px; height:26px }
.func h4{ margin-bottom:.5rem } .func p{ color:var(--muted); font-size:.95rem }

/* servicio al cliente (3 columnas con lista) */
.svc{ text-align:left } .svc .ic{ width:48px;height:48px;border-radius:12px;background:var(--bg-soft-2);color:var(--brand);display:grid;place-items:center;margin-bottom:1rem } .svc .ic svg{ width:24px;height:24px }
.svc h4{ margin-bottom:.7rem } .svc ul{ list-style:none; display:grid; gap:.5rem } .svc li{ color:var(--muted); display:flex; gap:.5rem; align-items:center } .svc li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none }

/* franja de confianza */
.trust{ text-align:center } .trust h3{ font-size:var(--h4); font-weight:600; color:var(--muted); margin-bottom:1.8rem }
.trust-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2.4rem }
.trust-chip{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--soft); font-size:1.05rem }
.trust-chip svg{ width:20px; height:20px; color:var(--brand) }
.stat-row{ display:flex; flex-wrap:wrap; gap:2.4rem; justify-content:center }
.stat b{ display:block; font-size:clamp(2rem,1.4rem+2vw,2.8rem); font-weight:800; color:var(--brand); line-height:1; font-variant-numeric:tabular-nums }
.stat span{ font-size:.9rem; color:var(--muted) }

/* reseñas / casos */
.rev-top{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; margin-bottom:2.2rem }
.rev-score{ display:flex; align-items:center; gap:.7rem } .rev-score .big{ font-size:2rem; font-weight:800; color:var(--brand) }
.stars{ display:inline-flex; gap:2px; color:#F5A623 } .stars svg{ width:17px; height:17px } .stars .off{ color:#E3E4EE }
.carousel{ overflow:hidden } .track{ display:flex; gap:1.2rem }
.rev-card{ flex:0 0 100%; background:#fff; border:1px solid var(--line); border-radius:var(--rad); padding:1.7rem; box-shadow:var(--shadow-sm) }
@media(min-width:720px){ .rev-card{ flex-basis:calc(50% - .6rem) } } @media(min-width:1020px){ .rev-card{ flex-basis:calc(33.333% - .8rem) } }
.rev-card .stars{ margin-bottom:1rem } .rev-card p{ color:var(--ink); font-size:1rem }
.rev-card .who{ margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--line-2); display:flex; align-items:center; gap:.7rem }
.rev-card .av{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-3)); color:#fff; font-weight:700; display:grid; place-items:center; flex:none }
.rev-card .who b{ font-weight:700; font-size:.95rem } .rev-card .who span{ color:var(--muted); font-size:.85rem; display:block }
.car-nav{ display:flex; gap:.6rem; margin-top:1.8rem }
.car-nav button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--brand); background:#fff; transition:.2s }
.car-nav button:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm) } .car-nav button svg{ width:18px; height:18px }

/* CTA band */
.cta{ border-radius:var(--rad-lg); padding:clamp(2.4rem,5vw,4rem); text-align:center; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(120deg,#3F3CB0,#4C49BD 55%,#6A5AE0) }
.cta::after{ content:""; position:absolute; right:-8%; top:-40%; width:50%; height:160%; background:radial-gradient(circle,rgba(255,255,255,.15),transparent 60%); pointer-events:none }
.cta > *{ position:relative } .cta h2{ color:#fff; margin-bottom:.7rem } .cta p{ color:rgba(255,255,255,.9); margin:0 auto 1.8rem; max-width:52ch }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center }

/* formularios */
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--rad); box-shadow:var(--shadow-sm) }
.field{ display:grid; gap:.4rem; margin-bottom:1.05rem }
.field label{ font-size:.9rem; font-weight:600; color:var(--ink) } .field label .req{ color:var(--brand) }
.field input,.field textarea,.field select{ width:100%; padding:.8rem .95rem; border:1.5px solid var(--line); border-radius:var(--rad-sm); font:inherit; font-size:.98rem; color:var(--ink); background:#fff; transition:border-color .2s,box-shadow .2s }
.field textarea{ resize:vertical; min-height:120px }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(76,73,189,.14) }
.field input::placeholder,.field textarea::placeholder{ color:var(--soft) }
.hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none }
.form-note{ font-size:.82rem; color:var(--muted); margin-top:.5rem }
.form-msg{ padding:.85rem 1rem; border-radius:var(--rad-sm); font-size:.92rem; margin-top:1rem; display:none }
.form-msg.ok{ display:block; background:var(--ok-bg); color:#0E7A47 } .form-msg.err{ display:block; background:var(--bad-bg); color:#C42B2B }
.rate{ display:inline-flex; gap:.3rem; direction:rtl } .rate input{ position:absolute; opacity:0; width:0 }
.rate label{ font-size:1.7rem; color:#E3E4EE; cursor:pointer; transition:color .15s; line-height:1 }
.rate label:hover,.rate label:hover ~ label,.rate input:checked ~ label{ color:#F5A623 }
.contact-item{ display:flex; gap:.9rem; align-items:center; padding:1.05rem 1.1rem; border:1px solid var(--line); border-radius:var(--rad); transition:border-color .2s,box-shadow .2s }
.contact-item:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm) }
.contact-item .ic{ width:42px; height:42px; border-radius:11px; background:var(--bg-soft-2); color:var(--brand); display:grid; place-items:center; flex:none } .contact-item .ic svg{ width:20px; height:20px }
.contact-item small{ display:block; font-size:.78rem; color:var(--muted) } .contact-item b{ font-weight:700 }

/* blog */
.post-card{ background:#fff; border:1px solid var(--line); border-radius:var(--rad); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease),box-shadow .2s }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.post-card .cover{ aspect-ratio:16/9; background:linear-gradient(120deg,var(--brand),var(--brand-3)); display:grid; place-items:center; color:#fff } .post-card .cover svg{ width:52px; height:52px; opacity:.9 }
.post-card .body{ padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1 }
.post-card .cat{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--brand) }
.post-card h3{ font-size:1.2rem } .post-card p{ color:var(--muted); font-size:.92rem; flex:1 }
.article{ max-width:720px; margin-inline:auto }
.article .meta{ color:var(--muted); font-size:.9rem; margin-bottom:2rem; display:flex; gap:1rem; flex-wrap:wrap }
.article h1{ margin:.6rem 0 1.2rem } .article h2{ font-size:var(--h3); margin:2.4rem 0 .9rem } .article h3{ font-size:var(--h4); margin:1.6rem 0 .6rem }
.article p{ color:#33343f; margin-bottom:1.1rem; max-width:none } .article ul{ margin:0 0 1.1rem 1.1rem; color:#33343f; display:grid; gap:.5rem } .article li::marker{ color:var(--brand) }
.article .callout{ padding:1.3rem 1.5rem; border-left:3px solid var(--brand); background:var(--bg-soft); border-radius:0 var(--rad-sm) var(--rad-sm) 0; margin:1.6rem 0 } .article .callout p{ margin:0; color:var(--ink) }

/* page hero (interiores claros) */
.page-hero{ background:linear-gradient(120deg,#3F3CB0,#4C49BD 60%,#6A5AE0); color:#fff; padding:8.5rem 0 clamp(3rem,5vw,4.5rem) }
.page-hero h1{ color:#fff } .page-hero .lead{ color:rgba(255,255,255,.9); margin-top:1rem; max-width:56ch }
.crumbs{ font-size:.85rem; color:rgba(255,255,255,.8); margin-bottom:1.2rem } .crumbs a:hover{ text-decoration:underline } .crumbs span{ color:#fff; font-weight:600 }

/* footer */
.footer{ background:#12121C; color:#C7C8D6; padding-block:3.4rem 2rem }
.footer-grid{ display:grid; gap:2rem } @media(min-width:760px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr } }
.footer .brand{ color:#fff } .footer h5{ font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:#8A8BA0; margin-bottom:1rem; font-weight:700 }
.footer a{ color:#C7C8D6; display:block; padding:.28rem 0; font-size:.95rem } .footer a:hover{ color:#fff }
.foot-brand p{ color:#8A8BA0; font-size:.92rem; margin-top:.9rem; max-width:32ch }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.1); font-size:.88rem; color:#8A8BA0 }

/* wa flotante */
.wa-float{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:90; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:#25D366; color:#fff; box-shadow:0 12px 30px -8px rgba(37,211,102,.6); transition:transform .2s } .wa-float:hover{ transform:scale(1.07) } .wa-float svg{ width:30px; height:30px }

/* utils + animación */
.center{ text-align:center } .mt-s{ margin-top:1rem } .mt-m{ margin-top:2rem } .mb-m{ margin-bottom:2rem }
.divider{ height:1px; background:var(--line); border:0; margin-block:var(--sp) }
/* ---- animación (Motion + fallback) ---- */
.js .reveal{ opacity:0 }
.reveal.in{ opacity:1 }
.tf-progress{ position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--brand),var(--brand-3)); z-index:200; pointer-events:none }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1 !important } .tf-progress{ display:none } }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }