body { font-size: 15px; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: #fffffff2; border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.home-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.msg { text-align: center; padding: 80px 20px; }

.hero { background: linear-gradient(180deg, #fff 0%, var(--lav) 100%); border-bottom: 1px solid var(--line); }
.hero .wrap { padding-top: 40px; padding-bottom: 36px; }
.hero h1 { font-size: 42px; line-height: 1.04; letter-spacing: -.025em; margin: 10px 0 10px; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { color: var(--ink-2); max-width: 560px; line-height: 1.55; margin: 14px 0 0; font-size: 16px; }
.hero-split { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.hero-art { display: grid; place-items: center; padding-right: 8px; }
@media (max-width: 560px) { .hero h1 { font-size: 34px; } .hero-art svg { width: 70px; height: 140px; } }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-2); background: #fff; padding: 5px 10px; border-radius: 999px; color: var(--ink-2); }
.chip.accent { border-color: var(--accent); color: var(--accent); }

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 28px; background: #fff; }
@media (min-width: 620px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px; min-width: 0; }
.kpi b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.kpi span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

section.block { padding: 40px 0; border-bottom: 1px solid var(--line); }
section.block > h2, .block-head h2 { font-size: 26px; font-weight: 600; margin: 6px 0 20px; letter-spacing: -.015em; }
.specs { border-top: 1px solid var(--line); }
.spec { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.spec b { font-weight: 500; text-align: right; }

/* texto de la variedad: etiqueta mono a la izquierda, párrafo a la derecha */
.facts { border-top: 1px solid var(--line); margin-top: 28px; }
.fact { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.fact .mono-label { padding-top: 3px; }
.fact p { margin: 0; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 560px) { .fact { grid-template-columns: 1fr; gap: 6px; } }

/* indicadores */
.inds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .inds { grid-template-columns: 1fr; } }
.ind { border: 1px solid var(--line); padding: 18px; background: #fff; display: flex; flex-direction: column; }
.ind h3 { font-size: 16px; font-weight: 600; margin: 6px 0 4px; }
.ind .hint { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0 0 16px; }
.ind-body { margin-top: auto; }
.ind-value { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-top: 10px; }

.ind-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-items: end; color: var(--line-2); }
.ind-shape { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 2px solid transparent; }
.ind-shape span { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ind-shape.on { border-bottom-color: var(--accent); }
.ind-shape.on span { color: var(--accent); font-weight: 700; }

.ind-seed { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ind-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; }
.ind-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 2px solid transparent; }
.ind-chip i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); }
.ind-chip span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ind-chip.on { border-bottom-color: var(--accent); }
.ind-chip.on span { color: var(--accent); font-weight: 700; }

.ind-rough { padding-top: 10px; }
.ind-rough-track { position: relative; height: 10px; background: repeating-linear-gradient(90deg, var(--bg-soft) 0 9px, #fff 9px 10px); border: 1px solid var(--line-2); }
.ind-rough-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--lav-2), var(--accent)); }
.ind-rough-mark { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); transform: translate(-50%, -50%); }
.ind-rough-labels { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.ind-color-pods { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ind-color-pods > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ind-color-pods span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ind-color-bar { height: 10px; margin-top: 14px; border: 1px solid #0000001a; }

/* catálogo de variedades */
.var-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.var-card { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); padding: 16px; text-decoration: none; color: var(--ink); background: #fff; transition: border-color .15s; }
.var-card:hover { border-color: var(--accent); }
.var-card b { display: block; font-size: 17px; font-weight: 600; margin: 4px 0; }
.var-card .muted { font-size: 13px; }

.cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.cta .btn { padding: 14px 20px; }

#map { height: 300px; border: 1px solid var(--line); background: #1c211c; }
footer { padding: 28px 0 44px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* escáner */
#scanner { position: fixed; inset: 0; z-index: 100; background: #111114; color: #fff; display: flex; flex-direction: column; gap: 16px; padding: 16px; padding-top: calc(16px + env(safe-area-inset-top)); }
.scan-head { display: flex; justify-content: space-between; align-items: center; }
#scan-close { color: #fff; border-color: #ffffff55; }
#reader { width: 100%; max-width: 520px; margin: 0 auto; background: #000; }
.manual { display: flex; gap: 8px; max-width: 520px; width: 100%; margin: 0 auto; }
.manual input { font-family: var(--mono); text-transform: uppercase; }

/* uso sin señal */
.offline-note { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 10px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.ready { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-height: 16px; }
.ready.on { color: var(--ok); }

/* mapa de la finca, senderos y "usted está aquí" */
.map-tall { height: 420px !important; border: 1px solid var(--line); background: #1c211c; }
@media (max-width: 560px) { .map-tall { height: 360px !important; } }
.map-label { background: rgba(17,17,20,.75); color: #fff; border: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; box-shadow: none; }
.map-label::before { display: none; }
.here-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; padding: 7px 12px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.route { margin-top: 22px; padding: 0 12px; }
.route-track { position: relative; height: 4px; background: var(--line-2); margin: 14px 0; }
.route-done { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.route-dot { position: absolute; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background: #fff; border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ink); text-decoration: none; }
.route-dot.on { background: var(--accent); border-color: var(--accent); color: #fff; width: 30px; height: 30px; box-shadow: 0 0 0 4px var(--lav-2); }
.route-ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 -12px; }
.stops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.stop { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); padding: 14px; text-decoration: none; color: var(--ink); background: #fff; }
.stop:hover { border-color: var(--accent); }
.stop b { font-size: 16px; font-weight: 600; }
.stop .muted { font-size: 13px; }
.stop.off { background: var(--bg-soft); color: var(--muted); }
.stops .stop:last-child { text-align: right; align-items: flex-end; }
.trails { display: grid; gap: 8px; margin-top: 14px; }
.trail-card { display: flex; gap: 14px; border: 1px solid var(--line); padding: 14px; background: #fff; }
.trail-card i { width: 4px; flex: none; align-self: stretch; }
.trail-card b { display: block; font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.trail-card p { margin: 8px 0 0; color: var(--ink-2); line-height: 1.5; font-size: 14px; }