/* solucoes.css — seção 02: Masterplan, pipeline da jornada, Orbital, Selo MTE, carrossel dos 6 sistemas, caso de propósito
   Extraído do build original (assets/index-C_bOfxLt.css) preservando a ordem da cascata. */

.solutions-section {
    background: var(--paper);
    padding: clamp(100px, 9vw, 144px) 0;
    overflow: hidden
}

.solutions-intro h2 {
    max-width: 1050px
}

.solutions-intro>div>p {
    max-width: 760px;
    color: var(--ink-soft);
    margin: 28px 0 0;
    font-size: 18px;
    line-height: 1.6
}

.journey-board {
    background: var(--paper-light);
    border: 1px solid #1558873d;
    margin-top: clamp(60px, 6vw, 88px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 60px #08233a14
}

.masterplan-heading {
    background: radial-gradient(circle at 88% 18%, #6e9fc43d, transparent 30%), linear-gradient(135deg, var(--navy-900), var(--navy-950));
    color: var(--white);
    grid-template-columns: minmax(0, 7fr) minmax(290px, 5fr);
    align-items: end;
    gap: clamp(34px, 5vw, 76px);
    padding: clamp(32px, 4vw, 54px);
    display: grid
}

.masterplan-kicker {
    color: var(--blue-300);
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 18px;
    font-size: 10px;
    font-weight: 700
}

.masterplan-heading h3 {
    max-width: 760px;
    font-family: var(--serif);
    letter-spacing: -.045em;
    margin: 0;
    font-size: clamp(34px, 3.8vw, 55px);
    font-weight: 400;
    line-height: 1.02
}

.masterplan-heading>div>p:last-child {
    color: #ffffffb3;
    max-width: 760px;
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.6
}

.masterplan-scopes {
    border-top: 1px solid #ffffff2e;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.masterplan-scopes li {
    color: #ffffffb8;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-bottom: 1px solid #ffffff2e;
    padding: 15px 12px 15px 20px;
    font-size: 10px;
    font-weight: 600;
    position: relative
}

.masterplan-scopes li:before {
    background: var(--blue-300);
    content: "";
    border-radius: 50%;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.masterplan-scopes li:last-child {
    grid-column: 1/-1
}

.masterplan-content {
    background: #e7f0f652;
    padding: 14px
}

.journey-track {
    border: 1px solid var(--line);
    background: var(--line);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    display: grid
}

.journey-track article {
    background: var(--paper-light);
    min-height: 310px;
    padding: 28px clamp(22px, 2.3vw, 34px) 34px;
    position: relative
}

.journey-track article:before {
    background: var(--blue-700);
    content: "";
    width: 84px;
    height: 3px;
    position: absolute;
    top: -1px;
    left: 0
}

.journey-step-top {
    align-items: center;
    gap: 0;
    margin-bottom: 34px;
    display: flex
}

.journey-step-top span {
    border: 1px solid var(--blue-700);
    width: 36px;
    height: 36px;
    color: var(--blue-700);
    letter-spacing: .1em;
    border-radius: 50%;
    place-items: center;
    font-size: 9px;
    font-weight: 700;
    display: grid
}

.journey-step-top i {
    background: linear-gradient(90deg, var(--blue-500), transparent);
    width: calc(100% - 36px);
    height: 1px
}

.journey-question {
    min-height: 42px;
    color: var(--blue-700);
    font-family: var(--serif);
    margin: 18px 0 0;
    font-size: clamp(17px, 1.35vw, 21px);
    font-style: italic;
    line-height: 1.24
}

.journey-track h4 {
    font-family: var(--serif);
    letter-spacing: -.04em;
    margin: 0;
    font-size: clamp(30px, 2.7vw, 41px);
    font-weight: 400;
    line-height: 1
}

.journey-copy {
    max-width: 360px;
    color: var(--ink-soft);
    margin: 17px 0 0;
    font-size: 15px;
    line-height: 1.58
}

.journey-orbital {
    background: radial-gradient(circle at 10% 50%, #6e9fc433, transparent 28%), var(--navy-900);
    color: var(--white);
    grid-template-columns: 2.4fr 7.6fr;
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
    margin-top: 14px;
    padding: 24px clamp(24px, 3vw, 40px);
    display: grid;
    position: relative;
    overflow: hidden
}

.journey-orbital:after {
    background: linear-gradient(90deg, var(--blue-500), transparent);
    content: "";
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 28%;
    right: -5%
}

.journey-layer-name {
    align-items: center;
    gap: 15px;
    display: flex
}

.journey-layer-name>div:last-child {
    gap: 6px;
    display: grid
}

.journey-layer-name strong {
    font-family: var(--serif);
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 400;
    line-height: 1
}

.journey-layer-name small {
    color: #ffffff85;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-size: 8px;
    font-weight: 600
}

.orbital-symbol {
    border: 1px solid #b7d1e480;
    border-radius: 50%;
    flex: none;
    width: 48px;
    height: 48px;
    position: relative
}

.orbital-symbol:before {
    border: 1px solid var(--blue-300);
    content: "";
    border-radius: 50%;
    position: absolute;
    inset: 11px 5px;
    transform: rotate(-20deg)
}

.orbital-symbol:after {
    background: var(--blue-300);
    content: "";
    border-radius: 50%;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 10px;
    right: 7px;
    box-shadow: 0 0 0 4px #b7d1e41f
}

.orbital-symbol i {
    background: var(--blue-500);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 19px;
    left: 19px
}

.journey-orbital span {
    color: var(--blue-300);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700
}

.journey-orbital p {
    color: #ffffffad;
    max-width: 750px;
    margin: 7px 0 0;
    font-size: 14px;
    line-height: 1.55
}

.journey-quality {
    background: var(--blue-100);
    border: 1px solid #1558873b;
    grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr);
    align-items: center;
    gap: clamp(30px, 4vw, 58px);
    margin-top: 14px;
    padding: clamp(25px, 3vw, 38px);
    display: grid
}

.quality-intro {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 20px;
    display: grid
}

.quality-seal {
    width: 82px;
    height: 82px;
    color: var(--blue-700);
    background: #ffffff80;
    border: 1px solid #1558875c;
    border-radius: 50%;
    place-items: center;
    display: grid;
    position: relative;
    box-shadow: inset 0 0 0 6px #1558870f
}

.quality-seal:before,
.quality-seal:after {
    border: solid var(--blue-500);
    content: "";
    border-width: 0 1px;
    width: 12px;
    height: 20px;
    position: absolute
}

.quality-seal:before {
    bottom: -12px;
    left: 24px;
    transform: rotate(18deg)
}

.quality-seal:after {
    bottom: -12px;
    right: 24px;
    transform: rotate(-18deg)
}

.quality-seal span {
    font-family: var(--serif);
    margin-top: 10px;
    font-size: 24px;
    line-height: 1
}

.quality-seal i {
    letter-spacing: 1px;
    margin-top: -9px;
    font-size: 7px;
    font-style: normal
}

.quality-intro strong {
    font-family: var(--serif);
    font-size: clamp(25px, 2.2vw, 33px);
    font-weight: 400;
    line-height: 1;
    display: block
}

.quality-intro>div:last-child>span {
    color: var(--blue-700);
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-top: 8px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.35;
    display: block
}

.quality-intro p {
    max-width: 430px;
    color: var(--ink-soft);
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5
}

.quality-criteria {
    border-top: 1px solid #1558873d;
    border-bottom: 1px solid #1558873d;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.quality-criteria li {
    min-height: 82px;
    color: var(--blue-700);
    letter-spacing: .045em;
    text-transform: uppercase;
    border-right: 1px solid #1558872e;
    align-content: center;
    gap: 11px;
    padding: 15px 13px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    display: grid
}

.quality-criteria li:last-child {
    border-right: 0
}

.quality-criteria li span {
    color: var(--blue-500);
    letter-spacing: .12em;
    font-size: 8px
}

.masterplan-summary {
    background: var(--paper-light);
    border-top: 1px solid #15588733;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    display: grid
}

.masterplan-summary>* {
    color: var(--ink-soft);
    border-right: 1px solid #15588729;
    padding: 18px clamp(20px, 2.4vw, 34px);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4
}

.masterplan-summary>:last-child {
    border-right: 0
}

.masterplan-summary strong {
    color: var(--blue-700);
    font-weight: 700
}

.journey-step-top strong,
.systems-stage-label {
    color: var(--blue-700);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700
}

.systems-stage {
    border-top: 1px solid var(--line);
    background: linear-gradient(#e7f0f642, #0000 46%);
    margin-top: clamp(96px, 9vw, 132px);
    padding-top: clamp(44px, 5vw, 66px);
    position: relative
}

.systems-stage:before,
.systems-stage:after {
    content: "";
    position: absolute;
    left: 50%
}

.systems-stage:before {
    background: var(--blue-500);
    width: 1px;
    height: 46px;
    top: -46px
}

.systems-stage:after {
    border: 2px solid var(--paper);
    background: var(--blue-700);
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 1px var(--blue-700);
    border-radius: 50%;
    top: -50px;
    transform: translate(-4px)
}

.systems-stage-label {
    margin: 0 0 17px
}

.systems-heading {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 30px;
    margin-top: 0;
    display: grid
}

.systems-heading h3 {
    max-width: 800px;
    font-family: var(--serif);
    letter-spacing: -.04em;
    margin: 0;
    font-size: clamp(36px, 4vw, 58px);
    font-weight: 400;
    line-height: 1.02
}

.systems-subtitle {
    max-width: 760px;
    color: var(--ink-soft);
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 1.55
}

.carousel-controls {
    grid-template-columns: 48px auto 48px;
    align-items: center;
    gap: 12px;
    display: grid
}

.carousel-controls button {
    border: 1px solid var(--line);
    width: 48px;
    height: 48px;
    color: var(--ink);
    cursor: pointer;
    background: 0 0;
    border-radius: 50%;
    place-items: center;
    font-size: 19px;
    transition: background .2s, color .2s, opacity .2s;
    display: grid
}

.carousel-controls button:hover:not(:disabled) {
    background: var(--navy-900);
    color: var(--white)
}

.carousel-controls button:disabled {
    opacity: .28;
    cursor: not-allowed
}

.carousel-controls span {
    text-align: center;
    min-width: 66px;
    color: var(--ink-soft);
    letter-spacing: .12em;
    font-size: 11px;
    font-weight: 600
}

.carousel-controls .carousel-dots {
    justify-content: center;
    gap: 6px;
    min-width: 66px;
    display: flex
}

.carousel-dots i {
    background: #071e3b33;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    transition: width .2s, background .2s;
    display: block
}

.carousel-dots i.active {
    background: var(--blue-700);
    border-radius: 999px;
    width: 18px
}

.carousel-progress {
    background: #071e3b1a;
    width: min(1320px, 100% - 96px);
    height: 2px;
    margin: 34px auto 24px
}

.carousel-progress span {
    background: var(--blue-700);
    height: 100%;
    transition: width .25s;
    display: block
}

.systems-carousel {
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--blue-500) transparent;
    scrollbar-width: thin;
    grid-auto-columns: minmax(340px, 28vw);
    grid-auto-flow: column;
    gap: 20px;
    padding: 0 max(48px, 50vw - 660px) 28px;
    scroll-padding-left: max(48px, 50vw - 660px);
    display: grid;
    overflow-x: auto
}

.system-card {
    border: 1px solid var(--line);
    background: var(--paper-light);
    scroll-snap-align: start;
    min-height: 550px;
    transition: transform .22s, border-color .22s, box-shadow .22s;
    overflow: hidden
}

.system-card:hover {
    border-color: var(--blue-700);
    transform: translateY(-4px);
    box-shadow: 0 18px 42px #071e3b17
}

.system-image {
    aspect-ratio: 1;
    background-color: var(--blue-100);
    background-image: url(../images/system-creatives-sprite.png);
    background-repeat: no-repeat;
    background-size: 300% 200%;
    transition: filter .22s, transform .22s;
    position: relative;
    overflow: hidden
}

.system-card:hover .system-image {
    filter: saturate(1.05)contrast(1.02)
}

.system-image:after {
    content: "";
    background: linear-gradient(#0000 58%, #020b1675);
    position: absolute;
    inset: 0
}

.system-image span {
    z-index: 2;
    color: var(--white);
    letter-spacing: .11em;
    text-transform: uppercase;
    background: #020b1685;
    border: 1px solid #ffffffb8;
    padding: 6px 8px;
    font-size: 8px;
    font-weight: 600;
    position: absolute;
    bottom: 13px;
    right: 14px
}

.system-image-1 {
    background-position: 0 0
}

.system-image-2 {
    background-position: 50% 0
}

.system-image-3 {
    background-position: 100% 0
}

.system-image-4 {
    background-position: 0 100%
}

.system-image-5 {
    background-position: 50% 100%
}

.system-image-6 {
    background-position: 100% 100%
}

.system-card-copy {
    padding: 28px 28px 32px
}

.system-card h4 {
    font-family: var(--serif);
    letter-spacing: -.035em;
    margin: 0 0 12px;
    font-size: clamp(31px, 2.65vw, 41px);
    font-weight: 400;
    line-height: 1.06
}

.system-card .system-headline {
    color: var(--blue-700);
    font-family: var(--serif);
    margin: 0 0 14px;
    font-size: clamp(18px, 1.45vw, 22px);
    font-style: italic;
    line-height: 1.25
}

.system-card p {
    color: var(--ink-soft);
    margin: 0;
    font-size: 15px;
    line-height: 1.55
}

.purpose-case {
    background: radial-gradient(circle at 8% 20%, #6e9fc438, transparent 28%), var(--navy-900);
    color: var(--white);
    grid-template-columns: 5fr 7fr;
    gap: clamp(42px, 6vw, 92px);
    margin-top: clamp(92px, 9vw, 132px);
    padding: clamp(38px, 5vw, 72px);
    display: grid;
    position: relative;
    overflow: hidden
}

.purpose-case:before {
    opacity: .12;
    content: "";
    background-image: linear-gradient(#ffffff14 1px, #0000 1px), linear-gradient(90deg, #ffffff14 1px, #0000 1px);
    background-size: 72px 72px;
    position: absolute;
    inset: 0
}

.purpose-case>* {
    z-index: 1;
    position: relative
}

.purpose-case-intro h3 {
    max-width: 540px;
    font-family: var(--serif);
    letter-spacing: -.045em;
    margin: 24px 0 0;
    font-size: clamp(37px, 4vw, 59px);
    font-weight: 400;
    line-height: 1.02
}

.purpose-case-flow {
    border-top: 1px solid #ffffff2e;
    margin: 0;
    padding: 0;
    list-style: none
}

.purpose-case-flow li {
    border-bottom: 1px solid #ffffff2e;
    grid-template-columns: 145px 1fr;
    gap: 24px;
    padding: 23px 0;
    display: grid
}

.purpose-case-flow span {
    color: var(--blue-300);
    letter-spacing: .13em;
    text-transform: uppercase;
    padding-top: 4px;
    font-size: 9px;
    font-weight: 700
}

.purpose-case-flow p {
    color: #ffffffc7;
    font-family: var(--serif);
    margin: 0;
    font-size: clamp(18px, 1.6vw, 23px);
    line-height: 1.36
}

.purpose-case-close {
    color: #ffffffb3;
    grid-column: 2;
    margin: 0;
    font-size: 16px;
    line-height: 1.55
}

.purpose-case-close strong {
    color: var(--blue-300);
    font-weight: 600
}

.care-statement {
    grid-template-columns: 4fr 8fr;
    align-items: start;
    gap: clamp(32px, 5vw, 76px);
    padding: clamp(48px, 6vw, 82px) 0 0;
    display: grid
}

.care-statement span {
    color: var(--ink-soft);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-top: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45
}

.care-statement strong {
    max-width: 850px;
    color: var(--blue-700);
    font-family: var(--serif);
    letter-spacing: -.045em;
    font-size: clamp(39px, 4.7vw, 68px);
    font-weight: 400;
    line-height: 1.02
}