/* Elementos editoriais da série, sobre o layout existente do Blog. */
.blog-page .series-number{max-width:780px;margin-bottom:48px;color:var(--blog-dark);font:400 clamp(64px,12vw,120px)/1.1 "Roboto Slab",Georgia,serif}
.blog-page .series-number span,.blog-page .series-card-number span{font-size:.45em}
.blog-page .series-card-number{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--blog-dark);background:var(--blog-soft);font:400 72px/1 "Roboto Slab",Georgia,serif}
.blog-page .series-panel{max-width:780px;margin-top:70px;margin-bottom:50px;padding:32px;border-block:1px solid var(--blog-border);background:var(--blog-soft);color:var(--blog-text)}
.blog-page .series-position{font:400 38px "Roboto Slab",Georgia,serif}
.blog-page progress{display:block;width:100%;height:14px;margin:12px 0 24px;accent-color:var(--blog-dark)}
.blog-page .series-panel a,.blog-page .series-index a{color:var(--blog-dark);text-decoration:underline;text-underline-offset:4px}
.blog-page .series-neighbors{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.blog-page .series-tags{font-size:14px;margin-top:28px}
.blog-page .series-index{padding:0;list-style:none}
.blog-page .series-index li{padding:20px 0;border-bottom:1px solid var(--blog-border)}
.blog-page .post-content blockquote{margin:40px 0;padding:12px 0 12px 24px;border-left:3px solid var(--blog-pink);color:var(--blog-text);font-size:22px}
.blog-page .post-content blockquote p{margin:0}
.blog-page .post-content .series-statement{margin:56px 0;font:400 clamp(24px,4vw,34px)/1.45 "Roboto Slab",Georgia,serif;color:var(--blog-dark);border:0;padding:0}
.blog-page .design-process{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 0;list-style:none;padding:26px 0;margin:32px 0;border-block:1px solid var(--blog-border);color:var(--blog-dark);font-size:12px;font-weight:700}
.blog-page .design-process li{margin:0;white-space:nowrap}
.blog-page .design-process li:not(:last-child)::after{content:"→";margin:0 9px}
.blog-page :is(a,button,input,textarea):focus-visible{outline:3px solid var(--blog-dark);outline-offset:4px}
@media(max-width:600px){.blog-page .series-panel{padding:24px 18px}.blog-page .design-process{flex-direction:column;gap:0}.blog-page .design-process li:not(:last-child)::after{display:block;content:"↓";text-align:center;margin:8px 0}.blog-page .post-content h2{font-size:28px}}

/* Dia 02 — equilíbrio entre pessoas, negócio e tecnologia. */
.blog-page .product-balance{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch;margin:46px 0;padding:26px;border-block:1px solid var(--blog-border);background:var(--blog-soft)}
.blog-page .product-balance__area{display:flex;min-height:170px;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;border:1px solid var(--blog-border);border-radius:50%;background:#fff}
.blog-page .product-balance__area strong{color:var(--blog-dark);font:700 15px/1.2 "Roboto Slab",Georgia,serif;text-transform:uppercase;letter-spacing:.05em}
.blog-page .product-balance__area span{margin-top:9px}
.blog-page .product-balance__center{grid-column:1/-1;justify-self:center;width:min(100%,280px);padding:22px;text-align:center;color:#fff;background:var(--blog-dark)}
.blog-page .product-balance__center strong{display:block;font:700 22px/1.2 "Roboto Slab",Georgia,serif;text-transform:uppercase}
.blog-page .product-balance__center span{display:block;margin-top:6px;font-size:13px}
.blog-page .day-exercise{margin:64px 0;padding:36px;border:1px solid var(--blog-border);background:var(--blog-soft)}
.blog-page .day-exercise>h2{margin-top:8px}
.blog-page .day-exercise h3{margin:30px 0 10px;padding-top:22px;border-top:1px solid var(--blog-border);color:var(--blog-dark);font-size:21px}
.blog-page .day-exercise h3:first-of-type{margin-top:24px}
.blog-page .day-exercise p{margin-block:8px}
@media(max-width:600px){.blog-page .product-balance{grid-template-columns:1fr;padding:18px}.blog-page .product-balance__area{min-height:145px;border-radius:22px}.blog-page .product-balance__center{grid-column:auto;width:100%}.blog-page .day-exercise{padding:28px 20px}}

/* Dia 03 — representação editorial do Duplo Diamante. */
.blog-page .double-diamond{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;margin:50px 0;padding:32px 10px;border-block:1px solid var(--blog-border)}
.blog-page .double-diamond__shape{text-align:center}
.blog-page .double-diamond__shape>p{margin:0 0 16px;color:var(--blog-dark);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.blog-page .double-diamond__shape>div{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:230px;padding:42px 20px;isolation:isolate}
.blog-page .double-diamond__shape>div::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blog-soft);border:1px solid var(--blog-pink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.blog-page .double-diamond__shape span{display:flex;flex-direction:column;align-items:center;color:var(--blog-dark)}
.blog-page .double-diamond__shape strong{font:700 15px/1.2 "Roboto Slab",Georgia,serif}
.blog-page .double-diamond__shape small{margin-top:8px;font-size:12px}
.blog-page .double-diamond__transition{color:var(--blog-pink);font-size:30px;font-weight:700}
@media(max-width:700px){.blog-page .double-diamond{grid-template-columns:1fr;gap:20px;padding-inline:0}.blog-page .double-diamond__shape>div{min-height:210px}.blog-page .double-diamond__transition{transform:rotate(90deg);justify-self:center}}

/* Dia 04 — estrutura para definição do problema. */
.blog-page .problem-framework{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:44px 0}
.blog-page .problem-framework>div{display:flex;min-height:190px;flex-direction:column;padding:24px 18px;border:1px solid var(--blog-border);background:var(--blog-soft)}
.blog-page .problem-framework span{color:var(--blog-pink);font:700 13px/1 "Roboto Slab",Georgia,serif;letter-spacing:.08em}
.blog-page .problem-framework strong{margin-top:auto;color:var(--blog-dark);font:700 19px/1.25 "Roboto Slab",Georgia,serif}
.blog-page .problem-framework p{margin:10px 0 0;font-size:14px;line-height:1.5}
@media(max-width:700px){.blog-page .problem-framework{grid-template-columns:1fr 1fr}.blog-page .problem-framework>div{min-height:170px}}
@media(max-width:420px){.blog-page .problem-framework{grid-template-columns:1fr}.blog-page .problem-framework>div{min-height:150px}}

/* Dia 05 — caminho editorial da suposição ao aprendizado. */
.blog-page .research-path{display:flex;align-items:stretch;gap:0;margin:46px 0;padding:0;list-style:none}
.blog-page .research-path li{position:relative;display:flex;min-width:0;flex:1;flex-direction:column;padding:24px 28px 24px 18px;border-block:1px solid var(--blog-border);background:var(--blog-soft)}
.blog-page .research-path li:first-child{border-left:1px solid var(--blog-border)}
.blog-page .research-path li:last-child{border-right:1px solid var(--blog-border)}
.blog-page .research-path li:not(:last-child)::after{content:"→";position:absolute;z-index:2;right:-10px;top:50%;transform:translateY(-50%);color:var(--blog-pink);font-size:22px;font-weight:700}
.blog-page .research-path span{color:var(--blog-pink);font:700 12px/1 "Roboto Slab",Georgia,serif;letter-spacing:.08em}
.blog-page .research-path strong{margin-top:28px;color:var(--blog-dark);font:700 18px/1.25 "Roboto Slab",Georgia,serif}
.blog-page .research-path small{margin-top:8px;font-size:12px;line-height:1.45}
@media(max-width:700px){.blog-page .research-path{flex-direction:column}.blog-page .research-path li{min-height:130px;border:1px solid var(--blog-border)}.blog-page .research-path li+li{border-top:0}.blog-page .research-path li:not(:last-child)::after{content:"↓";right:50%;top:auto;bottom:-15px;transform:translateX(50%)}.blog-page .research-path strong{margin-top:18px}}

/* Dia 06 — atitudes para uma entrevista que gera aprendizado. */
.blog-page .interview-path{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:46px 0;padding:0;list-style:none}
.blog-page .interview-path li{display:flex;min-height:180px;flex-direction:column;padding:22px 18px;border-top:4px solid var(--blog-pink);background:var(--blog-soft)}
.blog-page .interview-path span{color:var(--blog-pink);font:700 12px/1 "Roboto Slab",Georgia,serif;letter-spacing:.08em}
.blog-page .interview-path strong{margin-top:auto;color:var(--blog-dark);font:700 18px/1.25 "Roboto Slab",Georgia,serif}
.blog-page .interview-path small{margin-top:8px;font-size:12px;line-height:1.45}
@media(max-width:700px){.blog-page .interview-path{grid-template-columns:1fr 1fr}.blog-page .interview-path li{min-height:165px}}
@media(max-width:420px){.blog-page .interview-path{grid-template-columns:1fr}.blog-page .interview-path li{min-height:140px}}