/* CargoX · r20 · Artículo 01. Identidad existente; lectura natural y demostración explícita. */
:root { --fondo:#121316; --tinta:#F4F4EF; --muted:#B8B9BC; --line:rgba(244,244,239,.15); --red:#e5243f; --blue:#4A8CF7; color-scheme:dark; }
*,*::before,*::after { box-sizing:border-box; }
html { background:var(--fondo); color:var(--tinta); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; font:400 16px/1.6 'Inter',system-ui,sans-serif; }
h1,h2,h3,p,ul,ol,dl,dd,figure { margin:0; } ul,ol { padding:0; list-style:none; }
a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { color:inherit; cursor:pointer; }
button,a,label { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
[hidden] { display:none!important; } .defs { position:absolute; width:0; height:0; overflow:hidden; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.story-stage { width:min(100% - 64px,960px); margin-inline:auto; min-height:100svh; display:flex; flex-direction:column; border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top); scroll-margin-top:12px; }
.story-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:20px; font-size:12px; color:var(--muted); }
.story-header a { min-height:44px; display:inline-flex; align-items:center; gap:8px; } .story-header a .arrow { width:18px; transform:rotate(180deg); } .story-header span { text-align:right; } .story-header i { font-style:normal; padding-inline:5px; opacity:.5; }
.story-content { width:100%; padding-block:50px 56px; margin-block:auto; }
.eyebrow { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
h1,h2 { font-family:'Space Grotesk','Inter',system-ui,sans-serif; font-weight:500; letter-spacing:-.055em; line-height:1.06; max-width:850px; text-wrap:balance; }
h1 { font-size:clamp(46px,6.6vw,84px); } h2 { font-size:clamp(35px,5vw,64px); } h1 span,h2 span { color:#94969C; }
.lead { max-width:570px; color:var(--muted); font-size:17px; line-height:1.65; margin-top:24px; }
.hero-drawing { margin-block:36px; max-width:540px; } .diagram-label,.small-label { display:block; font-size:12px; color:var(--muted); }
.pallet-row { display:flex; align-items:end; gap:12px; padding-block:22px; }
.pallet-row svg { width:clamp(30px,7vw,70px); height:auto; }
.diagram-rule { display:flex; justify-content:space-between; gap:14px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.tarp-c { fill:var(--tinta); } .tarp-f { stroke:var(--fondo); stroke-width:1; fill:none; } .tarp-b { fill:#7C7E84; } .tarp-s { fill:transparent; }
.primary { min-height:52px; display:inline-flex; align-items:center; justify-content:space-between; gap:22px; padding:14px 20px; border-radius:999px; color:var(--fondo); background:var(--tinta); font-size:14px; font-weight:600; transition:background .16s,transform .16s; }
.primary:hover { background:white; transform:translateY(-2px); } .primary:active { transform:translateY(0); }
.arrow { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.text-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:14px; text-decoration:underline; text-underline-offset:5px; margin-top:24px; }
.micro { color:var(--muted); max-width:570px; font-size:12px; margin-top:15px; }
.comparison { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-block:32px 20px; }
.example { padding:28px; border:1px solid var(--line); border-radius:24px; background:rgba(244,244,239,.035); }
.example-heavy { border-color:rgba(74,140,247,.45); } .big-number { display:block; font:500 clamp(30px,4vw,48px)/1.2 'Space Grotesk',sans-serif; letter-spacing:-.04em; margin-top:12px; }
.big-number small { font:400 13px 'Inter',sans-serif; letter-spacing:0; color:var(--muted); }
.truck { width:100%; max-width:250px; height:auto; display:block; fill:var(--tinta); }
.truck .vid,.truck .llanta { fill:var(--fondo); } .truck .rin { fill:#8F9196; } .example .truck { margin-block:18px; }
.example h3 { font-size:17px; font-weight:500; } .example p { font-size:13px; color:var(--muted); margin-top:8px; }
.note { max-width:690px; font-size:13px; color:var(--muted); border-left:2px solid var(--blue); padding-left:15px; }
.lab { display:grid; grid-template-columns:1fr 1fr; margin-top:32px; border:1px solid var(--line); border-radius:26px; overflow:hidden; }
.lab-input { padding:28px; background:rgba(244,244,239,.035); } .lab-result { padding:28px; background:var(--tinta); color:var(--fondo); }
.lab h3 { font-size:15px; font-weight:500; } .counter { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-block:12px 24px; }
.counter button { width:48px; height:48px; background:none; border:1px solid var(--line); border-radius:50%; font-size:24px; }
.counter button:disabled { opacity:.35; cursor:default; } .counter output { font:500 54px/1.15 'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums; }
.weight-control { padding:0; margin:0; border:0; } .weight-control legend { font-size:13px; color:var(--muted); margin-bottom:12px; }
.weight-options { display:flex; gap:8px; } .weight-options label { flex:1; cursor:pointer; position:relative; }
.weight-options input { position:absolute; width:1px; height:1px; opacity:0; }
.weight-options span { min-height:46px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:12px; font-size:13px; transition:border-color .15s,background .15s; }
.weight-options input:checked+span { background:var(--tinta); color:var(--fondo); border-color:var(--tinta); } .weight-options input:focus-visible+span { outline:3px solid var(--blue); outline-offset:3px; }
.pallet-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; min-height:76px; align-content:start; margin-top:26px; }
.pallet-grid svg { width:100%; height:auto; } .load-facts { border-top:1px solid var(--line); padding-top:16px; font-size:12px; }
.load-facts>div { display:flex; gap:12px; justify-content:space-between; margin-bottom:8px; } .load-facts dt { color:var(--muted); } .load-facts dd { text-align:right; font-variant-numeric:tabular-nums; }
.lab-result .small-label { color:#64676F; } #recommendation { font:500 clamp(27px,3vw,36px)/1.15 'Space Grotesk',sans-serif; letter-spacing:-.04em; margin-top:14px; min-height:2.3em; }
#reason { font-size:13px; line-height:1.6; margin-top:16px; min-height:4.8em; }
.fleet { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:26px; }
.fleet li { min-width:0; opacity:.32; padding:7px 3px; border-bottom:2px solid transparent; transition:opacity .16s,border-color .16s; } .fleet li.selected { opacity:1; border-color:var(--red); } .fleet .truck { fill:var(--fondo); } .fleet .vid,.fleet .llanta { fill:var(--tinta); } .fleet span { display:block; font-size:10px; text-align:center; line-height:1.4; }
.fine { font-size:11px; line-height:1.7; color:#64676F; margin-top:20px; } .changed { animation:changed .2s ease-out; } @keyframes changed { from { transform:translateY(4px); opacity:.6; } to { transform:none; opacity:1; } }
.prep { margin-block:28px 32px; max-width:700px; } .prep li { display:flex; gap:20px; border-top:1px solid var(--line); padding-block:20px; } .prep>li>span { font-size:12px; color:var(--muted); padding-top:2px; } .prep h3 { font-size:17px; font-weight:500; } .prep p { color:var(--muted); margin-top:7px; font-size:14px; }
.pie { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:22px max(22px,env(safe-area-inset-bottom)); color:var(--muted); font-size:11px; }
.firma { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; } .iso { width:18px; height:16px; fill:var(--tinta); } .marca { font:400 10px 'Michroma',sans-serif; letter-spacing:.08em; color:var(--tinta); } .by { font-size:10px; } .pie-d { text-align:right; }
@media(max-width:600px) { .story-stage { width:calc(100% - 40px); } .story-header { padding-block:12px; font-size:11px; } .story-content { padding-block:30px 36px; } .eyebrow { margin-bottom:18px; } .lead { font-size:15px; margin-top:20px; } .hero-drawing { margin-block:28px; } .pallet-row { gap:8px; } .comparison { gap:10px; } .example { padding:16px 12px; border-radius:18px; } .example h3 { font-size:14px; } .example p { font-size:12px; } .example .truck { margin-block:14px; } .small-label { font-size:11px; } .lab { grid-template-columns:1fr; } .lab-input,.lab-result { padding:22px; } #recommendation { min-height:0; font-size:32px; } #reason { min-height:0; } .pallet-grid { min-height:80px; } .fleet { margin-top:20px; } .fleet .truck { height:55px; } .fleet span { font-size:11px; } .prep li { gap:15px; } .pie { font-size:10px; } .primary { width:100%; } .text-link { font-size:13px; } }
@media(max-width:359px) { h1 { font-size:43px; } h2 { font-size:34px; } .pie-d { display:none; } .example h3 { font-size:13px; } .big-number { font-size:27px; } .diagram-rule { font-size:11px; } }
@media(max-height:559px) { .story-stage { min-height:auto; } .story-content { padding-block:24px 32px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }