/* ============================================================
   AgroConnect — página de caso, sistema 2026
   Depende de pelatech-2026.css (tokens, nav, secciones, footer).
   Acá vive solo lo propio de la página de caso y el mockup del producto.
   ============================================================ */

/* La cabecera de página interior (.crumbs, .case-hero, .case-top, .case-meta)
   se mudó a pelatech-2026.css: la usan también el blog y el 404. */

/* ---- problema / solución ---- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:clamp(24px,3vw,36px)}
.card .lbl{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.card .lbl i{width:7px;height:7px;border-radius:50%;background:var(--muted);display:inline-block}
.card.sol .lbl{color:var(--accent)}.card.sol .lbl i{background:var(--accent)}
.card h3{font-size:clamp(21px,2.4vw,29px);font-weight:var(--hw);letter-spacing:-.025em;line-height:1.14;margin-bottom:16px}
.card h3 em{font-style:normal;color:var(--accent)}
.card p{font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.card ul{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.card li{display:grid;grid-template-columns:auto 1fr;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2);line-height:1.5}
.card li:last-child{border-bottom:0}
.card li::before{content:'—';color:var(--muted);font-family:var(--mono)}
.card.sol li::before{content:'→';color:var(--accent)}

/* ---- módulos ---- */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.mods{grid-template-columns:1fr}}
.mod{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.mod .top{padding:22px 22px 0}
.mod .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;color:var(--accent)}
.mod h4{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:12px 0 9px}
.mod p{font-size:13.5px;line-height:1.6;color:var(--ink-2);padding-bottom:22px}
.mod .fig{border-top:1px solid var(--line);background:var(--surface-2);height:132px;position:relative;overflow:hidden}

/* ---- stack ---- */
.stack{border-top:1px solid var(--line)}
.stack .row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:15px 0;border-bottom:1px solid var(--line);align-items:baseline}
.stack .row .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.stack .row .v{font-size:15px;color:var(--ink)}
.stack .row .v small{display:block;font-size:13px;color:var(--muted);margin-top:4px}
@media(max-width:640px){.stack .row{grid-template-columns:1fr;gap:6px}}

/* ============================================================
   Mockups de la app. Tienen paleta propia (--a-*): son "capturas"
   del producto, así que no siguen el tema claro/oscuro del sitio.
   ============================================================ */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.shots .full{grid-column:1/-1}
