/* /compromiso · página interior de la libreta (Opositia Tela, R178/016).
   Reutiliza las fuentes y tokens de k/landing.css y la mesa de r178/cover.css. */
.comp-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:min(1060px,100% - 2.5rem);margin:0 auto;padding:18px 0 6px
}
.comp-top .brand{font-size:1.45rem}
.comp-top nav{display:flex;flex-wrap:wrap;gap:.2rem}
.comp-top nav a{font:700 .95rem Atkinson,sans-serif;color:#163d2f;text-decoration:none;padding:.55rem .75rem;border-radius:10px}
.comp-top nav a:hover{background:#163d2f12}
.comp-top nav a[aria-current="page"]{background:#163d2f;color:#fcf9ef}

.comp-desk{padding:20px 24px 64px;min-height:0}
.comp-sheet{
  position:relative;max-width:880px;margin:0 auto;
  background:#fcf9ef;
  background-image:linear-gradient(#afc9c326 1px,transparent 1px),linear-gradient(90deg,#afc9c326 1px,transparent 1px);
  background-size:26px 26px;
  border:1px solid #d9d8c8;border-radius:12px 24px 24px 12px;
  box-shadow:3px 4px 0 #dddcca,9px 11px 0 #295c46,19px 25px 36px #23483025;
  padding:clamp(30px,5vw,58px) clamp(22px,6vw,72px) clamp(36px,5vw,58px) clamp(58px,8vw,92px)
}
.comp-holes{
  position:absolute;left:15px;top:36px;bottom:36px;width:14px;pointer-events:none;
  background-image:radial-gradient(circle at 7px 7px,#e9e7dc 4.4px,#c9c5b2 5px,transparent 5.6px);
  background-size:14px 56px;background-repeat:repeat-y
}
.comp-sheet::before{
  content:"";position:absolute;left:46px;top:0;bottom:0;
  border-left:1px solid #dcbbb066;pointer-events:none
}

.comp-page .kicker{color:#295c46}
.comp-page h1{font-size:clamp(2rem,4.6vw,3.1rem);margin:.6rem 0 1rem;max-width:22ch}
.comp-page .intro{font-size:1.12rem;max-width:56ch}
.comp-note{
  margin-top:1.3rem;max-width:56ch;transform:rotate(-.4deg);
  background:#fbe3ec;border:1.5px solid #e8b7c7;border-radius:12px;
  padding:.8rem 1rem;font-size:.95rem;color:#5d3442
}

.comp-promise{margin-top:1.8rem}
.comp-promise p+p{margin-top:.6rem}
.comp-h{margin-top:2.6rem;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.comp-conds{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.7rem;counter-reset:c}
.comp-conds li{
  position:relative;background:var(--raised);border:1.5px solid var(--line);
  border-radius:var(--r-m);padding:1rem 1.1rem 1rem 3.4rem
}
.comp-conds li::before{
  counter-increment:c;content:counter(c);position:absolute;left:1rem;top:1rem;
  width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:9px;
  background:#295c46;color:#fff;font:700 .95rem Atkinson,sans-serif
}
.comp-noes{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem}
.comp-noes li{display:flex;gap:.6rem;align-items:flex-start}
.comp-noes b{
  flex:none;font:700 .78rem Atkinson,sans-serif;padding:.15rem .55rem;
  border-radius:999px;margin-top:.15rem;background:var(--red-bg);color:var(--red)
}
.comp-page .faq{margin-top:1.2rem}
.comp-page .faq summary::after{color:#295c46}
.comp-legend{margin-top:2.2rem;font:600 .95rem/1.5 "Nunito Sans",sans-serif;color:var(--muted)}
.comp-back{margin-top:1.4rem}

.comp-foot{padding:0 0 3rem;font-size:.92rem;color:var(--muted)}
.comp-foot .wrap{width:min(880px,100% - 2.5rem)}
.comp-foot ol{padding-left:1.2rem;display:grid;gap:.35rem;margin:.6rem 0 0}
.comp-foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1.6rem}
.comp-foot nav a{font:700 .9rem Atkinson,sans-serif}

@media (max-width:650px){
  .comp-desk{padding:12px 10px 40px}
  .comp-sheet{border-radius:11px;padding-left:52px}
  .comp-sheet::before{left:38px}
  .comp-holes{left:10px}
}