.gmi {
    --gmi-text: #005a96;
    --gmi-orange: #de5e26;
    --gmi-blue: #0269a2;
    --gmi-black: #171717;
    --gmi-muted: #d2cbc7;
    box-sizing: border-box;
    font-family: inherit;
    padding: 24px 16px 40px;
}
.gmi *, .gmi *::before, .gmi *::after { box-sizing: border-box; }
.gmi__heading { margin: 0 auto 42px; max-width: 960px; text-align: center; }
.gmi__heading h2 { color: #1d1d1d; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.08; margin: 0 0 12px; }
.gmi__heading p { color: #303030; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; margin: 0; }
.gmi__stage {
    align-items: center;
    display: grid;
    gap: 42px 60px;
    grid-template-areas: "left logo right" ". bottom .";
    grid-template-columns: minmax(210px, 1fr) minmax(280px, 430px) minmax(210px, 1fr);
    margin: 0 auto;
    max-width: 1220px;
}
.gmi__logo-wrap { grid-area: logo; margin: auto; max-width: 430px; width: 100%; }
.gmi__logo { display: block; height: auto; overflow: visible; width: 100%; }
.gmi__circle { fill: none; stroke: #d9d9d9; stroke-width: 3; }
.gmi__dot { fill: var(--gmi-muted); transition: fill .3s ease; }
.gmi__dot[data-gmi-dot="laranja"].is-active { fill: var(--gmi-orange); }
.gmi__dot[data-gmi-dot="azul"].is-active { fill: var(--gmi-blue); }
.gmi__dot[data-gmi-dot="preto"].is-active { fill: var(--gmi-black); }
.gmi__piece { cursor: pointer; fill: var(--gmi-muted); outline: none; transition: fill .3s ease, filter .3s ease; }
.gmi__piece[data-gmi-piece="laranja"].is-active { fill: var(--gmi-orange); }
.gmi__piece[data-gmi-piece="azul"].is-active { fill: var(--gmi-blue); }
.gmi__piece[data-gmi-piece="preto"].is-active { fill: var(--gmi-black); }
.gmi__piece:focus { filter: drop-shadow(0 0 5px rgba(0, 90, 150, .6)); }
.gmi__separator { fill: none; pointer-events: none; stroke: #fff; stroke-width: 5; }
.gmi-card { background: #fff; border-radius: 28px; box-shadow: 0 8px 18px rgba(0, 0, 0, .15); min-width: 0; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; }
.gmi-card.is-active { box-shadow: 0 12px 24px rgba(0, 0, 0, .19); }
.gmi-card--left { grid-area: left; }
.gmi-card--right { grid-area: right; }
.gmi-card--bottom { grid-area: bottom; justify-self: center; width: min(100%, 360px); }
.gmi-card__trigger { align-items: center; appearance: none; background: transparent; border: 0 !important; box-shadow: none !important; color: var(--gmi-text); cursor: pointer; display: grid; font: inherit; gap: 16px; grid-template-columns: 50px 1fr 12px; outline: 0; padding: 22px 24px; text-align: left; width: 100%; }
.gmi-card__trigger:hover, .gmi-card__trigger:active { border: 0 !important; box-shadow: none !important; }
.gmi-card__trigger::after { background: var(--gmi-orange); content: ""; grid-column: 2 / 4; height: 2px; margin-top: -6px; width: 100%; }
.gmi-card--azul .gmi-card__trigger::after { background: var(--gmi-blue); }
.gmi-card--preto .gmi-card__trigger::after { background: var(--gmi-black); }
.gmi-card__trigger:focus-visible { outline: 3px solid rgba(2, 105, 162, .55); outline-offset: -3px; }
.gmi-card__icon { align-items: center; background: #fbf1ea; border-radius: 50%; display: flex; grid-row: 1 / 3; height: 50px; justify-content: center; width: 50px; }
.gmi-card__icon svg { fill: none; height: 29px; stroke: var(--gmi-text); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 29px; }
.gmi-card__title { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.08; }
.gmi-card__chevron { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; height: 8px; justify-self: end; transform: rotate(45deg); transition: transform .25s ease; width: 8px; }
.gmi-card.is-active .gmi-card__chevron { transform: rotate(225deg); }
.gmi-card__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.gmi-card.is-active .gmi-card__panel { grid-template-rows: 1fr; }
.gmi-card__panel-inner { min-height: 0; overflow: hidden; }
.gmi-card__panel p { color: #1f1f1f; font-size: 16px; line-height: 1.55; margin: 0; opacity: 0; padding: 0 24px; transition: opacity .22s ease, padding-bottom .3s ease; }
.gmi-card.is-active .gmi-card__panel p { opacity: 1; padding-bottom: 25px; }
@media (max-width: 900px) {
    .gmi__stage { gap: 28px 28px; grid-template-columns: minmax(190px, 1fr) minmax(230px, 340px) minmax(190px, 1fr); }
    .gmi-card__trigger { gap: 10px; grid-template-columns: 44px 1fr 10px; padding: 18px; }
    .gmi-card__icon { height: 44px; width: 44px; }
}
@media (max-width: 700px) {
    .gmi { padding: 20px 18px 32px; }
    .gmi__heading { margin-bottom: 28px; }
    .gmi__stage { gap: 16px; grid-template-areas: "logo" "left" "right" "bottom"; grid-template-columns: minmax(0, 1fr); }
    .gmi__logo-wrap { max-width: 270px; }
    .gmi-card, .gmi-card--bottom { justify-self: stretch; width: 100%; }
    .gmi-card__trigger { grid-template-columns: 48px 1fr 12px; padding: 19px 20px; }
    .gmi-card__icon { height: 48px; width: 48px; }
    .gmi-card__title { font-size: 20px; }
    .gmi-card__panel p { font-size: 16px; padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .gmi *, .gmi *::before, .gmi *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}