@media(max-width:900px){.shots{grid-template-columns:1fr}}
.shot{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow-x:auto;overflow-y:hidden}
.shot .cap{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;left:0}
.shot .cap .t{font-size:14.5px;font-weight:500;letter-spacing:-.01em}
.shot .cap .g{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.app{--a-bone:#f3efe6;--a-paper:#fbf8f1;--a-ink:#1a1d17;--a-ink2:#2b2f27;--a-mut:#6b6d63;--a-mut2:#8a8c80;--a-line:#d9d3c1;--a-line2:#c6bfab;--a-moss:#2d4a2b;--a-msoft:#dde4cd;--a-clay:#b8593a;--a-amber:#c79a2a;--a-sky:#3d5a7a;--a-sand:#e9dfc4;
  display:grid;grid-template-columns:196px 1fr;height:392px;overflow:hidden;background:var(--a-bone);color:var(--a-ink);font-family:'IBM Plex Sans',sans-serif;font-size:12px;line-height:1.45}
/* .sm no lleva sidebar: una sola columna. Con "0 1fr" el .a-main caía en la
   columna de 0px y todo el contenido se desbordaba fuera del recorte. */
.app.sm{grid-template-columns:1fr;height:392px}
.app.sm .a-side{display:none}
/* el mockup mantiene proporciones y scrollea en su propia caja en pantallas chicas */
.app{min-width:660px}
.app.lg{min-width:860px}
.a-serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em}
.a-side{background:var(--a-ink);color:#e8e4d5;padding:16px 13px;display:flex;flex-direction:column;gap:14px}
.a-side .bd{display:flex;align-items:baseline;gap:5px;padding-bottom:12px;border-bottom:1px solid #2d3028;flex-wrap:wrap}
.a-side .bd .mk{width:20px;height:20px;border-radius:50%;background:var(--a-msoft);color:var(--a-moss);display:grid;place-items:center;font-family:'Instrument Serif',serif;font-size:11px;font-weight:600}
.a-side .bd .nm{font-family:'Instrument Serif',serif;font-size:16px;letter-spacing:-.02em}
.a-side .bd .dt{color:var(--a-clay);font-family:'Instrument Serif',serif;font-size:16px}
.a-side .bd .tg{width:100%;margin-top:4px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#a8a598}
.a-side .who{background:#23261f;border:1px solid #2d3028;padding:9px;border-radius:3px;display:flex;gap:8px;align-items:center}
.a-side .who .av{width:24px;height:24px;border-radius:50%;background:var(--a-clay);color:#fff;display:grid;place-items:center;font-size:9.5px;font-weight:600;flex-shrink:0}
.a-side .who .n1{font-size:10.5px;color:#e8e4d5}
.a-side .who .n2{font-size:9px;color:#9a9788;margin-top:1px}
.a-side .grp{display:flex;flex-direction:column;gap:2px}
.a-side .grp .gl{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#7a7a6e;padding:0 6px 4px}
.a-side .grp a{display:flex;align-items:center;gap:7px;padding:6px 7px;border-radius:3px;color:#c8c4b4;font-size:11px}
.a-side .grp a .ic{width:11px;text-align:center;opacity:.65}
.a-side .grp a .bg{margin-left:auto;background:var(--a-clay);color:#fff;font-size:8.5px;padding:1px 5px;border-radius:99px}
.a-side .grp a.on{background:#23261f;color:#fff}
.a-side .grp a.on .ic{color:var(--a-clay);opacity:1}
.a-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.a-top{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--a-line)}
.a-top .cr{font-size:10.5px;color:var(--a-mut)}
.a-top .cr i{margin:0 5px;color:var(--a-line2);font-style:normal}
.a-top .sr{margin-left:auto;max-width:230px;flex:1;background:var(--a-paper);border:1px solid var(--a-line);border-radius:3px;padding:5px 9px;display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--a-mut)}
.a-top .sr .kk{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:9px;background:var(--a-sand);padding:1px 4px;border-radius:2px;color:var(--a-mut2)}
.a-body{flex:1;min-height:0;padding:16px 20px;overflow:hidden}
.a-kick{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut);margin-bottom:7px}
.a-body h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:32px;letter-spacing:-.01em;line-height:1;margin-bottom:7px}
.a-body h2 em{font-style:italic}
.a-body h2 em.c{color:var(--a-clay)}
.a-sub{color:var(--a-mut);font-size:11px;margin-bottom:15px}
.a-nums{display:flex;gap:30px;padding:9px 0;border-top:1px solid var(--a-line);border-bottom:1px solid var(--a-line);margin-bottom:14px}
.a-nums .v{font-family:'Instrument Serif',serif;font-size:28px;line-height:1}
.a-nums .v.am{color:var(--a-amber)}
.a-nums .l{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut);margin-top:3px}
.a-fl{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.a-fl .g{display:flex;align-items:center;gap:5px}
.a-fl .gl{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut)}
.a-fl .p{background:var(--a-paper);border:1px solid var(--a-line);padding:3px 9px;border-radius:3px;font-size:10.5px;color:var(--a-ink2)}
.a-fl .p.on{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}
.a-map{position:relative;border:1px solid var(--a-line);border-radius:3px;overflow:hidden;background:linear-gradient(#e4ddc2,#dfd7ba)}
.a-map.h1{height:176px}.a-map.h2{height:150px}.a-map.h3{height:106px}
.a-map::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(45,74,43,.055) 1px,transparent 1px) 0 0/100% 19px,linear-gradient(90deg,rgba(45,74,43,.055) 1px,transparent 1px) 0 0/19px 100%}
.a-map .lt{position:absolute;border:1px solid rgba(184,89,58,.55);background:rgba(184,89,58,.13);border-radius:2px}
.a-map .lt.d{border-style:dashed;background:rgba(199,154,42,.14);border-color:rgba(199,154,42,.6)}
.a-map .lt.m{border-color:rgba(45,74,43,.5);background:rgba(45,74,43,.08)}
.a-map .pn{position:absolute;width:19px;height:19px;border-radius:50%;background:var(--a-clay);color:#fff;display:grid;place-items:center;font-family:'Instrument Serif',serif;font-style:italic;font-size:10px;font-weight:600;border:2px solid var(--a-paper);transform:translate(-50%,-50%)}
.a-map .pn.m{background:var(--a-moss)}.a-map .pn.a{background:var(--a-amber)}
.a-map .lg{position:absolute;top:9px;left:9px;background:var(--a-paper);border:1px solid var(--a-line);border-radius:3px;padding:7px 9px;font-size:9.5px;display:flex;flex-direction:column;gap:3px;min-width:140px}
.a-map .lg .lt2{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut);margin-bottom:1px}
.a-map .lg .r{display:flex;align-items:center;gap:5px;color:var(--a-ink2)}
.a-map .lg .r i{width:7px;height:7px;border-radius:2px;display:inline-block;background:var(--a-moss)}
.a-map .lg .r i.c{background:var(--a-clay)}.a-map .lg .r i.a{background:var(--a-amber);border-radius:50%}
.a-map .lg .r b{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:400;color:var(--a-mut)}
.a-map .zm{position:absolute;bottom:9px;left:9px;display:flex;flex-direction:column;background:var(--a-paper);border:1px solid var(--a-line);border-radius:3px;overflow:hidden;font-size:11px;color:var(--a-ink)}
.a-map .zm span{padding:3px 7px;border-bottom:1px solid var(--a-line)}
.a-map .zm span:last-child{border-bottom:0}
.a-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px}
.a-chip{border:1px solid var(--a-line);background:var(--a-paper);border-radius:99px;padding:3px 9px;font-size:10px;color:var(--a-ink2);display:inline-flex;align-items:center;gap:5px}
.a-chip i{width:6px;height:6px;border-radius:50%;background:var(--a-sky);display:inline-block}
.a-chip i.am{background:var(--a-amber)}.a-chip i.ms{background:var(--a-moss)}
.a-warn{border:1px solid var(--a-amber);background:#fff6e0;border-radius:3px;padding:8px 11px;font-size:10.5px;display:flex;gap:8px;align-items:flex-start;margin-bottom:11px;line-height:1.45}
.a-warn i{width:7px;height:7px;border-radius:50%;background:var(--a-amber);margin-top:4px;flex-shrink:0;display:inline-block}
.a-warn b{color:var(--a-ink);font-weight:600}
.a-acts{display:flex;gap:7px;margin-top:auto}
.a-acts .b{padding:6px 11px;border-radius:3px;font-size:10.5px;border:1px solid var(--a-line);background:var(--a-paper)}
.a-acts .b.rj{background:var(--a-clay);color:#fff;border-color:var(--a-clay)}
.a-acts .b.ok{background:var(--a-moss);color:#fff;border-color:var(--a-moss)}
.a-tool{background:var(--a-paper);border:1px solid var(--a-line);border-radius:3px;padding:9px 11px;display:flex;flex-direction:column;gap:6px;width:186px}
.a-tool .l{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut)}
.a-tool .rw{display:flex;gap:4px}
.a-tool .rw .b{flex:1;border:1px solid var(--a-line);padding:4px;border-radius:2px;font-size:10px;text-align:center;background:var(--a-bone)}
.a-tool .rw .b.on{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}
.a-tool .go{background:var(--a-moss);color:#fff;padding:5px;border-radius:2px;font-size:10px;text-align:center}

/* --- sidebar: pie y badges --- */
.app.lg{height:474px}
.a-side .sft{margin-top:auto;padding-top:11px;border-top:1px solid #2d3028;font-size:8.5px;color:#7a7a6e;line-height:1.6}
.a-side .grp a.on{box-shadow:inset 2px 0 0 var(--a-clay)}

/* --- barra superior: acciones --- */
.a-top .bt{border:1px solid var(--a-line);background:var(--a-paper);border-radius:3px;padding:4px 9px;font-size:10px;color:var(--a-ink2);white-space:nowrap}
.a-top .bell{position:relative;width:22px;height:22px;border:1px solid var(--a-line);background:var(--a-paper);border-radius:3px;display:grid;place-items:center;font-size:10px;flex-shrink:0}
.a-top .bell b{position:absolute;top:-6px;right:-6px;background:var(--a-clay);color:#fff;font-size:8px;font-weight:600;border-radius:99px;padding:1px 4px;line-height:1.3}
.a-top .rt{margin-left:auto;display:flex;align-items:center;gap:7px}

/* --- titular serif con acento en bastardilla --- */
.a-h{font-family:'Instrument Serif',serif;font-weight:400;font-size:30px;letter-spacing:-.01em;line-height:1.05;margin-bottom:6px}
.a-h em{font-style:italic;color:var(--a-clay)}
.a-h small{font-family:'IBM Plex Sans',sans-serif;font-size:11px;color:var(--a-mut)}

/* --- tres cifras grandes --- */
.a-big{display:flex;gap:34px;padding:10px 0 12px}
.a-big .v{font-family:'Instrument Serif',serif;font-size:34px;line-height:1}
.a-big .v.cl{color:var(--a-clay)}
.a-big .l{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut);margin-top:3px}

/* --- tarjetas KPI con barra de acento --- */
.a-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.a-kpi{background:var(--a-paper);border:1px solid var(--a-line);border-left:2px solid var(--a-moss);border-radius:3px;padding:9px 11px}
.a-kpi.w{border-left-color:var(--a-amber)}
.a-kpi.c{border-left-color:var(--a-clay)}
.a-kpi .l{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut);line-height:1.45}
.a-kpi .v{font-family:'Instrument Serif',serif;font-size:25px;line-height:1;margin:6px 0 4px}
.a-kpi .v u{text-decoration:none;font-size:11px;color:var(--a-mut)}
.a-kpi .s{font-size:8.5px;color:var(--a-mut2)}

/* --- tabla compacta --- */
.a-split{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;min-height:0}
.a-pane{border:1px solid var(--a-line);border-radius:3px;background:var(--a-paper);padding:10px 12px;overflow:hidden}
.a-pane .ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.a-pane .ph .t{font-size:11px;font-weight:600;color:var(--a-ink)}
.a-pane .ph .g{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut)}
.a-tbl{width:100%;border-collapse:collapse;font-size:9.5px}
.a-tbl th{text-align:left;font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--a-mut);font-weight:400;padding:0 7px 6px 0;border-bottom:1px solid var(--a-line)}
.a-tbl td{padding:7px 7px 7px 0;border-bottom:1px solid var(--a-line);color:var(--a-ink2);vertical-align:top}
.a-tbl tr:last-child td{border-bottom:0}
.a-tbl tr.p td:first-child{box-shadow:inset 2px 0 0 var(--a-clay);padding-left:7px}
.a-tbl .mn{font-family:'IBM Plex Mono',monospace;color:var(--a-ink)}
.a-tbl .dim{color:var(--a-mut2);font-size:8.5px;margin-top:1px}
.a-tbl .num{font-family:'IBM Plex Mono',monospace;color:var(--a-clay)}

/* --- alertas --- */
.a-al{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--a-line);font-size:10px;line-height:1.5}
.a-al:last-child{border-bottom:0}
.a-al i{width:7px;height:7px;border-radius:50%;background:var(--a-amber);margin-top:4px;flex-shrink:0;display:inline-block}
.a-al b{display:block;color:var(--a-ink);font-weight:600;font-size:10.5px}
.a-al span{color:var(--a-mut)}

/* --- chequeos automáticos --- */
.a-chk{border:1px solid var(--a-line);border-left:2px solid var(--a-clay);background:var(--a-paper);border-radius:3px;padding:11px 13px}
.a-chk .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.a-chk .hd .k{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut);width:100%}
.a-chk .hd i{width:7px;height:7px;border-radius:50%;background:var(--a-clay);display:inline-block}
.a-chk .hd .t{font-family:'Instrument Serif',serif;font-size:20px;line-height:1}
.a-chk .hd .s{font-size:9.5px;color:var(--a-mut)}
.a-row{display:grid;grid-template-columns:11px 1fr auto;gap:9px;align-items:center;padding:7px 0;border-top:1px solid var(--a-line);font-size:10px;color:var(--a-ink2);line-height:1.45}
.a-row .m{font-family:'IBM Plex Mono',monospace;font-size:11px;text-align:center}
.a-row.ok .m{color:var(--a-moss)}
.a-row.no .m{color:var(--a-clay)}
.a-row.wr .m{color:var(--a-amber)}
.a-row b{color:var(--a-ink);font-weight:600}
.a-bdg{font-size:7.5px;letter-spacing:.1em;font-weight:600;padding:2px 6px;border-radius:2px;white-space:nowrap}
.a-bdg.ok{background:#e4ecdd;color:#25401f}
.a-bdg.no{background:#f6ddd4;color:#8f3f26}
.a-bdg.wr{background:#fbeecd;color:#7d5d10}

/* --- grilla de estadísticas (GeoInsights) --- */
.a-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--a-line);border-left:1px solid var(--a-line)}
.a-stats div{border-right:1px solid var(--a-line);border-bottom:1px solid var(--a-line);padding:7px 10px}
.a-stats .l{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut)}
.a-stats .v{font-family:'Instrument Serif',serif;font-size:21px;line-height:1;margin-top:3px}
.a-stats .v.am{color:var(--a-amber)}
.a-stats .v.cl{color:var(--a-clay)}

/* --- panel de capas sobre el mapa --- */
.a-map .lg .sg{display:flex;gap:3px;margin-bottom:5px}
.a-map .lg .sg span{flex:1;text-align:center;padding:2px 5px;border:1px solid var(--a-line);border-radius:2px;font-size:8.5px;color:var(--a-ink2)}
.a-map .lg .sg span.on{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}
.a-map .lg .r em{font-style:normal;width:8px;height:8px;border:1px solid var(--a-mut);border-radius:2px;display:inline-block;flex-shrink:0;position:relative}
.a-map .lg .r em.x{background:var(--a-ink);border-color:var(--a-ink)}
.a-map .lg .r em.x::after{content:'✓';position:absolute;inset:0;color:#fff;font-size:6.5px;line-height:8px;text-align:center}

/* --- estimación de deriva --- */
.a-fld{margin-bottom:10px}
.a-fld .l{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mut);margin-bottom:5px}
.a-fld .opts{display:flex;gap:4px;flex-wrap:wrap}
.a-fld .opts span{border:1px solid var(--a-line);background:var(--a-paper);border-radius:2px;padding:3px 8px;font-size:9.5px;color:var(--a-ink2)}
.a-fld .opts span.on{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}
.a-note{font-size:8.5px;color:var(--a-mut2);line-height:1.55;border-top:1px solid var(--a-line);padding-top:8px;margin-top:auto}
.a-note b{color:var(--a-mut);font-weight:600}


/* ---- figuras de los módulos (sí siguen el tema del sitio) ---- */
.fg{position:absolute;inset:0;padding:16px}
.fg .bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;flex:1}
.fg .bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.fg .rw{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.fg .rw .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:58px}
.fg .al{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:3px;padding:6px 9px;margin-bottom:6px;font-size:10.5px;color:var(--ink-2);background:var(--surface)}
.fg .al i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0}
.fg .al i.w{background:var(--warn)}
.fg .al .t{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--muted)}
.fg .grid{position:absolute;inset:0;background:linear-gradient(color-mix(in srgb,var(--line) 60%,transparent) 1px,transparent 1px) 0 0/100% 20px,linear-gradient(90deg,color-mix(in srgb,var(--line) 60%,transparent) 1px,transparent 1px) 0 0/20px 100%}
.fg .pl{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:2px}