/* ==========================================================================
   Página de diseño gráfico — solo la maqueta del hero.
   En el navegador, una página de manual de marca: símbolo, paleta,
   tipografía y piezas. En el móvil, un cartel de campaña.
   Reutiliza los marcos de web-service.css.
   ========================================================================== */

.dg-board{padding:18px 20px 15px;display:flex;flex-direction:column;gap:14px}

/* ---------- Símbolo ---------- */
.dg-mark{display:flex;align-items:center;gap:9px;padding-bottom:13px;border-bottom:1px solid rgba(27,24,21,.14)}
.dg-mark__glyph{
  width:28px;height:28px;border-radius:7px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;
}
.dg-mark__name{font-size:15px;font-weight:500;letter-spacing:-.05em;color:#1b1815}

/* ---------- Paleta ---------- */
.dg-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.dg-swatches i{display:block;height:26px;border-radius:4px;border:1px solid rgba(27,24,21,.1)}

/* ---------- Tipografía ---------- */
.dg-type{
  display:flex;align-items:center;gap:11px;
  border:1px solid rgba(27,24,21,.13);border-radius:5px;padding:8px 10px;background:#fff;
}
.dg-type__aa{font-size:26px;font-weight:500;letter-spacing:-.06em;line-height:1;color:#1b1815}
.dg-type__n{display:block;font-size:8px;font-weight:600;color:#1b1815}
.dg-type__d{display:block;font-size:6.5px;line-height:1.6;color:#8c8279;margin-top:2px}

/* ---------- Piezas ---------- */
.dg-pieces{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dg-piece{
  display:flex;align-items:flex-end;justify-content:center;
  height:46px;border-radius:4px;padding-bottom:5px;
  font-size:6.5px;letter-spacing:.06em;text-transform:uppercase;
}
.dg-piece--card{background:rgba(27,24,21,.1);color:#5f5952}
.dg-piece--poster{background:rgba(227,101,57,.22);color:#a8401f}
.dg-piece--social{background:rgba(201,150,46,.22);color:#8a6512}

/* ---------- Móvil: el cartel ---------- */
.dg-poster__k{
  display:inline-block;font-size:6.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#6f675f;
  border:1px solid rgba(27,24,21,.2);border-radius:3px;padding:2px 5px;
}
.dg-poster{
  margin-top:12px;border-radius:6px;padding:14px 12px 12px;
  background:linear-gradient(160deg,#1b1815,#3a2d25);
  display:flex;flex-direction:column;
}
.dg-poster__big{
  font-size:29px;line-height:.98;font-weight:500;letter-spacing:-.06em;color:#fff;
}
.dg-poster__big--o{color:#e36539}
.dg-poster__foot{
  margin-top:18px;font-size:7px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

@media (max-width:560px){
  .dg-board{padding:14px 15px 12px;gap:11px}
  .dg-swatches i{height:20px}
  .dg-poster__big{font-size:24px}
}