/* ───────── Figuras de las guías del DeCA (deca-*) ─────────
   Las mismas figuras de ../landing-v2/blog/deca-visuals.css (portada, foto del conductor,
   esquemas de pasos y lista de comprobaciones), vestidas con el diseño oscuro. Solo la cargan
   las páginas que las usan (build.mjs), así las demás conservan su huella ?v=. */

.prosa .deca-cover, .prosa .deca-photo { margin: 40px 0 0; }
.prosa .deca-cover img, .prosa .deca-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 16px; border: 1px solid var(--line-2); background: #141416; }
.prosa .deca-cover figcaption, .prosa .deca-photo figcaption { max-width: 850px; margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

.prosa .deca-photo { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; gap: 28px; margin-block: 32px; padding: 24px; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(255, 255, 255, 0.025); }
.prosa .deca-photo img { aspect-ratio: 4 / 5; object-position: center; border-radius: 12px; }
.prosa .deca-photo figcaption { margin: 0; }
.prosa .deca-photo strong { display: block; color: #fff; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; font-weight: 400; letter-spacing: -0.025em; }
.prosa .deca-photo small { display: block; margin-top: 16px; font-size: 12px; line-height: 1.7; color: var(--muted); }

.prosa .deca-kicker, .prosa .deca-photo .deca-kicker { display: block; margin: 0 0 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-hi); }

/* La portada usa .deca-visual como rejilla centrada (css/secciones.css): aquí es un bloque, y sin
   `justify-items: normal` los navegadores que alinean bloques seguirían centrando y encogiendo
   cada pieza. */
.prosa .deca-visual { display: block; justify-items: normal; margin: 32px 0; padding: 28px; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(255, 255, 255, 0.025); overflow-wrap: anywhere; }
.prosa .deca-visual .deca-title { margin: 0 0 24px; color: #fff; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.3; letter-spacing: -0.03em; font-weight: 400; text-wrap: balance; }
.prosa .deca-flow { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.prosa .deca-step { min-width: 0; padding: 20px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: #141416; }
.prosa .deca-step-contract { border-color: rgba(216, 69, 92, 0.6); background: rgba(216, 69, 92, 0.08); }
.prosa .deca-step-carrier { border-color: rgba(255, 255, 255, 0.32); }
.prosa .deca-icon { display: block; width: 36px; height: 36px; margin-bottom: 20px; color: var(--brand-hi); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.prosa .deca-step-client .deca-icon { color: var(--muted); }
.prosa .deca-visual .deca-step-name { display: block; margin-bottom: 9px; color: #fff; font-size: 16px; line-height: 1.35; letter-spacing: -0.02em; font-weight: 500; }
.prosa .deca-visual a.deca-step-name { text-decoration-color: var(--line-2); }
.prosa .deca-visual a.deca-step-name:hover { color: #F3B4BE; text-decoration-color: #F3B4BE; }
.prosa .deca-visual .deca-step-detail { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.prosa .deca-visual .deca-role { display: block; margin-bottom: 9px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; letter-spacing: 0.04em; color: #F3B4BE; }
.prosa .deca-step-carrier .deca-role { color: #E6E4E1; }
.prosa .deca-arrow { align-self: center; width: 18px; height: 18px; color: var(--dim); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.prosa .deca-visual .deca-caption { margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.prosa .deca-caption strong { color: #fff; font-weight: 500; }
.prosa .deca-visual .deca-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 20px 0 0; margin: 20px 0 0; border-top: 1px solid var(--line); }
.prosa .deca-visual .deca-checks li { padding: 0; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.prosa .deca-checks strong { display: block; margin-bottom: 4px; color: #fff; font-size: 13px; line-height: 1.5; font-weight: 500; }

/* Portada del blog: la entrada con imagen va en dos columnas. */
.prosa .blog-listing-compact.deca-listing { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 32px; }
.prosa .deca-listing-image { display: block; align-self: start; padding: 0; }
.prosa .deca-listing-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; border: 1px solid var(--line-2); background: #141416; }

@media (max-width: 1000px) {
  .prosa .deca-flow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .prosa .deca-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; padding: 18px 16px; }
  .prosa .deca-icon { grid-column: 1; grid-row: 1 / span 3; width: 32px; height: 32px; margin: 0; }
  .prosa .deca-step-name, .prosa .deca-role, .prosa .deca-step-detail { grid-column: 2; }
  .prosa .deca-arrow { justify-self: center; transform: rotate(90deg); }
  .prosa .deca-visual .deca-checks { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 700px) {
  .prosa .deca-cover { margin-top: 28px; }
  .prosa .blog-listing-compact.deca-listing { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .prosa .deca-visual { padding: 22px 18px; margin-block: 28px; }
}
@media (max-width: 540px) {
  .prosa .deca-photo { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 18px; }
  .prosa .deca-photo img { aspect-ratio: 16 / 10; max-height: 260px; }
}
@media print {
  .prosa .deca-cover, .prosa .deca-photo, .prosa .deca-visual { break-inside: avoid; }
  .prosa .deca-visual, .prosa .deca-step, .prosa .deca-photo { background: none; border-color: #999; }
  .prosa .deca-visual .deca-title, .prosa .deca-visual .deca-step-name, .prosa .deca-checks strong, .prosa .deca-caption strong { color: #000; }
}