/* ============================================================
   PIDE YA — Manual de Marca  ·  Stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root{
  --red:#D83429;
  --red-dark:#A8231B;
  --ya:#D83429;        /* rojo Ñam */
  --red-soft:#FBEAE8;
  --ink:#1A1A1D;
  --gray:#757275;
  --gray-2:#9A989A;
  --soft:#F2F2F2;
  --line:#E7E5E7;
  --white:#FFFFFF;

  --page-w:794px;
  --page-h:1123px;
  --mx:72px;        /* horizontal page margin */
  --mt:60px;        /* top margin */

  --font:'Poppins',system-ui,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  background:#D9D8DA;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding:48px 0 80px;
}

/* ---------- page shell ---------- */
.book{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:36px;
}
.page{
  position:relative;
  width:var(--page-w);
  height:var(--page-h);
  background:var(--white);
  overflow:hidden;
  box-shadow:0 18px 50px -20px rgba(26,26,29,.45);
  display:flex;
  flex-direction:column;
}
.page.pad{ padding:var(--mt) var(--mx) 0; }

/* running header */
.pp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:30px;
  flex:0 0 auto;
}
.pp-head .hl{ display:flex; align-items:center; gap:9px; }
.pp-head .hl img{ height:20px; width:auto; display:block; }
.pp-head .hl b{ font-weight:700; font-size:12px; letter-spacing:.02em; }
.pp-head .hl b span{ color:var(--ya); }
.pp-head .sec{
  font-size:9.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gray);
}
.pp-head .sec i{ color:var(--red); font-style:normal; }

/* running footer */
.pp-foot{
  position:absolute;
  left:var(--mx); right:var(--mx); bottom:34px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-2);
  font-weight:500;
}
.pp-foot .pno{ color:var(--ink); font-weight:600; }
.pp-foot .pno b{ color:var(--red); }

.pp-body{ flex:1 1 auto; padding-top:24px; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.pp-body.top{ justify-content:flex-start; }

/* ---------- typography helpers ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--red);
}
.kicker::before{ content:''; width:26px; height:2px; background:var(--red); border-radius:2px; }

.h-display{ font-weight:700; font-size:46px; line-height:1.02; letter-spacing:-.02em; }
.h1{ font-weight:700; font-size:36px; line-height:1.04; letter-spacing:-.02em; margin:0; }
.h2{ font-weight:600; font-size:22px; line-height:1.12; letter-spacing:-.01em; margin:0; }
.h3{ font-weight:600; font-size:15px; line-height:1.2; margin:0; }
.lead{ font-size:15.5px; line-height:1.62; color:#3a393b; font-weight:400; }
.body{ font-size:11.5px; line-height:1.72; color:#46454a; font-weight:400; }
.small{ font-size:10px; line-height:1.6; color:var(--gray); }
.mono-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

.red{ color:var(--red); }
.muted{ color:var(--gray); }

/* big ghost section numeral */
.ghost-no{
  position:absolute; top:88px; right:56px;
  font-size:150px; font-weight:800; line-height:.8;
  color:var(--soft); letter-spacing:-.04em; z-index:-1; user-select:none; pointer-events:none;
}

/* page title block */
.titleblock{ position:relative; z-index:1; }
.titleblock .h1{ margin-top:16px; max-width:560px; }
.titleblock .sub{ margin-top:16px; max-width:480px; }

/* ---------- speed-lines brand motif ---------- */
.speed{ display:flex; flex-direction:column; gap:5px; }
.speed i{ height:5px; border-radius:9px; background:var(--red); display:block; }
.speed i:nth-child(1){ width:34px; opacity:.4; }
.speed i:nth-child(2){ width:52px; opacity:.62; }
.speed i:nth-child(3){ width:40px; opacity:.85; }
.speed i:nth-child(4){ width:60px; }

/* ---------- generic blocks ---------- */
.rule{ height:1px; background:var(--line); border:0; width:100%; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:999px; font-size:10px; font-weight:600;
  letter-spacing:.04em; background:var(--soft); color:var(--ink);
}
.chip.red{ background:var(--red); color:#fff; }
.chip.out{ background:transparent; border:1.5px solid var(--line); color:var(--gray); }

.card{ border:1px solid var(--line); border-radius:16px; padding:22px; background:#fff; }

/* do / dont marks */
.mark{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mark.ok{ background:#E8F5E9; color:#2E7D32; }
.mark.no{ background:var(--red-soft); color:var(--red-dark); }
.mark svg{ width:14px; height:14px; }

/* lucide default */
[data-lucide]{ width:20px; height:20px; stroke-width:1.9; }

/* ---------- print ---------- */
@page{ size:A4 portrait; margin:0; }
@media print{
  body{ background:#fff; padding:0; }
  .book{ gap:0; }
  .page{ box-shadow:none; break-after:page; page-break-after:always; }
  .page:last-child{ break-after:auto; }
}