:root{
  --verde:#004438; --verde-2:#0d5547; --crema:#E9DDC5; --crema-2:#F4EEE2; --ambar:#B08A4E;
  --oliva:#6E7B45; --blanco:#FBF9F4; --tinta:#1d2b27; --gris:#6b736f; --linea:#d9ccb2;
  --rojo:#9b3b2a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Space Grotesk",system-ui,sans-serif;background:var(--crema-2);color:var(--tinta);font-size:15px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px 80px}
header.top{background:var(--verde) url(../img/patron-planta-crema.png) center/1100px auto;color:var(--crema)}
header.top .wrap{display:flex;align-items:center;gap:16px;padding-top:18px;padding-bottom:0;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;line-height:1}
.brand b{font-size:30px;font-weight:600;letter-spacing:-.5px}
.brand small{font-size:11px;letter-spacing:.06em;opacity:.8;margin-top:4px}
.prog{margin-left:auto;text-align:right}
.prog .p1{font-size:12px;letter-spacing:.18em;color:var(--ambar);font-weight:600}
.prog .p2{font-family:Fraunces,serif;font-style:italic;font-size:15px;opacity:.9}
nav.tabs{display:flex;gap:4px;width:100%;margin-top:16px;overflow-x:auto}
nav.tabs a{color:var(--crema);text-decoration:none;padding:10px 16px 12px;border-radius:10px 10px 0 0;font-weight:500;opacity:.75;white-space:nowrap}
nav.tabs a.on{background:var(--crema-2);color:var(--verde);opacity:1}
h1,h2,h3{color:var(--verde);margin:0;font-weight:600;letter-spacing:-.3px}
h1{font-size:26px}
h2{font-size:19px}
h3{font-size:15px}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ambar);font-weight:600}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
section.view{display:none;padding-top:24px}
section.view.on{display:block}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:16px 0 24px}
.kpi{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:16px}
.kpi .n{font-size:34px;font-weight:600;color:var(--verde);line-height:1.1}
.kpi .l{font-size:13px;color:var(--gris)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.panel{background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:16px}
.panel h3{margin-bottom:10px}
.empty{color:var(--gris);font-size:14px;padding:6px 0}
.list{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid #ece3d2;cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;width:100%}
.item:first-child{border-top:0}
.item:hover{background:#f6f1e6}
.av{width:38px;height:38px;border-radius:50%;background:var(--verde);color:var(--crema);display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
.item .t{font-weight:600}
.item .s{font-size:13px;color:var(--gris)}
.chip{display:inline-block;font-size:12px;padding:3px 9px;border-radius:99px;background:#e7efe9;color:var(--verde);font-weight:500;white-space:nowrap}
.chip.warn{background:#f6e6d3;color:#8a5a1c}
.chip.bad{background:#f3dcd5;color:var(--rojo)}
.chip.mute{background:#ece7dc;color:var(--gris)}
.btn{text-decoration:none;display:inline-block;border:0;border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer;background:var(--verde);color:var(--crema)}
.btn:hover{background:var(--verde-2)}
.btn.ghost{background:transparent;color:var(--verde);border:1.5px solid var(--verde)}
.btn.ghost:hover{background:#e7efe9}
.btn.amb{background:var(--ambar);color:#fff}
.btn.sm{padding:7px 13px;font-size:13px}
.btn.link{background:none;color:var(--rojo);padding:6px 8px;font-weight:500}
.btn:disabled{opacity:.45;cursor:not-allowed}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--linea);border-radius:12px;background:#fff;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--verde)}
label.f{display:block;font-size:13px;color:var(--gris);margin-bottom:5px;font-weight:500}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:flex;gap:6px;align-items:center;border:1.5px solid var(--linea);border-radius:99px;padding:6px 12px;font-size:13px;cursor:pointer;background:#fff}
.checks input{accent-color:var(--verde)}
.checks label:has(input:checked){border-color:var(--verde);background:#e7efe9}
.note{font-size:12.5px;color:var(--gris);background:#f3ecdd;border-radius:10px;padding:9px 12px}
.search{position:relative}
.search input{padding-left:40px;font-size:17px;padding-top:14px;padding-bottom:14px}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%)}
/* card */
.vcard{background:var(--verde) url(../img/patron-centella-crema.png) center/700px auto;color:var(--crema);border-radius:22px;padding:22px 22px 0;overflow:hidden;max-width:420px;box-shadow:0 18px 40px -22px rgba(0,40,30,.55)}
.vcard .hd{display:flex;align-items:flex-start;justify-content:space-between}
.vcard .wm{font-size:24px;font-weight:600;line-height:1;letter-spacing:-.4px}
.vcard .wm small{display:block;font-size:10px;font-weight:400;letter-spacing:.05em;opacity:.8;margin-top:3px}
.vcard .tag{font-size:10px;letter-spacing:.2em;color:var(--ambar);font-weight:600;padding-top:4px}
.vcard .prg{font-size:44px;font-weight:600;letter-spacing:-1.5px;margin:18px 0 2px;line-height:1}
.vcard .nm{font-size:19px;font-weight:500}
.vcard .cd{font-size:12px;color:var(--ambar);letter-spacing:.12em;font-weight:600}
.stamps{margin:18px 0 10px;display:flex;flex-direction:column;gap:8px}
.srow{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px}
.srow.cur{background:rgba(233,221,197,.09)}
.srow .ml{width:46px;font-size:10px;letter-spacing:.16em;opacity:.75;font-weight:600}
.srow .ss{display:flex;gap:10px}
.st{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.st.off{border:1.5px dashed rgba(233,221,197,.45)}
.st.on{background:var(--crema)}
.st.on img{width:30px;height:30px;display:block}
.vcard .wm img{height:30px;width:auto;display:block}
.sig{border:1.5px dashed var(--linea);border-radius:12px;background:#fff;width:100%;height:170px;touch-action:none;display:block}
.terms{font-size:13px;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:12px 14px;max-height:200px;overflow:auto}
.terms li{margin-bottom:4px}
.lock{font-size:12px;color:var(--gris)}
.vcard .ln{font-size:13px;opacity:.9;padding-bottom:16px}
.vcard .ft{background:var(--crema);color:var(--verde);margin:0 -22px;padding:16px 22px;display:flex;gap:14px;align-items:center}
.vcard .ft .qr{background:#fff;padding:6px;border-radius:8px;flex:none;line-height:0}
.vcard .ft .qr img,.vcard .ft .qr canvas{width:84px!important;height:84px!important}
.vcard .ft .np{font-size:12px;color:var(--gris)}
.vcard .ft .nv{font-weight:600;font-size:15px}
.vcard .ft .sl{font-family:Fraunces,serif;font-style:italic;font-size:15px;margin-top:4px}
/* modal */
.scrim{position:fixed;inset:0;background:rgba(10,30,24,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;overflow:auto;padding:24px 12px}
.scrim.on{display:flex}
.modal{background:var(--crema-2);border-radius:20px;width:100%;max-width:880px;padding:22px;position:relative}
.modal.sm{max-width:460px}
.x{position:absolute;right:14px;top:12px;background:none;border:0;font-size:26px;cursor:pointer;color:var(--verde);line-height:1}
.dgrid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:22px;margin-top:14px}
@media (max-width:760px){.dgrid{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:14px}
.facts .k{color:var(--gris);font-size:12px}
.hist{max-height:230px;overflow:auto}
.hrow{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid #ece3d2;font-size:14px}
.hrow:first-child{border-top:0}
.hrow .d{color:var(--gris);width:84px;flex:none;font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--verde);color:var(--crema);padding:11px 18px;border-radius:99px;font-weight:500;z-index:80;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.banner{background:#f6e6d3;color:#7a4f17;border-radius:12px;padding:10px 14px;margin-top:16px;font-size:14px;display:none}
.banner.on{display:block}
.picked{margin-top:16px}
.allies{display:flex;flex-wrap:wrap;gap:6px}

/* app web */
body{padding-bottom:env(safe-area-inset-bottom)}
header.top .wrap{padding-top:calc(18px + env(safe-area-inset-top))}
.navout{margin-left:auto;background:none;border:1px solid rgba(233,221,197,.35);color:var(--crema);border-radius:99px;padding:6px 14px;cursor:pointer;align-self:center;font-size:13px}
.gate{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px;background:var(--verde) url(../img/patron-planta-crema.png) center/1100px auto}
.gate.on{display:flex}
.gatebox{background:var(--crema-2);border-radius:22px;padding:28px 24px;width:100%;max-width:380px}