:root{ --azul:#1E2D6B; --azul-d:#16224F; --azul2:#3F5FB8; --azul-claro:#DCE6FA; --gris:#f3f5fa; }
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:'Poppins',sans-serif; background:#e9edf5; color:#1c2433; padding:34px 20px 80px; }
.page-head{ max-width:1180px; margin:0 auto 26px; text-align:center; }
.page-head h1{ font-size:26px; color:var(--azul); font-weight:800; }
.page-head p{ font-size:15px; color:#5e6478; margin-top:6px; }
.dl-all{ display:inline-flex; align-items:center; gap:9px; margin-top:16px; background:var(--azul); color:#fff; border:none; font-family:inherit; font-weight:600; font-size:15px; padding:13px 24px; border-radius:10px; cursor:pointer; transition:.2s; }
.dl-all:hover{ background:#0f1838; }

.grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:30px; justify-items:center; }
.item{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.prev{ width:270px; height:480px; border-radius:16px; overflow:hidden; box-shadow:0 14px 40px rgba(22,34,79,.22); }
.scaler{ width:1080px; height:1920px; transform:scale(.25); transform-origin:top left; }
.dl{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--azul); border:1.5px solid var(--azul-claro); font-family:inherit; font-weight:600; font-size:14px; padding:10px 18px; border-radius:9px; cursor:pointer; transition:.2s; }
.dl:hover{ background:var(--azul); color:#fff; border-color:var(--azul); }
.dl svg{ width:16px; height:16px; }

/* ===== STORY 1080x1920 ===== */
.story{ width:1080px; height:1920px; position:relative; overflow:hidden; }
.story.navy{ background:linear-gradient(165deg,#16224F 0%,#1E2D6B 55%,#2A3E7E 100%); color:#fff; }
.story.light{ background:var(--gris); color:#1c2433; }
.story .glow{ position:absolute; width:900px; height:900px; border-radius:50%; background:radial-gradient(circle,rgba(120,150,230,.20),transparent 70%); top:-260px; right:-280px; }
.story.light .accent{ position:absolute; top:0; left:0; width:100%; height:14px; background:linear-gradient(90deg,var(--azul),var(--azul2)); }
.in{ position:absolute; inset:96px; display:flex; flex-direction:column; }
.in.cover{ align-items:center; justify-content:center; text-align:center; }
.eyebrow{ font-size:30px; font-weight:700; letter-spacing:6px; text-transform:uppercase; color:var(--azul2); }
.story.navy .eyebrow{ color:#9fc0ff; }
.spacer{ flex:1; }

.ic{ width:150px; height:150px; border-radius:36px; display:flex; align-items:center; justify-content:center; margin-bottom:44px; }
.ic.ic-lg{ width:190px; height:190px; border-radius:44px; margin-bottom:34px; }
.story.navy .ic{ background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.2); }
.story.light .ic{ background:var(--azul-claro); }
.ic svg{ width:82px; height:82px; }
.ic.ic-lg svg{ width:104px; height:104px; }
.story.navy .ic svg{ stroke:#fff; } .story.light .ic svg{ stroke:var(--azul); }

.num{ font-size:34px; font-weight:700; letter-spacing:2px; margin-bottom:14px; }
.story.navy .num{ color:#9fc0ff; } .story.light .num{ color:var(--azul2); }
.ttl{ font-size:88px; font-weight:800; line-height:1.1; letter-spacing:-1px; }
.story.light .ttl{ color:var(--azul); }
.ttl .hl{ color:#9fc0ff; } .story.light .ttl .hl{ color:var(--azul2); }
.txt{ font-size:44px; font-weight:400; line-height:1.5; margin-top:32px; max-width:860px; }
.story.navy .txt{ color:rgba(255,255,255,.9); }
.story.light .txt{ color:#4a5163; }

/* cover */
.cover-logo{ width:220px; height:220px; object-fit:contain; margin-bottom:30px; }
.cover-h{ font-size:120px; font-weight:800; letter-spacing:-2px; line-height:1.02; }
.story.light .cover-h{ color:var(--azul); }
.cover-h .hl{ color:#9fc0ff; } .story.light .cover-h .hl{ color:var(--azul2); }
.cover-sub{ font-size:46px; font-weight:400; line-height:1.4; margin-top:28px; max-width:820px; }
.story.navy .cover-sub{ color:rgba(255,255,255,.9); } .story.light .cover-sub{ color:#4a5163; }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:22px; margin-top:44px; max-width:900px; }
.chip{ font-size:40px; font-weight:600; padding:20px 34px; border-radius:60px; }
.story.navy .chip{ background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.22); }
.story.light .chip{ background:var(--azul-claro); color:var(--azul); }

/* brand bar */
.brand-bar{ position:absolute; left:96px; right:96px; bottom:90px; display:flex; align-items:center; gap:22px; }
.brand-bar img{ width:78px; height:78px; object-fit:contain; }
.brand-bar .bt{ font-size:32px; font-weight:600; }
.story.navy .brand-bar .bt{ color:rgba(255,255,255,.85); }
.story.light .brand-bar .bt{ color:var(--azul); }