:root{--fondo:#ece6d6;--papel:#fbf8f1;--tinta:#16181a;--gris:#56625a;--marca:#1f4d3a;--marcap:#14352a;--acento:#b07d2b;--acentoc:#f3ead6;--cta:#15803d;--ctao:#0f5f2d;--suave:#e6efe9;--linea:#e2dac6;--tit:"Cormorant Garamond",Georgia,serif;--txt:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--fondo);color:var(--tinta);font-family:var(--txt);font-size:16px;line-height:1.45;min-height:100dvh;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
img{display:block;max-width:100%}
#app{max-width:480px;margin:0 auto;min-height:100dvh;background:var(--papel);padding:0 16px calc(32px + env(safe-area-inset-bottom));box-shadow:0 0 40px rgba(20,53,42,.08)}
.marca{font-family:var(--tit);font-weight:700;font-size:21px;color:var(--marca);letter-spacing:.01em;line-height:1}
.k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
h1,h2,h3{font-family:var(--tit);font-weight:700;line-height:1.08;color:var(--marcap)}
h1{font-size:34px}h2{font-size:27px}h3{font-size:21px}
.gris{color:var(--gris)}
.chico{font-size:13px}

/* cabecera */
.cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(14px + env(safe-area-inset-top)) 0 12px;position:sticky;top:0;background:var(--papel);z-index:5;border-bottom:1px solid var(--linea)}
.cab-der{display:flex;align-items:center;gap:8px}
.pais{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--linea);border-radius:999px;background:#fff}
.pais svg,.flag svg{width:24px;height:16px;border-radius:3px;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.entrar{font-size:14px;font-weight:700;color:var(--marca);padding:8px 12px;border:1.5px solid var(--marca);border-radius:999px}
.salir{font-size:13px;color:var(--gris);text-decoration:underline;padding:8px 4px}

/* banderas */
.bienv{padding:calc(40px + env(safe-area-inset-top)) 4px 24px;text-align:center}
.bienv h1{margin:18px 0 8px}
.flags{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.flag{display:flex;align-items:center;gap:10px;padding:14px 12px;background:#fff;border:1.5px solid var(--linea);border-radius:14px;font-weight:600;font-size:15px;text-align:left;min-height:56px}
.flag svg{width:36px;height:24px;flex:none}
.flag.sug{border-color:var(--marca);box-shadow:0 0 0 3px var(--suave)}
.flag small{display:block;font-weight:500;font-size:11px;color:var(--marca)}

/* banner semanal */
.banner{margin:14px 0 0;background:linear-gradient(135deg,var(--marcap),var(--marca));color:#fff;border-radius:18px;padding:14px;display:flex;gap:12px;align-items:center;position:relative;overflow:hidden}
.banner img{width:74px;height:98px;object-fit:cover;border-radius:8px;flex:none;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.banner .k{color:#f3d98f}
.banner h3{color:#fff;font-size:20px;margin:3px 0 4px}
.banner .pct{position:absolute;top:0;right:0;background:#f3d98f;color:var(--marcap);font-weight:800;font-size:13px;padding:6px 12px;border-radius:0 18px 0 14px}
.banner .pre{font-size:14px;margin-bottom:8px}.banner s{opacity:.7}
.banner .btn{background:#f3d98f;color:var(--marcap);padding:10px 14px;font-size:14px;width:auto;display:inline-block}

/* progreso */
.prog{margin:18px 0 6px}
.prog-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.barra{height:10px;background:var(--suave);border-radius:999px;margin-top:8px;overflow:hidden}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--cta),#3fae6a);border-radius:999px;transition:width .6s}
.pasos{display:flex;gap:4px;margin-top:8px}
.pasos b{flex:1;height:4px;border-radius:4px;background:var(--linea)}.pasos b.si{background:var(--cta)}

/* secciones y tarjetas */
.sec{margin-top:26px}
.sec>p{margin:4px 0 12px}
.card{display:flex;gap:12px;background:#fff;border:1px solid var(--linea);border-radius:16px;padding:12px;margin-bottom:10px;width:100%;text-align:left;position:relative}
.card.mio{border-color:#b9d8c4}
.tapa{width:78px;height:104px;border-radius:8px;overflow:hidden;flex:none;position:relative;background:var(--marca)}
.tapa img{width:100%;height:100%;object-fit:cover}
.tapa.txt{display:flex;align-items:center;justify-content:center;padding:8px;background:linear-gradient(160deg,var(--marca),var(--marcap));color:#f3ead6;font-family:var(--tit);font-weight:700;font-size:14px;line-height:1.05;text-align:center}
.card.cand .tapa img{filter:saturate(.55) brightness(.8)}
.cand-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,53,42,.38)}
.cand-ico svg{width:30px;height:30px}
.card-c{flex:1;min-width:0;display:flex;flex-direction:column}
.card h3{font-size:19px;margin:2px 0 4px}
.card p{font-size:13.5px;color:var(--gris);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pie{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ok{font-size:12.5px;font-weight:700;color:var(--cta);display:flex;align-items:center;gap:4px}
.precio{font-size:14px;font-weight:700}.precio s{font-weight:500;color:var(--gris);margin-right:4px}
.pill{font-size:11px;font-weight:800;background:#f3d98f;color:var(--marcap);border-radius:999px;padding:3px 8px}
.mini{font-size:13px;font-weight:700;color:#fff;background:var(--cta);border-radius:999px;padding:8px 12px;white-space:nowrap}
.mini.sec2{background:#fff;color:var(--marca);border:1.5px solid var(--marca)}
.btn{display:block;width:100%;text-align:center;text-decoration:none;background:var(--cta);color:#fff;font-weight:800;font-size:16px;padding:15px 16px;border-radius:14px;box-shadow:0 6px 0 var(--ctao)}
.btn:active{transform:translateY(2px);box-shadow:0 4px 0 var(--ctao)}
.btn.cl{background:#fff;color:var(--marca);box-shadow:none;border:1.5px solid var(--marca)}
.btn[disabled]{opacity:.55}

/* demo */
.hero{margin-top:16px;background:var(--acentoc);border-radius:20px;padding:18px 16px;display:flex;gap:14px;align-items:center}
.hero img{width:104px;border-radius:8px;box-shadow:0 10px 24px rgba(20,53,42,.28);flex:none}
.hero h1{font-size:27px;margin:4px 0 6px}
.pasos4{padding:0;counter-reset:p;display:grid;gap:8px;margin:12px 0}
.pasos4 li{list-style:none;counter-increment:p;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:10px 12px 10px 46px;position:relative;font-size:14.5px}
.pasos4 li:before{content:counter(p);position:absolute;left:10px;top:9px;width:26px;height:26px;border-radius:50%;background:var(--marca);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.sit{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:11px 12px;margin-bottom:8px}
.sit b{display:block;font-size:14.5px}.sit span{font-size:12.5px;color:var(--gris)}
.sit svg{width:22px;height:22px;flex:none;margin-left:auto}
.nota{font-size:12px;color:var(--gris);margin-top:12px}
.cierre{margin-top:22px;background:var(--suave);border-radius:18px;padding:18px 16px;text-align:center}
.cierre h2{margin-bottom:6px}.cierre p{margin-bottom:14px;font-size:14.5px}
.cierre .chico{margin-top:10px;margin-bottom:0}

/* hoja */
.hoja{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.hoja[hidden],.aviso[hidden]{display:none}
.hoja-fondo{position:absolute;inset:0;background:rgba(20,30,25,.55)}
.hoja-caja{position:relative;background:var(--papel);width:100%;max-width:480px;max-height:92dvh;overflow:auto;border-radius:22px 22px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));animation:sube .25s ease}
@keyframes sube{from{transform:translateY(30px);opacity:0}}
.hoja-x{position:absolute;top:8px;right:10px;font-size:30px;line-height:1;color:var(--gris);padding:6px 10px}
.hoja h2{margin:6px 30px 8px 0}
.campo{width:100%;font:inherit;font-size:17px;padding:14px;border:1.5px solid var(--linea);border-radius:12px;background:#fff;margin:12px 0}
.campo:focus{outline:none;border-color:var(--marca)}
.campo.cod{font-size:28px;letter-spacing:.35em;text-align:center;font-weight:700}
.err{color:#9c4a3a;font-size:14px;margin:-4px 0 10px}
.pieza{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea);text-decoration:none}
.pieza img,.pieza .tapa{width:46px;height:61px;object-fit:cover;border-radius:5px;flex:none;font-size:9px}
.pieza b{font-size:14.5px;display:block}.pieza span{font-size:12.5px;color:var(--gris)}
.pieza .mini{margin-left:auto}
.hoja-tapa{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.hoja-tapa .tapa{width:96px;height:128px}
.aviso{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--marcap);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:92vw;text-align:center}
.carga{padding:40vh 0;text-align:center;color:var(--gris)}