:root{--brand:#004aac;--navy:#071c3b;--muted:#566780;--paper:#fff;--stroke:#d8e2f1;--soft:#edf4ff}
html{scroll-behavior:smooth}
body{background:linear-gradient(175deg,#e9f1ff 0,#f7faff 360px,#f5f7fc 100%);color:var(--navy)}
header{box-shadow:0 8px 24px #051d5b18}
header .wrapper{display:flex;align-items:center}
main.wrapper{max-width:1120px}
main>nav{font-size:.9rem;margin-bottom:23px}
h1{color:var(--navy);letter-spacing:-.035em;max-width:840px}
h2{font-size:clamp(1.25rem,3vw,1.6rem);line-height:1.22;letter-spacing:-.02em;margin:0 0 14px}
h3{font-size:1.06rem}
p{margin:.6em 0 1em}
.hero-desc{max-width:860px;font-size:1.12rem;color:#465a77}
.eyebrow{font-size:.77rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#0c60bd}
.panel{background:var(--paper);box-shadow:0 16px 50px #1039630d;border-color:var(--stroke)}
.tools-panel{border-top:5px solid var(--brand)}
.muted{color:var(--muted)}
.field-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:25px 0}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.91rem;font-weight:750;color:#203654;line-height:1.35}
.field input{width:100%;max-width:none;min-height:46px;border:1.5px solid #c7d5e8;background:#fbfdff;color:#182f4f;padding:10px 12px;font:inherit;font-variant-numeric:tabular-nums}
.field input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #66aaf7;outline-offset:3px}
.helper{font-size:.8rem;color:var(--muted);line-height:1.4}
.button-row{display:flex;flex-wrap:wrap;gap:10px}
button{font-size:.95rem;font-weight:730;min-height:45px;transition:filter .12s,transform .12s}
button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
button:disabled{opacity:.5;cursor:not-allowed}
.button-soft{background:#e9f1fe;color:#034ca4;border:1px solid #d6e6fc}
.button-outline{background:#fff;color:#184f91;border:1px solid #9fb9e1}
.notice{margin-top:15px;font-size:.95rem;padding:10px 12px;border-radius:10px;background:#f0f5fd}
.notice.success{color:#17513b;background:#eaf7f1}
.notice.error{color:#8c1830;background:#fff0f0;border:1px solid #f1c6c6}
.result-label{font-size:.86rem;color:#51637d;font-weight:700}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
.metric{padding:18px;background:#f1f6ff;border:1px solid #dfebfb;border-radius:13px}
.metric.primary{background:#063f9b;color:#fff;border-color:#063f9b}
.metric.primary .result-label{color:#dcecff}
.metric strong{font-size:clamp(1.5rem,3vw,2.2rem);display:block;line-height:1.15;font-variant-numeric:tabular-nums;margin-top:7px}
.secondary-grid{display:flex;flex-wrap:wrap;gap:8px 25px;padding:12px 0 20px;font-size:.95rem}
.secondary-grid strong{color:#0d49a2}
#recommended{color:#164f9c;font-weight:800}
#breakdown{background:#f0f5fe;border-left:4px solid var(--brand);padding:13px 16px;border-radius:4px 9px 9px 4px}
.warning{background:#fff4e8;color:#85430a;padding:12px;border-radius:10px}
.table-scroll{max-width:100%;overflow-x:auto}
table{border-collapse:collapse;min-width:610px;width:100%;font-size:.9rem;font-variant-numeric:tabular-nums}
th,td{padding:12px 10px;text-align:left;border-bottom:1px solid #dfebf7}
thead th{font-weight:750;color:#3d5370;background:#f1f5fd}
tbody th{font-weight:600}
tr.top-layout{background:#eaf4ff}
tr.top-layout th::after{content:" · mejor";font-weight:800;color:#005ca8}
.diagram-card{border:1px solid #dae5f5;border-radius:14px;padding:16px;background:#fafdff;margin:15px 0}
.warehouse-plan{display:flex;justify-content:center;gap:10px;border:2px solid #aabdd9;border-radius:12px;background:#e8f1fd;padding:14px;min-height:125px;max-width:620px;margin:0 auto}
.warehouse-plan.cross-lane{flex-direction:column;max-width:470px}
.bank{display:grid;align-content:center;justify-content:center;gap:3px;padding:6px;flex:1;min-width:0}
.pallet{display:block;background:linear-gradient(135deg,#1875c6,#0d4e9c);border:1px solid #2766a8;border-radius:3px;min-height:10px}
.long-lane .pallet{min-height:15px}
.cross-lane .pallet{min-height:10px}
.passage{display:flex;justify-content:center;align-items:center;text-align:center;font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:#fcf4dc;border:1px dashed #d6b45c;border-radius:6px;color:#6d4b0d}
.long-lane .passage{writing-mode:vertical-rl;min-width:38px}
.cross-lane .passage{min-height:36px}
.faq details{padding:14px 0;border-bottom:1px solid #e3eaf5}
.faq summary{cursor:pointer;color:#183e79;font-weight:750}
.faq details p{padding:4px 0 0}
.cta-panel{background:linear-gradient(120deg,#09265e,#0056b2);color:white}
.cta-panel h2{color:white}
.cta-panel a.cta-link{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:9px;padding:12px 18px;font-weight:750;text-decoration:none;color:#004aac}
.cta-panel small{color:#dbe9ff}
.bottom-nav{display:flex;flex-wrap:wrap;gap:18px}
[hidden]{display:none!important}
@media(max-width:920px){.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:570px){
 main{padding-top:20px}
 .panel{padding:18px 14px}
 .field-grid{gap:13px;margin:18px 0}
 .result-grid{grid-template-columns:1fr 1fr}
 .metric{padding:14px}
 .metric.primary{grid-column:1/-1}
 .button-row button{flex:1 1 45%}
 .warehouse-plan{padding:8px;gap:7px}
 .bank{padding:2px;gap:2px}
 .long-lane .pallet{min-height:12px}
 .long-lane .passage{min-width:26px}
}
@media(max-width:350px){.field-grid{grid-template-columns:1fr}.result-grid{grid-template-columns:1fr}.metric.primary{grid-column:auto}}
@media print{
 body{background:white;color:black;font-size:12pt}
 header,main>nav,.tools-panel,.button-row,.cta-panel,.bottom-nav,footer{display:none!important}
 main{padding:0;width:100%!important}
 .panel{box-shadow:none;border:0;break-inside:avoid;padding:8px}
 h1{font-size:22pt}
 .metric.primary{background:white;color:black;border:2px solid black}
 .metric.primary .result-label{color:black}
 .metric{background:#fff}
 .warehouse-plan{max-width:380px}
}