:root{
  --bg:#0B0B0C; --bg2:#101012; --tx:#F2F1EE; --mut:#7E7E80;
  --line:#232326; --panel:#161619;
  --acc:#7D9BD1; --acc-deep:#24365C; --acc-soft:#C7D4EE;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{background:#000;color:var(--tx);font-family:'Manrope',sans-serif}

/* ── libro ── */
#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(--bg);position:relative}
.page.alt{background:var(--bg2)}
.wrap{max-width:560px;margin:0 auto;padding:24px 24px 118px;min-height:100%;display:flex;flex-direction:column}

.mh{display:flex;align-items:center;justify-content:space-between}
.mh img{height:24px}
.mh .num{font-size:10px;font-weight:800;letter-spacing:.3em;color:var(--mut)}

/* lámina hero */
.kick{margin-top:24px;display:flex;align-items:center;gap:10px}
.kick .bar{width:34px;height:2px;background:var(--acc)}
.kick span{font-size:10px;font-weight:800;letter-spacing:.28em;color:var(--acc)}
h1.big{font-family:'Oswald';font-weight:600;font-size:42px;line-height:1.02;text-transform:uppercase;margin-top:10px}
.plate{margin-top:14px;flex:none;height:44dvh;min-height:250px;background-color:#FFFFFF;background-image:none;background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:12px}
.plate.model{height:auto;padding-bottom:100%;background-color:#141416;background-size:cover;background-position:center top}
.foot{margin-top:14px;display:flex;align-items:flex-end;justify-content:space-between}
.foot .desde{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--mut)}
.foot .precio{font-family:'Oswald';font-weight:600;font-size:29px;color:var(--tx);line-height:1.05}
.foot .tallas{text-align:right;font-size:11px;font-weight:800;letter-spacing:.2em}
.foot .tallas small{display:block;font-size:9px;color:var(--mut);letter-spacing:.14em;margin-top:3px}

/* lámina colores + tarifario */
h2.sec{font-family:'Oswald';font-weight:600;font-size:22px;text-transform:uppercase;margin-top:18px}
h2.sec small{display:block;font-size:10px;font-family:'Manrope';font-weight:800;letter-spacing:.28em;color:var(--acc);margin-bottom:6px}
.nota{margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--mut)}
.grid{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.grid.c6{grid-template-columns:repeat(3,1fr)}
.grid.c5{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(2,1fr)}
.tile{text-align:center}
.tile .ph{width:100%;padding-bottom:100%;background-color:#FFFFFF;background-size:88%;background-position:center;background-repeat:no-repeat;border-radius:7px}


.tile .n{font-size:8.5px;font-weight:700;letter-spacing:.06em;color:var(--mut);margin-top:5px;text-transform:uppercase}
.tarifa{margin-top:18px;border-top:1px solid var(--line)}
.tr{display:flex;justify-content:space-between;align-items:baseline;padding:10px 2px;border-bottom:1px solid var(--line)}
.tr .c{font-size:12px;font-weight:700;letter-spacing:.08em}
.tr .c small{color:var(--mut);font-weight:600;letter-spacing:.02em;margin-left:8px;font-size:10px}
.tr .p{font-family:'Oswald';font-weight:500;font-size:19px;color:var(--tx)}
.tr.best .c::after{content:'MÁS PEDIDO';font-size:8px;font-weight:800;letter-spacing:.12em;color:var(--acc-soft);background:var(--acc-deep);border-radius:3px;padding:2px 6px;margin-left:8px;vertical-align:2px}
.wa{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--acc);color:var(--acc);border-radius:999px;padding:12px;font-size:12px;font-weight:800;letter-spacing:.12em;text-decoration:none}
.wa svg{width:16px;height:16px;fill:var(--acc);flex:none}
.fine{margin-top:11px;text-align:center;font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--mut)}

/* portada */
.cover .wrap{justify-content:center}
.cover img.biglogo{width:104px;margin-bottom:24px}
.cover .kicker{font-size:10.5px;font-weight:800;letter-spacing:.5em;color:var(--mut)}
.cover h1{font-family:'Oswald';font-weight:600;font-size:58px;line-height:1;text-transform:uppercase;margin-top:10px}
.cover h1 em{font-style:normal;color:var(--acc)}
.cover .sub{margin-top:14px;font-size:13.5px;font-weight:600;color:#BDBDBD}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.badge{font-size:10px;font-weight:700;letter-spacing:.06em;border:1px solid var(--line);color:var(--tx);padding:6px 10px;border-radius:999px}
.cover .swipe{margin-top:38px;font-size:12px;font-weight:700;color:var(--acc);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

/* guía */
.guideimg{width:100%;border-radius:8px;margin-top:16px;border:1px solid var(--line)}
table.guide{width:100%;margin-top:14px;border-collapse:collapse}
.guide th{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:left;padding:9px 2px;border-bottom:1px solid var(--line)}
.guide th:last-child,.guide td:last-child{text-align:right}
.guide td{padding:10px 2px;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line)}
.guide td:last-child{font-family:'Oswald';font-weight:400;color:var(--acc-soft)}

/* contraportada */
.how{margin-top:16px}
.how p{font-size:14px;font-weight:600;color:#BDBDBD;margin:12px 0}
.how b{color:var(--tx)}
.endlogo{width:64px;margin-top:28px;opacity:.9}

/* pager */
.pager{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;background:rgba(11,11,12,.92);border:1px solid var(--line);border-radius:999px;padding:8px 13px;box-shadow:0 6px 24px rgba(0,0,0,.55);z-index:30;backdrop-filter:blur(6px)}
.pgbtn{width:33px;height:33px;border-radius:50%;border:1px solid var(--acc);background:transparent;color:var(--acc);font-size:18px;font-weight:800;cursor:pointer;line-height:1}
.pgbtn:disabled{opacity:.25;cursor:default}
.dots{display:flex;gap:5px;align-items:center}
.dot{width:6px;height:6px;border-radius:50%;background:#2C2C30;transition:all .2s}
.dot.on{background:var(--acc);transform:scale(1.4)}