/* ==========================================================================
   Parche Cafetero – Ruta del Café Fusagasugá · tokens.css
   Fuente de verdad del design system: variables, componentes y animaciones.
   Tipografías (Google Fonts): Young Serif (títulos) + Instrument Sans (UI)
   <link href="https://fonts.googleapis.com/css2?family=Young+Serif&family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
   ========================================================================== */
:root{--papel:#F4ECDD;--papel2:#EDE2CC;--card:#FBF7EF;--white:#FFFDF8;--line:#E2D5BC;--line2:#D3C3A3;--bosque:#1F3A2C;--bosque2:#2E5140;--bosqueS:#DCE5D5;--cafe:#3B2418;--cafe2:#6B5A4B;--muted:#7A6652;--terra:#B5572F;--terraS:#F1D9C8;--dorado:#C79A45;--doradoT:#8A6420;--doradoS:#F3E3BE;--cereza:#A3222F;--cerezaS:#F3D5D2;--rio:#3F6F68;--rioS:#D7E6E2;--serif:"Young Serif",Georgia,"Times New Roman",serif;--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--sh:0 1px 0 rgba(59,36,24,.05),0 10px 30px -14px rgba(59,36,24,.28);--sh2:0 2px 0 rgba(59,36,24,.04),0 24px 48px -18px rgba(31,58,44,.5)}
*{box-sizing:border-box}
body{margin:0;background:#F4ECDD;color:#3B2418;font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:#B5572F}a:hover{color:#8E4424}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
.paper{background-color:#F4ECDD;background-image:radial-gradient(rgba(59,36,24,.05) 1px,transparent 1.3px);background-size:7px 7px}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:14px;border:0;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-p{background:var(--bosque);color:#FBF7EF}.btn-p:hover{background:#2E5140;color:#FBF7EF}
.btn-t{background:var(--terra);color:#FFF8F0}.btn-t:hover{background:#9E4A26;color:#FFF8F0}
.btn-s{background:var(--card);color:var(--cafe);box-shadow:inset 0 0 0 1.5px var(--line2)}.btn-s:hover{color:var(--cafe)}
.btn-g{background:transparent;color:var(--bosque2)}
.btn-sm{min-height:40px;padding:0 14px;border-radius:10px;font-size:14px}
.btn-dis{background:var(--papel2);color:var(--muted);cursor:not-allowed}
.card{background:var(--card);border-radius:18px;box-shadow:var(--sh)}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);font-size:13px;font-weight:600;color:var(--cafe2);white-space:nowrap;border:0;text-decoration:none}
.chip-on{background:var(--bosque);color:#FBF7EF;box-shadow:none}
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.logo{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--serif);color:#FBF7EF;flex-shrink:0;outline:1.5px solid rgba(251,247,239,.55);outline-offset:-5px;line-height:1}
.input{height:54px;width:100%;border-radius:14px;background:var(--white);border:1.5px solid var(--line2);padding:0 16px;font-size:16px}
.input:focus{outline:none;border-color:var(--bosque2);box-shadow:0 0 0 4px rgba(46,81,64,.15)}
.label{font-size:13px;font-weight:600;color:var(--cafe2);display:block;margin-bottom:8px}
.pin{position:absolute;transform:translate(-50%,-100%);background:none;border:0;padding:0;cursor:pointer}
.pin-in{display:flex;flex-direction:column;align-items:center;animation:float 3.8s ease-in-out infinite}
.pin-head{position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:15px;color:#FBF7EF;box-shadow:0 0 0 3px #FBF7EF,0 10px 18px -6px rgba(59,36,24,.6)}
.pin-tail{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid #FBF7EF;margin-top:2px}
.pin-rank{position:absolute;top:-8px;right:-10px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--dorado);color:var(--cafe);font-family:var(--sans);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #FBF7EF}
.pin-ok{position:absolute;bottom:-4px;right:-6px;width:20px;height:20px;border-radius:10px;background:var(--bosque2);color:#FBF7EF;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #FBF7EF}
.pin-sel .pin-head{width:60px;height:60px;font-size:20px;box-shadow:0 0 0 4px #FBF7EF,0 0 0 8px rgba(181,87,47,.35),0 14px 24px -8px rgba(59,36,24,.6)}
.stars{display:inline-flex;gap:2px;color:var(--dorado)}
.stars svg{width:14px;height:14px;fill:currentColor;stroke:none}
.bar{height:8px;border-radius:99px;background:var(--papel2);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:99px;background:var(--bosque2);transform-origin:left;animation:grow 1.2s cubic-bezier(.2,.7,.2,1) both}
.navb{position:absolute;left:0;right:0;bottom:0;height:84px;padding:8px 8px 20px;background:var(--card);box-shadow:0 -1px 0 var(--line),0 -12px 30px -18px rgba(59,36,24,.35);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));z-index:20}
.navb a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;border-radius:14px}
.navb a .ico{width:24px;height:24px}
.navb a.on{color:var(--bosque)}
.navb a.on .ico{background:var(--bosqueS);border-radius:10px;padding:3px;width:44px;height:30px}
.tabular td,.tabular th{font-variant-numeric:tabular-nums}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes stamp{0%{opacity:0;transform:scale(1.7) rotate(-18deg)}60%{opacity:1;transform:scale(.93) rotate(var(--r,-6deg))}100%{opacity:.92;transform:scale(1) rotate(var(--r,-6deg))}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.6);opacity:0}}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}50%{opacity:.8}100%{opacity:0;transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-300px 0}100%{background-position:300px 0}}
.rise{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.stamp{animation:stamp .8s cubic-bezier(.2,.8,.2,1) both;mix-blend-mode:multiply}
.skel{background:linear-gradient(90deg,#EDE2CC 0,#F6EFE2 50%,#EDE2CC 100%);background-size:600px 100%;animation:shimmer 1.4s linear infinite;border-radius:10px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}