/* Estudo 02 aprovado: a prancha conceitual antecede as famílias funcionais. */
.aled-home #componentes.passage-components-follow{padding:0;background:#f1f0eb;color:#111}
.component-story{background:#f1f0eb;color:#111;padding:42px 0 82px}
.component-story-mark{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #c9cbc3;padding-bottom:15px;margin-bottom:58px;font:9px/1.5 Mono,monospace;letter-spacing:.1em;color:#60635a}
.component-story-mark span:first-child{color:#111}
.component-story-heading{display:grid;grid-template-columns:.35fr 1.45fr .7fr;align-items:start;gap:clamp(24px,3vw,48px);margin-bottom:50px}
.component-story-heading .eyebrow{padding-top:12px;color:#30352b;font-size:9px}
.component-story-heading h2{font:500 clamp(44px,5.1vw,76px)/1.07 Manrope,Inter,sans-serif;letter-spacing:-.065em}
.component-story-heading h2 span{color:#666960}
.component-story-heading>p:last-child{max-width:340px;padding-top:9px;color:#53574e;font:14px/1.75 Inter,Arial,sans-serif}
.component-story-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,.54fr);align-items:stretch;gap:clamp(28px,3vw,46px)}
.component-story-figure{min-width:0;border:1px solid #d2d4cb;background:#f8f8f5}
.component-story-figure img{display:block;width:100%;height:auto;object-fit:contain}
.component-story-figure figcaption{padding:16px 20px;border-top:1px solid #d2d4cb;color:#555b50;font:9px/1.55 Mono,monospace;letter-spacing:.075em}
.component-story-legend{display:flex;flex-direction:column;min-width:0}
.component-story-legend>div{border-top:1px solid #babdb2;padding:19px 0 23px}
.component-story-legend>div>span{color:#4f7612;font:10px/1.4 Mono,monospace;letter-spacing:.1em}
.component-story-legend h3{margin:9px 0 7px;font:500 clamp(31px,3vw,41px)/1.1 Manrope,Inter,sans-serif;letter-spacing:-.055em}
.component-story-legend>div>p{max-width:280px;color:#52564e;font:13px/1.65 Inter,Arial,sans-serif}
.component-story-warning{margin-top:auto;border-top:1px solid #babdb2;padding-top:19px;color:#53574e;font:12px/1.7 Inter,Arial,sans-serif}
.component-story-index{margin-top:62px;scroll-margin-top:105px}
.component-story-index-heading{display:grid;grid-template-columns:.35fr 1.45fr .7fr;align-items:start;gap:clamp(24px,3vw,48px);border-top:1px solid #babdb2;padding-top:34px;margin-bottom:30px}
.component-story-index-heading .eyebrow{padding-top:6px;color:#30352b;font-size:9px}
.component-story-index-heading h3{font:500 clamp(28px,3vw,41px)/1.12 Manrope,Inter,sans-serif;letter-spacing:-.055em}
.component-story-index-heading>p:last-child{max-width:340px;color:#53574e;font:13px/1.7 Inter,Arial,sans-serif}
.component-story-routes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.component-route{display:grid;grid-template-rows:auto auto 1fr;position:relative;min-height:160px;padding:18px 18px 22px;border:1px solid #c8cac2;background:#f7f7f3;color:#111;text-align:left;transition:background .2s,border-color .2s}
.component-route:hover{background:#fff;border-color:#50564b}
.component-route:focus-visible{outline:2px solid #4a7010;outline-offset:3px}
.component-route-number{color:#557c19;font:9px/1.5 Mono,monospace;letter-spacing:.08em}
.component-route strong{max-width:190px;margin:18px 0 8px;font:500 clamp(17px,1.45vw,22px)/1.15 Manrope,Inter,sans-serif;letter-spacing:-.035em}
.component-route small{max-width:200px;padding-right:12px;color:#575a53;font:11px/1.55 Inter,Arial,sans-serif}
.component-route>.icon{position:absolute;right:16px;top:17px;width:17px;height:17px;transition:transform .2s}
.component-route:hover>.icon{transform:translate(3px,-3px)}
.component-story-end{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:28px;border-top:1px solid #babdb2;padding-top:19px}
.component-story-end>p{max-width:680px;color:#4c5048;font-size:12px;line-height:1.7}
.component-story-end>a{display:inline-flex;align-items:center;gap:26px;min-height:44px;border-bottom:1px solid #111;font-size:12px;font-weight:600;white-space:nowrap}
.component-story-end>a .icon{width:19px;height:19px;transition:transform .2s}
.component-story-end>a:hover .icon{transform:translate(3px,-3px)}
.component-story-end>a:focus-visible{outline-color:#527914}
.component-story-review-note{max-width:780px;margin-top:13px;color:#666960;font-size:10px;line-height:1.6}
@media(max-width:1100px){
  .component-story-heading{grid-template-columns:.4fr 1.6fr;gap:20px 30px}
  .component-story-heading>p:last-child{grid-column:2;max-width:550px;padding-top:0}
  .component-story-layout{grid-template-columns:minmax(0,1.3fr) minmax(210px,.7fr)}
  .component-story-index-heading{grid-template-columns:.4fr 1.6fr;gap:20px 30px}
  .component-story-index-heading>p:last-child{grid-column:2;max-width:550px}
  .component-story-routes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .component-route{min-height:145px}
}
@media(max-width:700px){
  .component-story{padding:34px 0 62px}
  .component-story-mark{margin-bottom:38px;font-size:8px}
  .component-story-mark span:last-child{text-align:right}
  .component-story-heading,.component-story-layout{grid-template-columns:1fr}
  .component-story-heading{gap:18px;margin-bottom:34px}
  .component-story-heading .eyebrow{padding-top:0}
  .component-story-heading h2{font-size:clamp(40px,10.5vw,58px)}
  .component-story-heading>p:last-child{grid-column:auto;font-size:13px}
  .component-story-layout{gap:28px}
  .component-story-figure figcaption{padding:13px;font-size:8px}
  .component-story-legend{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .component-story-legend h3{font-size:30px}
  .component-story-warning{grid-column:1/-1;margin-top:8px}
  .component-story-index{margin-top:46px}
  .component-story-index-heading{grid-template-columns:1fr;gap:13px;padding-top:25px;margin-bottom:25px}
  .component-story-index-heading .eyebrow{padding-top:0}
  .component-story-index-heading h3{font-size:32px}
  .component-story-index-heading>p:last-child{grid-column:auto}
  .component-story-routes{gap:8px}
  .component-route{min-height:140px;padding:15px}
  .component-route strong{font-size:18px}
  .component-route>.icon{right:13px;top:13px}
  .component-story-end{align-items:flex-start;flex-direction:column;gap:12px}
}
@media(max-width:400px){.component-story-legend,.component-story-routes{grid-template-columns:1fr}.component-story-warning{grid-column:auto}.component-route{min-height:112px}.component-route strong{margin:12px 0 6px}}
@media(prefers-reduced-motion:reduce){.component-story-end>a .icon,.component-route,.component-route>.icon{transition:none}}