:root{
  --ink:#121212; --paper:#FAF9F7; --grey:#6E6E6E; --line:#E6E3DE;
  --navy:#1B2A4A; --wa:#25D366;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{background:var(--ink);color:var(--ink);font-family:'Manrope',sans-serif}

/* ── libro paginado ── */
#book{display:flex;height:100dvh;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
#book::-webkit-scrollbar{display:none}
.page{flex:none;width:100vw;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;overflow-x:hidden;background:var(--paper)}
.wrap{max-width:560px;margin:0 auto;padding:14px 20px 110px;min-height:100%}

/* mini header por página */
.mh{display:flex;align-items:center;justify-content:space-between;padding:4px 0 10px}
.mh .lg{height:26px}
.mh .num{font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--grey)}
.crumb{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--grey);text-transform:uppercase}

/* portada / contraportada */
.page.dark{background:var(--ink);color:#fff}
.cover .wrap{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;min-height:100dvh;padding-bottom:130px}
.cover img.biglogo{width:110px;margin-bottom:26px}
.cover .kicker{font-size:11px;font-weight:800;letter-spacing:.5em;color:#9aa2b5}
.cover h1{font-family:'Oswald';font-weight:600;font-size:56px;line-height:1;text-transform:uppercase;margin-top:10px}
.cover h1 em{font-style:normal;color:#8FA7D9}
.cover .sub{margin-top:14px;font-size:14px;font-weight:600;color:#c9c9c9}
.cover .badges{margin-top:22px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.05em;border:1px solid currentColor;padding:6px 10px;border-radius:999px}
.cover .swipe{margin-top:40px;font-size:12.5px;font-weight:700;color:#9aa2b5;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

/* ficha de producto */
.gal{margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:16px;height:31dvh;min-height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gal img{max-height:92%;max-width:88%;object-fit:contain}
h2.pname{font-family:'Oswald';font-weight:600;font-size:24px;text-transform:uppercase;margin-top:12px}
.desc{font-size:12.5px;color:var(--grey);font-weight:600;margin-top:3px}
.pFrom{margin-top:8px;font-size:18px;font-weight:800}
.pFrom small{font-size:11px;color:var(--grey);font-weight:700}
.secT{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-top:14px}
.secT a{float:right;font-size:10px;color:var(--navy);letter-spacing:.05em}

.packs{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.pk{flex:1;min-width:96px;text-align:center;padding:8px 5px;background:#fff;border:1.5px solid var(--line);border-radius:12px;cursor:pointer}
.pk .l{font-size:10.5px;font-weight:800}
.pk .p{font-size:12.5px;font-weight:800;margin-top:1px}
.pk .s{font-size:9px;color:var(--navy);font-weight:700}
.pk.on{border-color:var(--navy);background:#F3F5FA}

.sizes{display:flex;gap:7px;margin-top:8px}
.sz{flex:1;text-align:center;font-size:12px;font-weight:800;padding:9px 0;background:#fff;border:1.5px solid var(--line);border-radius:10px;cursor:pointer}
.sz.on{background:var(--navy);color:#fff;border-color:var(--navy)}

.counter{margin-top:8px;font-size:11.5px;font-weight:700;color:var(--grey)}
.counter b{color:var(--navy)}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}
.sw{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:7px 5px;text-align:center;cursor:pointer;position:relative}
.sw img{width:100%;height:52px;object-fit:contain}
.sw .n{font-size:9px;font-weight:700;margin-top:3px;color:var(--grey)}
.sw.on{border-color:var(--navy);background:#F3F5FA}
.sw .qty{position:absolute;top:-7px;right:-7px;background:var(--navy);color:#fff;font-size:11px;font-weight:800;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sw .minus{position:absolute;top:-7px;left:-7px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:800;width:22px;height:22px;border-radius:50%;display:none;align-items:center;justify-content:center}
.sw.on .minus{display:flex}

.resumen{margin-top:12px;background:#fff;border:1px dashed var(--line);border-radius:12px;padding:10px 13px;font-size:12px;font-weight:700;color:var(--grey)}
.resumen b{color:var(--ink)}
.wa{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;background:var(--wa);color:#fff;font-size:15px;font-weight:800;padding:15px;border-radius:14px;border:none;width:100%;cursor:pointer;font-family:'Manrope'}
.wa:disabled{background:#B9BDB9;cursor:not-allowed}
.wa svg{width:20px;height:20px;fill:#fff;flex:none}
.trust{display:flex;justify-content:center;gap:10px;margin-top:9px;font-size:10.5px;font-weight:700;color:var(--grey);flex-wrap:wrap}

/* guía de tallas */
.guideimg{width:100%;border-radius:14px;margin-top:10px}
table.guide{width:100%;margin-top:12px;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.guide th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);text-align:left;padding:9px 13px;border-bottom:1px solid var(--line)}
.guide th:last-child,.guide td:last-child{text-align:right}
.guide td{padding:10px 13px;font-size:12px;font-weight:600;border-bottom:1px solid var(--line)}
.guide tr:last-child td{border-bottom:none}

/* contraportada */
.how{margin-top:14px}
.how p{font-size:14px;font-weight:600;color:#c9c9c9;margin:12px 0}
.how b{color:#fff}
.dark .secT{color:#9aa2b5}
.wa.ghost{background:transparent;border:1.5px solid var(--wa);color:var(--wa)}
.wa.ghost svg{fill:var(--wa)}
.endlogo{width:70px;margin-top:30px;opacity:.9}

/* pager fijo */
.pager{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;box-shadow:0 6px 24px rgba(0,0,0,.18);z-index:30}
.pgbtn{width:34px;height:34px;border-radius:50%;border:none;background:var(--ink);color:#fff;font-size:19px;font-weight:800;cursor:pointer;line-height:1}
.pgbtn:disabled{opacity:.25;cursor:default}
.dots{display:flex;gap:6px;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;background:#D8D4CD;transition:all .2s}
.dot.on{background:var(--navy);transform:scale(1.35)}