/* Página de producto: hereda la tipografía y la paleta de gestioncompras.com. */
:root { --ink:#10243a; --muted:#40536a; --blue:#0868c6; --surface:#f7fbff; --line:#dce8f4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; color:var(--ink); background:#fff; font-family:Montserrat,Arial,sans-serif; font-size:17px; line-height:1.75; }
::selection { background:#d8eaff; color:var(--ink); }
a { color:var(--blue); text-underline-offset:4px; }
a:hover { color:#064b90; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; border-radius:3px; }
img { max-width:100%; height:auto; display:block; }
.wrap { width:min(1160px,calc(100% - 64px)); margin-inline:auto; }
.site-header { border-bottom:1px solid var(--line); background:#fff; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:100px; }
.header-inner nav { display:flex; align-items:center; gap:32px; }
.header-inner nav > a:not(.button) { color:var(--ink); text-decoration:none; font-size:15px; font-weight:500; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:12px 26px; border-radius:6px; background:var(--blue); color:#fff; font-size:15px; font-weight:600; line-height:1.5; text-align:center; text-decoration:none; transition:background .2s; }
.button:hover { background:#064b90; color:#fff; }
.skip-link { position:absolute; top:-100px; left:16px; padding:12px 20px; background:#fff; z-index:5; }
.skip-link:focus { top:12px; }
.hero { padding:28px 0 76px; background:var(--surface); }
.breadcrumb { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; margin-bottom:48px; }
h1,h2,h3 { margin:0; font-weight:600; line-height:1.2; text-wrap:balance; }
h1 { max-width:930px; font-size:clamp(34px,4.5vw,58px); letter-spacing:-.025em; }
h2 { font-size:clamp(28px,3vw,38px); letter-spacing:-.02em; }
h3 { font-size:23px; }
p { margin:0 0 18px; color:var(--muted); max-width:70ch; }
.lead { font-size:21px; line-height:1.65; max-width:780px; margin:26px 0 30px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; }
.text-link { font-size:15px; font-weight:600; }
p.hero-note { font-size:14px; margin:20px 0 0; }
.section { padding-block:80px; }
.intro { display:grid; grid-template-columns:1fr 1.45fr; gap:72px; }
.intro p:last-child { margin:0; }
.process { background:var(--surface); }
.steps { list-style:none; counter-reset:step; margin:40px 0 0; padding:0; }
.steps li { counter-increment:step; display:grid; grid-template-columns:42px minmax(0,1fr) 240px; gap:24px; padding:32px 0; border-top:1px solid var(--line); }
.steps li::before { content:counter(step); color:var(--blue); font-size:28px; font-weight:600; line-height:1.2; }
.steps h3 { margin-bottom:14px; }
.steps p { margin:0; }
.steps .step-detail { font-size:14px; padding-top:4px; }
.tracking { max-width:850px; }
.tracking h2 { margin-bottom:24px; }
.questions { border-top:1px solid var(--line); }
.narrow { max-width:850px; }
.questions h2 { margin-bottom:36px; }
details { border-bottom:1px solid var(--line); padding:22px 0; }
summary { cursor:pointer; font-size:18px; font-weight:600; line-height:1.5; }
details p { margin:18px 0 0; font-size:16px; }
.all-questions { display:inline-block; margin-top:30px; }
.demo { background:#0c2136; color:#fff; }
.demo-inner { display:flex; align-items:center; justify-content:space-between; gap:56px; }
.demo h2 { max-width:700px; }
.demo p { color:#d0deeb; margin:20px 0 0; max-width:700px; }
.demo .button { flex-shrink:0; }
.site-footer { padding:36px 0; }
.footer-inner { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; font-size:13px; }
.footer-inner p { margin:0; }
.footer-inner nav { display:flex; flex-wrap:wrap; gap:24px; }
@media(max-width:800px) { .intro { grid-template-columns:1fr; gap:28px; } .steps li { grid-template-columns:32px minmax(0,1fr); gap:18px; } .steps .step-detail { grid-column:2; } .demo-inner { flex-direction:column; align-items:flex-start; gap:30px; } .section { padding-block:56px; } }
@media(max-width:480px) { .wrap { width:calc(100% - 40px); } .header-inner { min-height:88px; gap:12px; } .header-inner img { width:120px; } .header-inner nav { gap:0; } .header-inner nav > a:not(.button) { display:none; } .header-inner .button { padding:12px 15px; font-size:13px; } .hero { padding-bottom:52px; } .breadcrumb { margin-bottom:32px; font-size:12px; } .lead { font-size:18px; } h3 { font-size:21px; } .hero-actions { gap:20px; } .steps li { padding:26px 0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }