/* ==========================================================================
   Altvia | Folha de estilos do novo site
   Somente HTML + CSS (sem Bootstrap e sem JavaScript).
   Identidade: Inter, azul-marinho #002c53, teal #00b1b7, azul #0078b8.
   ========================================================================== */

:root {
    --teal: #00b1b7;
    --teal-strong: #009ba1;   /* destaque em textos grandes */
    --teal-ink: #008388;      /* links e textos pequenos em teal (contraste AA) */
    --blue: #0078b8;
    --navy: #002c53;
    --navy-deep: #001a2c;
    --light-blue: #e5f6ff;
    --mint: #eafafb;
    --paper: #f7f9fc;
    --text: #555;
    --line: #e6e6e6;
    --violet: #6f72f2;

    --grad: linear-gradient(90deg, var(--blue), #00a0a6);
    --grad-box: linear-gradient(100deg, var(--blue) 0%, #00a0a6 100%);

    --shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
    --radius: 12px;

    --header-h: 84px;
    --gutter: 60px;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    padding-top: var(--header-h);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--teal-ink);
}

h1,
h2,
h3,
h4 {
    color: var(--navy);
    margin: 0 0 0.5em;
    line-height: 1.2;
}

h1,
h2,
.closing-statement,
.pain-cta p {
    text-wrap: balance;
}

p {
    margin: 0 0 1rem;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
    border-radius: 4px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -64px;
    z-index: 2000;
    background: var(--navy);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 12px;
}

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* ---------- Cabeçalho ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    flex-shrink: 0;
}

.brand img {
    height: 38px;
    width: auto;
}

/* Menu completo a partir de 1200px; entre 1200 e 1299px, espaçamento mais justo */
@media (min-width: 1200px) and (max-width: 1299.98px) {
    .site-header .container {
        padding-inline: 32px;
    }

    .site-header .main-nav ul {
        gap: 15px;
    }
}

.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-nav a {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: var(--teal-ink);
}

.main-nav a[aria-current="page"] {
    color: var(--teal-ink);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--teal);
}

/* Menu mobile sem JavaScript: checkbox + label */
.nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.nav-toggle-label {
    display: none;
}

@media (max-width: 1199.98px) {
    .nav-toggle-label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        cursor: pointer;
    }

    .nav-toggle:focus-visible + .nav-toggle-label {
        outline: 3px solid var(--teal);
        outline-offset: 2px;
    }

    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--navy);
        border-radius: 2px;
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .nav-toggle-label span {
        position: relative;
    }

    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .nav-toggle-label span::before {
        top: -7px;
    }

    .nav-toggle-label span::after {
        top: 7px;
    }

    .nav-toggle:checked + .nav-toggle-label span {
        background: transparent;
    }

    .nav-toggle:checked + .nav-toggle-label span::before {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle:checked + .nav-toggle-label span::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    .main-nav {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        padding: 8px var(--gutter) 24px;
    }

    .nav-toggle:checked ~ .main-nav {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .main-nav li {
        border-bottom: 1px solid #f2f2f2;
    }

    .main-nav li:last-child {
        border-bottom: 0;
    }

    .main-nav a {
        padding: 16px 0;
        font-size: 14px;
    }

    .main-nav a[aria-current="page"] {
        box-shadow: none;
    }
}

/* ---------- Botões e selos ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 14px 26px;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
    background: var(--grad);
    color: #fff;
}

.btn-primary:hover {
    color: #fff;
    transform: scale(1.04);
}

.btn-outline {
    background: transparent;
    color: var(--navy);
    box-shadow: inset 0 0 0 1.5px var(--navy);
}

.btn-outline:hover {
    background: var(--navy);
    color: #fff;
}

.btn-dark {
    width: 100%;
    background: var(--navy-deep);
    color: #fff;
    padding: 16px 26px;
}

.btn-dark:hover {
    background: #003355;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.tag {
    display: inline-flex;
    align-items: center;
    background: var(--light-blue);
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.tag--on-dark {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal-ink);
    font-weight: 700;
    text-decoration: none;
}

.card-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Seções ---------- */
.section {
    position: relative;
    padding: 100px 0;
}

.section--paper {
    background: var(--paper);
}

.section--mint {
    background: var(--mint);
}

.section--navy {
    background: var(--navy);
    color: #c9d6e2;
    overflow: hidden;
}

.section-head {
    max-width: 780px;
    margin-bottom: 56px;
}

.section-head--wide {
    max-width: none;
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-title {
    font-size: clamp(1.75rem, 1.1rem + 2vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.section-title--sm {
    font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.1rem);
}

.section--navy .section-title {
    color: #fff;
}

.lead {
    font-size: 1.125rem;
}

.text-block p {
    max-width: 65ch;
}

.text-strong {
    color: var(--navy);
    font-weight: 600;
}

.closing-statement {
    margin: 48px auto 0;
    max-width: 720px;
    text-align: center;
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 600;
}

/* ---------- Grades ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.split--top {
    align-items: start;
}

.grid {
    display: grid;
    gap: 24px;
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1199.98px) {
    :root {
        --gutter: 32px;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .section {
        padding: 72px 0;
    }

    .split {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639.98px) {
    :root {
        --gutter: 20px;
    }

    .section {
        padding: 64px 0;
    }

    .grid-3,
    .grid-4,
    .grid-5 {
        grid-template-columns: 1fr;
    }

    .section-head {
        margin-bottom: 40px;
    }
}

/* Grades com exatamente 3 itens: pulam direto de 3 colunas para 1,
   sem deixar um card sozinho na segunda linha */
@media (min-width: 768px) {
    .grid--trio {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .grid--trio .card {
        padding: 28px 22px;
    }
}

@media (max-width: 767.98px) {
    .grid--trio {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .media-card {
        margin-inline: auto;
    }
}

/* ---------- Cards genéricos ---------- */
.card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px 28px;
}

.card h3 {
    font-size: 1.2rem;
    font-weight: 700;
}

.card p {
    font-size: 15px;
    margin: 0;
}

.card-icon {
    font-size: 30px;
    color: var(--teal);
    margin-bottom: 16px;
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #00b1b8;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 20px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

/* ---------- Hero da página inicial ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 110px;
    background:
        radial-gradient(520px 420px at 88% 18%, rgba(111, 114, 242, 0.16), transparent 70%),
        radial-gradient(420px 340px at 4% 72%, rgba(0, 177, 183, 0.12), transparent 70%),
        linear-gradient(180deg, #fff 0%, var(--paper) 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}

.hero-title {
    font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin-bottom: 28px;
}

.hero-title .hl {
    color: var(--teal-strong);
}

.hero-points {
    list-style: none;
    display: grid;
    gap: 14px;
    margin-bottom: 24px;
}

.hero-points li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 1.0625rem;
    color: #3d4a55;
}

.hero-points i {
    color: var(--teal);
    margin-top: 5px;
}

.hero-sub {
    font-size: 1.125rem;
    max-width: 56ch;
    margin-bottom: 0;
}

.hero-media {
    position: relative;
    max-width: 560px;
    margin-inline: auto;
}

.animated-line {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--navy) 30%, var(--teal) 70%, transparent);
    background-size: 200% auto;
    animation: dash-move 2s linear infinite;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

@keyframes dash-move {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: 0 0;
    }
}

@media (max-width: 991.98px) {
    .hero {
        padding: 64px 0 80px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
}

/* ---------- Desafios (dor do cliente) ---------- */
.pain-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pain-card .pain-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--light-blue);
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 20px;
}

.pain-card p {
    margin: 0;
    color: var(--navy);
    font-weight: 500;
    line-height: 1.45;
}

@media (max-width: 639.98px) {
    .pain-card {
        flex-direction: row;
        align-items: center;
        padding: 16px 18px;
    }

    .pain-card .pain-icon {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .grid.pain-grid {
        gap: 12px;
    }
}

.pain-cta {
    margin-top: 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 28px;
    text-align: center;
}

.pain-cta p {
    margin: 0;
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 600;
}

/* ---------- Serviços ---------- */
.service-card {
    display: flex;
    flex-direction: column;
    padding: 36px 30px;
}

.service-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
}

.service-card .service-alias {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin-top: 4px;
}

.service-card p {
    flex-grow: 1;
    margin-bottom: 24px;
}

/* ---------- Comparativo (tabela) ---------- */
.compare-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.compare th {
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    padding: 20px 28px;
}

.compare thead th:first-child {
    background: #eef1f5;
    color: var(--navy);
}

.compare thead th:last-child {
    background: var(--navy);
    color: #fff;
}

.compare td {
    width: 50%;
    padding: 18px 28px;
    border-top: 1px solid #eef0f3;
    vertical-align: top;
}

.compare td:first-child {
    color: #5f6b76;
}

.compare td:last-child {
    color: var(--navy);
    font-weight: 600;
    background: #fbfeff;
}

.compare .cell {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.compare .cell i {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}

.compare .fa-xmark {
    color: #b4533b;
}

.compare .fa-circle-check {
    color: var(--teal);
}

@media (max-width: 699.98px) {
    .compare thead {
        display: none;
    }

    .compare,
    .compare tbody,
    .compare tr,
    .compare td {
        display: block;
        width: 100%;
    }

    .compare tr {
        border-top: 1px solid #eef0f3;
        padding: 10px 0;
    }

    .compare tr:first-child {
        border-top: 0;
    }

    .compare td {
        border: 0;
        padding: 8px 20px;
    }

    .compare td::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #7a8590;
        margin-bottom: 2px;
    }
}

/* ---------- Imagem com card flutuante ---------- */
.media-card {
    position: relative;
    max-width: 580px;
}

.media-card > img {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

.media-card--compact {
    max-width: 400px;
    margin-inline: auto;
}

.media-card--photo > img {
    aspect-ratio: 1 / 1;
}

.floating-card {
    position: absolute;
    right: -32px;
    bottom: -48px;
    max-width: 64%;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 22px 24px;
}

.floating-card i {
    font-size: 28px;
    color: var(--teal);
    margin-bottom: 10px;
}

.floating-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.floating-card p {
    margin: 0;
    font-size: 15px;
}

@media (min-width: 1200px) {
    .media-card--compact .floating-card {
        right: -72px;
        max-width: 78%;
    }
}

@media (max-width: 1199.98px) {
    .floating-card {
        position: relative;
        right: auto;
        bottom: auto;
        max-width: none;
        width: 90%;
        margin: -40px auto 0;
    }
}

/* ---------- Benefícios (Altvia x consultorias) ---------- */
.benefit {
    border-radius: 16px;
}

.benefit h3 {
    font-size: 1.125rem;
}

/* ---------- Etapas (o que torna a Altvia diferente) ---------- */
.steps {
    list-style: none;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.steps::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 16.66%;
    right: 16.66%;
    height: 3px;
    background: linear-gradient(to right, var(--navy), var(--teal));
    opacity: 0.35;
}

.step {
    position: relative;
    text-align: center;
    padding: 0 8px;
}

.step-num {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--teal-strong);
    border: 4px solid #fff;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.step h3 {
    font-size: 1.3rem;
    font-weight: 700;
}

.step p {
    max-width: 38ch;
    margin: 0 auto;
}

@media (max-width: 991.98px) {
    .steps {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .steps::before {
        display: none;
    }
}

/* ---------- Logos de clientes (faixa animada em CSS) ---------- */
.logo-slider {
    position: relative;
    overflow: hidden;
    height: 100px;
    margin-bottom: 64px;
}

.logo-track {
    display: flex;
    gap: 64px;
    width: max-content;
    list-style: none;
    animation: logos-scroll 60s linear infinite;
}

.logo-slider:hover .logo-track {
    animation-play-state: paused;
}

.logo-track li {
    height: 100px;
    display: flex;
    align-items: center;
}

.logo-track img {
    height: 56px;
    width: auto;
}

.logo-slider::before,
.logo-slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.logo-slider::before {
    left: 0;
    background: linear-gradient(to right, var(--mint), transparent);
}

.logo-slider::after {
    right: 0;
    background: linear-gradient(to left, var(--mint), transparent);
}

@media (max-width: 639.98px) {
    .logo-slider::before,
    .logo-slider::after {
        width: 48px;
    }

    .logo-track {
        gap: 40px;
    }
}

@keyframes logos-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ---------- Cases ---------- */
.case-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    border-radius: 16px;
    padding: 30px 28px;
}

.case-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.case-meta li {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--navy);
    background: var(--light-blue);
    padding: 4px 10px;
    border-radius: 999px;
}

.case-card h3 {
    font-size: 1.2rem;
    margin: 4px 0 0;
}

.case-result {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--mint);
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.case-result i {
    color: var(--teal-strong);
    margin-top: 3px;
}

.case-card .card-link {
    margin-top: auto;
    padding-top: 6px;
}

/* ---------- Filosofia (faixa azul-marinho) ---------- */
.section--navy::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: var(--violet);
    opacity: 0.25;
    filter: blur(140px);
    pointer-events: none;
}

.section--navy > .container {
    position: relative;
}

.values {
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.values li {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 500;
}

.values i {
    color: var(--teal);
}

.purpose {
    margin: 28px 0 0;
    color: #8ee6e9;
    font-size: 1.25rem;
    font-weight: 600;
}

/* ---------- Contato ---------- */
.contact-box {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 64px;
    align-items: center;
    background: var(--grad-box);
    border-radius: 40px;
    padding: 64px;
    color: #fff;
    box-shadow: 0 20px 40px rgba(0, 120, 184, 0.2);
}

.contact-box h2 {
    color: #fff;
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem);
    font-weight: 700;
}

.contact-box p {
    color: rgba(255, 255, 255, 0.94);
    font-size: 1.05rem;
}

.contact-box .contact-emphasis {
    font-weight: 700;
    margin: 0;
}

.contact-card p {
    color: var(--text);
    font-size: 15px;
}

.contact-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

.contact-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.field label {
    display: block;
    margin-bottom: 8px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
}

.field textarea {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    font: inherit;
    font-size: 1rem;
    color: #333;
    background: #f8f9fa;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.field textarea::placeholder {
    color: #858c94;
}

.field textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(0, 177, 183, 0.18);
}

.contact-card .form-hint {
    margin: 12px 0 0;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
}

.contact-card .contact-alt {
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid #eef0f3;
    font-size: 14px;
}

@media (max-width: 991.98px) {
    .contact-box {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 28px;
        border-radius: 24px;
    }

    .contact-card {
        padding: 28px 22px;
    }
}

@media (max-width: 639.98px) {
    .contact-box {
        padding: 32px 16px 16px;
    }

    .contact-box > div:first-child {
        padding-inline: 8px;
    }

    .contact-card {
        padding: 24px 18px;
    }
}

/* ---------- Rodapé ---------- */
.privacy-seal {
    display: flex;
    justify-content: flex-end;
    padding-block: 16px;
}

.site-footer {
    background: var(--navy);
    color: #f3f3f3;
    padding: 64px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.footer-logo {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 20px;
}

.footer-text {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 0.5rem;
}

.footer-heading {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.footer-heading--spaced {
    margin-top: 28px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.65rem;
}

.footer-links a {
    display: inline-flex;
    gap: 10px;
    align-items: baseline;
    color: #f3f3f3;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--teal);
}

.footer-socials {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.footer-socials a {
    color: #f3f3f3;
    font-size: 40px;
    line-height: 1;
    transition: color 0.2s ease;
}

.footer-socials a:hover {
    color: var(--teal);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
}

.footer-bottom p {
    margin: 0;
}

@media (max-width: 991.98px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Botão flutuante do WhatsApp ---------- */
.whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 32px;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.whatsapp-button:hover {
    color: #fff;
    transform: scale(1.1);
}

/* ==========================================================================
   Página Infraestrutura de Cloud
   ========================================================================== */

.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--paper);
    padding: 110px 0 120px;
    text-align: center;
}

.page-hero::before,
.page-hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(180px);
    pointer-events: none;
}

.page-hero::before {
    top: -80px;
    left: -40px;
    background: var(--teal);
    opacity: 0.35;
}

.page-hero::after {
    bottom: -120px;
    right: -40px;
    background: var(--navy);
    opacity: 0.22;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.breadcrumb {
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    padding: 6px 18px;
    margin-bottom: 28px;
    font-size: 13px;
    text-transform: uppercase;
}

.breadcrumb a {
    color: #252a2e;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--teal-ink);
}

.breadcrumb li + li::before {
    content: "›";
    color: var(--navy);
    margin-right: 12px;
}

.breadcrumb [aria-current="page"] {
    color: var(--teal-ink);
    font-weight: 600;
}

.page-title {
    max-width: 920px;
    margin: 0 auto 20px;
    font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.page-kicker {
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.page-hero .lead {
    max-width: 720px;
    margin: 0 auto;
}

.page-hero .btn-group {
    justify-content: center;
}

@media (max-width: 991.98px) {
    .page-hero {
        padding: 72px 0 80px;
    }
}

/* Banda "Aplicações e IA no mesmo ambiente" */
.ai-band {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 24px 48px;
    align-items: start;
    margin-top: 96px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 40px 44px;
}

.icon-square {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 30px;
}

.ai-band h3 {
    font-size: 1.4rem;
    font-weight: 700;
}

.ai-band p {
    margin: 0;
}

@media (max-width: 991.98px) {
    .ai-band {
        grid-template-columns: 1fr;
        padding: 32px 26px;
        margin-top: 72px;
    }
}

/* Faixa "pit stop" */
.pitstop-quote {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--navy-deep);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 56px 44px 40px;
}

.pitstop-quote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 14px 14px;
    opacity: 0.2;
}

.pitstop-quote i {
    font-size: 28px;
    color: var(--teal);
    margin-bottom: 20px;
}

.pitstop-quote blockquote {
    margin: 0 0 16px;
    color: #fff;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.45;
}

.pitstop-quote p {
    margin: 0;
    color: #c9d6e2;
}

@media (max-width: 639.98px) {
    .pitstop-quote {
        padding: 48px 24px 32px;
    }

    .pitstop-quote blockquote {
        font-size: 1.2rem;
    }
}

/* Frase rotativa "... pode ser aqui" */
.rotator {
    display: grid;
    justify-items: center;
    text-align: center;
    margin: 0 auto 64px;
    font-size: clamp(1.9rem, 1rem + 3.4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.rotator-words {
    display: grid;
}

.rotator-words span {
    grid-area: 1 / 1;
    padding-bottom: 0.08em;
    background: linear-gradient(90deg, var(--blue), var(--teal-strong));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    animation: rotate-phrase 15s infinite;
}

.rotator-words span:nth-child(2) {
    animation-delay: 3s;
}

.rotator-words span:nth-child(3) {
    animation-delay: 6s;
}

.rotator-words span:nth-child(4) {
    animation-delay: 9s;
}

.rotator-words span:nth-child(5) {
    animation-delay: 12s;
}

.rotator-fixed {
    color: var(--navy);
}

@keyframes rotate-phrase {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }

    3%,
    17% {
        opacity: 1;
        transform: translateY(0);
    }

    20%,
    100% {
        opacity: 0;
        transform: translateY(-14px);
    }
}

.usecase {
    padding: 28px 22px;
}

.usecase h3 {
    font-size: 1.05rem;
}

.usecase p {
    font-size: 14.5px;
}

/* Cards em escada (para quem é) */
.stairs {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.stair {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
    max-width: 440px;
    background: var(--grad-box);
    color: #fff;
    border-radius: var(--radius);
    padding: 20px 24px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 20px 40px rgba(0, 120, 184, 0.18);
}

.stair i {
    font-size: 1.4rem;
    opacity: 0.9;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.stair:nth-child(2) {
    margin-right: 72px;
}

.stair:nth-child(3) {
    margin-right: 144px;
}

.stair:nth-child(4) {
    margin-right: 216px;
}

@media (max-width: 1199.98px) {
    .stairs {
        align-items: stretch;
    }

    .stair {
        max-width: none;
    }

    .stair:nth-child(n) {
        margin-right: 0;
    }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

    .animated-line {
        animation: none;
    }

    .logo-slider {
        height: auto;
    }

    .logo-track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 48px;
    }

    .logo-track li[aria-hidden="true"] {
        display: none;
    }

    .logo-slider::before,
    .logo-slider::after {
        display: none;
    }

    .rotator-words span {
        animation: none;
    }

    .rotator-words span:first-child {
        opacity: 1;
    }
}

/* ==========================================================================
   Ajustes da revisão: home (cases) e página Cases e Blog
   ========================================================================== */

.section-cta {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.section-cta p {
    margin: 0;
    color: var(--navy);
    font-size: 1.2rem;
    font-weight: 600;
}

/* Área do case (Cloud, Segurança, Engenharia) */
.case-area {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--teal-ink);
    font-size: 13px;
    font-weight: 600;
}

.card .case-area {
    margin: 0;
    font-size: 13px;
}

.case-area i {
    color: var(--teal);
}

.case-card h3 {
    margin: 0;
}

/* Painel de resultados da seção de cases */
.results-panel {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #2a4a69;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 72px;
    box-shadow: 0 20px 40px rgba(0, 44, 83, 0.18);
}

.results-panel li {
    background: var(--navy);
}

.results-panel a {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 36px 30px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.results-panel a:hover {
    background: #06365f;
}

.result-figure {
    color: #6fdde1;
    font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.result-caption {
    color: #c9d6e2;
    font-size: 15px;
    line-height: 1.5;
}

.logos-title,
.cases-title {
    text-align: center;
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.cases-title {
    margin-bottom: 28px;
}

@media (max-width: 991.98px) {
    .results-panel {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639.98px) {
    .results-panel {
        grid-template-columns: 1fr;
        margin-bottom: 56px;
    }

    .results-panel a {
        padding: 26px 22px;
    }
}

/* ---------- Página Cases e Blog ---------- */
.page-hero--compact {
    padding: 88px 0 80px;
}

.section--tight {
    padding: 72px 0 88px;
}

.hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.hub-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 40px;
}

.hub-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 20px 0 8px;
}

.hub-card > p {
    max-width: 52ch;
}

.hub-card .hub-examples-title {
    margin: 8px 0 10px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}

.hub-examples {
    list-style: none;
    width: 100%;
    margin-bottom: 28px;
    border-top: 1px solid #eef0f3;
}

.hub-examples li {
    border-bottom: 1px solid #eef0f3;
}

.hub-examples a {
    display: block;
    padding: 12px 0;
    color: var(--navy);
    font-weight: 500;
    text-decoration: none;
}

.hub-examples a:hover {
    color: var(--teal-ink);
}

.hub-card .btn {
    margin-top: auto;
}

.icon-square--teal {
    background: var(--teal-strong);
}

@media (max-width: 991.98px) {
    .hub-grid {
        grid-template-columns: 1fr;
    }

    .hub-card {
        padding: 28px 22px;
    }
}

/* Seletor Cases / Blog (pílulas), sem JavaScript: usa :target */
.section--switch {
    padding-top: 56px;
}

.content-switch {
    position: sticky;
    top: calc(var(--header-h) + 12px);
    z-index: 50;
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
    pointer-events: none;
}

.switch-pills {
    display: inline-flex;
    gap: 10px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 44, 83, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: auto;
}

.switch-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    border: 1.5px solid #d6dbe1;
    background: #fff;
    color: var(--navy);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.switch-pill:hover {
    border-color: var(--navy);
}

/* Estado selecionado (padrão: Cases) */
.switch-pill--cases,
body:has(#blog:target) .switch-pill--blog {
    background: var(--navy);
    border: 2px solid var(--teal);
    color: #fff;
}

body:has(#blog:target) .switch-pill--cases {
    background: #fff;
    border: 1.5px solid #d6dbe1;
    color: var(--navy);
}

.panel,
.case-full {
    scroll-margin-top: 84px;
}

.panel--blog {
    display: none;
}

body:has(#blog:target) .panel--blog {
    display: block;
}

body:has(#blog:target) .panel--cases {
    display: none;
}

/* Case completo */
.case-list {
    display: grid;
    gap: 40px;
    margin-top: 80px;
}

.case-full {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 48px;
}

.case-full-head {
    padding-bottom: 28px;
    margin-bottom: 36px;
    border-bottom: 1px solid #eef0f3;
}

.case-full-head h3 {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 700;
    margin: 8px 0 14px;
}

.case-full-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 48px;
    align-items: start;
}

.case-highlight {
    position: sticky;
    top: calc(var(--header-h) + 96px);
    background: var(--mint);
    border-radius: 16px;
    padding: 28px 24px;
}

.case-highlight .case-highlight-main {
    color: var(--navy);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 44, 83, 0.12);
}

.case-highlight p:last-child {
    margin: 0;
    font-size: 15px;
}

.case-story {
    max-width: 70ch;
}

.case-story section + section {
    margin-top: 36px;
}

.case-story h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 700;
}

.case-story h4::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--teal);
}

.story-list {
    padding-left: 1.25em;
    margin: 0 0 1rem;
}

.story-list li {
    margin-bottom: 6px;
}

.story-list li::marker {
    color: var(--teal);
}

.story-strong {
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 700;
}

.case-lesson {
    margin: 40px 0 0;
    padding: 24px 28px;
    border-left: 4px solid var(--teal);
    background: var(--paper);
    border-radius: 0 12px 12px 0;
}

.case-lesson .case-lesson-title {
    color: var(--navy);
    font-weight: 700;
    margin-bottom: 6px;
}

.case-lesson p:last-child {
    margin: 0;
}

.case-back {
    margin-top: 32px;
}

@media (max-width: 991.98px) {
    .case-full {
        padding: 32px 24px;
    }

    .case-full-body {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .case-highlight {
        position: static;
    }
}

@media (max-width: 639.98px) {
    .case-full {
        padding: 26px 18px;
    }

    .case-lesson {
        padding: 20px;
    }

    .switch-pill {
        min-width: 112px;
        height: 44px;
        padding: 0 22px;
    }
}

/* Blog (posts de exemplo) */
.blog-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.blog-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.blog-cat {
    color: var(--teal-ink);
    font-size: 13px;
    font-weight: 600;
}

.draft-badge {
    color: #7a4f00;
    background: #fff6e0;
    border: 1px dashed #d9a441;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.blog-card h3 {
    margin: 0;
}

.card .blog-soon {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    color: #6b7280;
    font-size: 14px;
}

.suggest-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    margin-top: 48px;
    background: #fff;
    border-left: 4px solid var(--teal);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 28px 32px;
}

.suggest-strip p {
    margin: 0;
    max-width: 60ch;
    color: var(--navy);
}

/* ==========================================================================
   Página de Cloud v2: posicionamento "Uma Cloud que evolui com você"
   ========================================================================== */

/* Pilares (Liberdade, Ecossistema, Inteligência, Evolução) */
.pillar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.pillar {
    padding: 28px 24px;
}

.pillar .icon-circle {
    margin-bottom: 16px;
}

.card .pillar-name {
    margin: 0 0 6px;
    color: var(--teal-ink);
    font-size: 13px;
    font-weight: 600;
}

.pillar h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

@media (max-width: 639.98px) {
    .pillar-grid {
        grid-template-columns: 1fr;
    }
}

/* Faixa com a frase de impacto */
.impact-band {
    padding: 96px 0;
    text-align: center;
}

.impact-band h2 {
    max-width: 960px;
    margin: 0 auto 20px;
    color: #fff;
    font-size: clamp(1.9rem, 1.1rem + 3vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.impact-band p {
    margin: 0;
    color: #8ee6e9;
    font-size: 1.25rem;
    font-weight: 600;
}

@media (max-width: 639.98px) {
    .impact-band {
        padding: 72px 0;
    }
}

/* Jornada de capacidades: Infraestrutura → Aplicações → Dados → PaaS → IA */
.journey {
    list-style: none;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.journey::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(to right, var(--navy), var(--teal));
    opacity: 0.35;
}

.journey-item {
    position: relative;
    text-align: center;
}

.journey-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 4px solid var(--mint);
    background: var(--teal-strong);
    color: #fff;
    font-size: 24px;
}

.journey-item--next .journey-icon {
    background: var(--navy);
    box-shadow: 0 0 0 2px var(--teal);
}

.journey-item h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.journey-item p {
    max-width: 30ch;
    margin: 0 auto;
    font-size: 15px;
}

.evolution-badge {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border: 1px dashed var(--teal);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 991.98px) {
    .journey {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .journey::before {
        top: 32px;
        bottom: 32px;
        left: 30px;
        right: auto;
        width: 3px;
        height: auto;
        background: linear-gradient(to bottom, var(--navy), var(--teal));
    }

    .journey-item {
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: 20px;
        align-items: start;
        text-align: left;
    }

    .journey-icon {
        margin: 0;
    }

    .journey-item p {
        max-width: none;
        margin: 0;
    }
}

/* Frase rotativa como fechamento das capacidades */
.rotator-lead {
    margin: 80px 0 12px;
    text-align: center;
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 600;
}

#capacidades .rotator {
    margin-bottom: 0;
}

/* Banda de IA dentro de PaaS */
#paas .ai-band {
    margin-top: 64px;
}

.ai-band .ai-next {
    margin-top: 16px;
    color: var(--navy);
    font-weight: 500;
}

.ai-next .evolution-badge {
    margin: 0 6px 0 0;
}

.evolution-badge--after {
    margin: 12px 0 0;
}

/* Cases de Cloud: cards com mais conteúdo ficam em 1 coluna abaixo de 992px */
@media (max-width: 991.98px) {
    #cases-cloud .grid--trio {
        grid-template-columns: 1fr;
    }
}

/* Texto da direita começando na mesma linha do título da esquerda
   (compensa a altura da etiqueta acima do título) */
@media (min-width: 992px) {
    .align-with-title {
        padding-top: 45px;
    }
}

/* Foto em formato largo (3:2) com card flutuante */
.media-card--wide > img {
    aspect-ratio: 3 / 2;
}

/* ==========================================================================
   Ilustração da seção "Por que Altvia" (mesma linguagem dos cabeçalhos)
   ========================================================================== */
.why-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 20px;
    container-type: inline-size;
    color: #fff;
    background:
        radial-gradient(420px 320px at 85% 30%, rgba(0, 177, 183, 0.3), transparent 65%),
        radial-gradient(380px 300px at 0% 100%, rgba(111, 114, 242, 0.3), transparent 65%),
        linear-gradient(150deg, #001a2c 0%, #002c53 60%, #013a66 100%);
    box-shadow: 0 20px 50px rgba(0, 44, 83, 0.25);
}

.why-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 60% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 80% at 60% 40%, #000 0%, transparent 80%);
}

.why-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.why-link {
    fill: none;
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 2;
    stroke-dasharray: 4 6;
}

.why-link--thin {
    stroke: rgba(142, 230, 233, 0.3);
    stroke-width: 1.2;
    stroke-dasharray: 2 5;
}

.why-pulse {
    fill: none;
    stroke: #8ee6e9;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 10 90;
    filter: drop-shadow(0 0 4px rgba(111, 221, 225, 0.9));
    animation: why-travel 2.8s linear infinite;
}

.why-pulse--back {
    stroke: #c3c5ff;
    filter: drop-shadow(0 0 4px rgba(195, 197, 255, 0.9));
    animation-delay: -1.4s;
}

.why-card {
    position: absolute;
    z-index: 2;
    padding: 3.4cqi 3.6cqi;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(0, 26, 44, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

.why-card-head {
    display: flex;
    align-items: center;
    gap: 2.4cqi;
    margin: 0 0 2.6cqi;
    font-size: clamp(11px, 3.1cqi, 15px);
    font-weight: 700;
    line-height: 1.25;
}

.why-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 7cqi;
    min-width: 24px;
    aspect-ratio: 1 / 1;
    border-radius: 28%;
    background: linear-gradient(135deg, #0078b8, #009ba1);
    font-size: clamp(11px, 3cqi, 15px);
}

.why-op {
    top: 8%;
    left: 5%;
    width: 44%;
}

.why-op ul {
    list-style: none;
    display: grid;
    gap: 1.8cqi;
    margin: 0;
    padding: 0;
}

.why-op li {
    display: flex;
    align-items: center;
    gap: 2cqi;
    color: #dbe6ef;
    font-size: clamp(10px, 2.7cqi, 13px);
    font-weight: 500;
    white-space: nowrap;
}

.why-op li i {
    color: #3ddc97;
}

.why-core {
    position: absolute;
    left: 76%;
    top: 40%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 22%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(140deg, #0078b8, #009ba1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 50px rgba(0, 177, 183, 0.55);
    font-size: clamp(20px, 7cqi, 34px);
}

.why-core::before {
    content: "";
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    border: 1.5px dashed rgba(142, 230, 233, 0.5);
    animation: why-spin 30s linear infinite;
}

.why-core-label {
    position: absolute;
    left: 76%;
    top: 61%;
    z-index: 2;
    padding: 1.2cqi 3cqi;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(0, 26, 44, 0.8);
    font-size: clamp(10px, 2.6cqi, 13px);
    font-weight: 700;
    white-space: nowrap;
}

.why-spec {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 9%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px solid rgba(142, 230, 233, 0.55);
    background: rgba(0, 26, 44, 0.85);
    color: #6fdde1;
    font-size: clamp(11px, 3.2cqi, 16px);
    animation: why-bob 6s ease-in-out infinite;
}

.why-spec--1 { left: 64%; top: 14%; }
.why-spec--2 { left: 88%; top: 14%; animation-delay: -2s; }
.why-spec--3 { left: 93%; top: 44%; animation-delay: -4s; }

.why-partner {
    bottom: 7%;
    left: 5%;
    width: 36%;
}

.why-bars {
    display: flex;
    align-items: flex-end;
    gap: 1.6cqi;
    height: 9cqi;
    padding-bottom: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.why-bars span {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, #0078b8, #6fdde1);
    transform-origin: bottom;
    animation: why-grow 3.4s ease-in-out infinite;
}

.why-bars span:nth-child(1) { height: 30%; }
.why-bars span:nth-child(2) { height: 46%; animation-delay: -0.4s; }
.why-bars span:nth-child(3) { height: 60%; animation-delay: -0.8s; }
.why-bars span:nth-child(4) { height: 78%; animation-delay: -1.2s; }
.why-bars span:nth-child(5) { height: 100%; animation-delay: -1.6s; }

@keyframes why-travel {
    from { stroke-dashoffset: 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    to { stroke-dashoffset: -90; opacity: 0; }
}

@keyframes why-spin {
    to { transform: rotate(360deg); }
}

@keyframes why-bob {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, calc(-50% - 4px)); }
}

@keyframes why-grow {
    0%, 100% { transform: scaleY(0.7); }
    50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .why-pulse { display: none; }
    .why-core::before,
    .why-spec,
    .why-bars span { animation: none; }
}

/* Painel bem estreito (celulares pequenos): cartões mais compactos */
@container (max-width: 340px) {
    .why-op {
        top: 6%;
        width: 52%;
        padding: 2.6cqi 3cqi;
    }

    .why-op ul {
        gap: 1.2cqi;
    }

    .why-op li {
        font-size: 9.5px;
        gap: 1.6cqi;
    }

    .why-card-head {
        margin-bottom: 2cqi;
        font-size: 10.5px;
    }

    .why-partner {
        bottom: 5%;
        width: 42%;
        padding: 2.6cqi 3cqi;
    }

    .why-bars {
        height: 7cqi;
    }
}

/* Até 1199px, o card fica logo abaixo do painel ilustrado (sem cobrir o gráfico) */
@media (max-width: 1199.98px) {
    .media-card--wide .why-visual + .floating-card {
        margin-top: 16px;
    }
}

/* ==========================================================================
   Seção "Altvia x consultorias tradicionais": duas colunas e benefícios enxutos
   ========================================================================== */
.vs-split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: center;
}

.vs-intro .section-title {
    text-wrap: balance;
}

.vs-intro .lead {
    max-width: 48ch;
}

/* De "apagar incêndios" para "operação previsível" */
.vs-shift {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow);
}

.vs-from,
.vs-to {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.vs-from {
    background: #fdf0ec;
    color: #9a3b22;
    text-decoration: line-through;
    text-decoration-color: rgba(154, 59, 34, 0.5);
    text-decoration-thickness: 2px;
}

.vs-from i {
    color: #d9643f;
}

.vs-to {
    background: linear-gradient(90deg, var(--blue), #00a0a6);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 120, 184, 0.3);
}

.vs-arrow {
    color: var(--teal-ink);
    font-size: 15px;
}

/* Grade de benefícios */
.vs-benefits {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
}

.vs-benefit {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 22px 22px 20px;
    border: 1px solid #e8edf2;
    border-radius: 16px;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.vs-benefit:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 177, 183, 0.45);
    box-shadow: var(--shadow);
}

.vs-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue), var(--teal-strong));
    color: #fff;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(0, 155, 161, 0.28);
}

.vs-benefit h3 {
    margin: 2px 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.vs-benefit p {
    margin: 0;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.5;
}

@media (max-width: 1199.98px) {
    .vs-split {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .vs-intro {
        max-width: 760px;
    }
}

@media (max-width: 639.98px) {
    .vs-benefits {
        grid-template-columns: 1fr;
    }

    .vs-shift {
        border-radius: 20px;
    }

    .vs-from,
    .vs-to {
        font-size: 14px;
        padding: 9px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vs-benefit {
        transition: none;
    }
}

/* No celular, "Apagar incêndios" e "Operação previsível" ficam empilhados, com a seta para baixo */
@media (max-width: 639.98px) {
    .vs-shift {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        max-width: 320px;
    }

    .vs-from,
    .vs-to {
        justify-content: center;
    }

    .vs-arrow {
        align-self: center;
        transform: rotate(90deg);
    }

    .vs-benefit {
        padding: 18px 18px 18px 16px;
        gap: 14px;
    }
}

/* Destaque em degradê dentro de títulos em fundo claro */
.title-hl {
    background: linear-gradient(90deg, var(--blue) 0%, var(--teal-strong) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ==========================================================================
   Etapas 1-2-3 ("O que torna a Altvia diferente?") em versão elaborada
   ========================================================================== */
.steps-wrap {
    position: relative;
}

.steps-wrap .steps::before {
    display: none;
}

.steps-track {
    position: absolute;
    top: 46px;
    left: 16.66%;
    right: 16.66%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 4px;
    background: linear-gradient(90deg, var(--navy), var(--blue) 50%, var(--teal));
}

.steps-pulse {
    position: absolute;
    top: -3px;
    left: 0;
    width: 18%;
    height: 10px;
    border-radius: 10px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(142, 230, 233, 0.6) 40%, transparent 72%);
    animation: steps-pulse 3.6s ease-in-out infinite;
}

.steps-chevron {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(0, 177, 183, 0.55);
    border-radius: 50%;
    background: #fff;
    color: var(--teal-ink);
    font-size: 12px;
    box-shadow: 0 6px 14px rgba(0, 44, 83, 0.12);
}

.steps-chevron--1 { left: 25%; }
.steps-chevron--2 { left: 75%; }

.steps--rich .step {
    padding-inline: 12px;
}

.step-badge {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.25), transparent 55%),
        linear-gradient(140deg, var(--blue), var(--teal-strong));
    box-shadow: 0 0 0 8px #fff, 0 16px 32px rgba(0, 120, 184, 0.3);
    color: #fff;
    font-size: 32px;
    transition: transform 0.25s ease;
}

.step-badge::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 2px dashed rgba(0, 177, 183, 0.4);
    animation: why-spin 26s linear infinite;
}

.step:nth-child(2) .step-badge::before { animation-direction: reverse; }

.step-num {
    position: absolute;
    top: -4px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--navy);
    box-shadow: 0 0 0 3px #fff;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.step:hover .step-badge {
    transform: translateY(-4px);
}

.steps--rich .step h3 {
    margin-bottom: 10px;
}

@keyframes steps-pulse {
    0% { left: -10%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: 92%; opacity: 0; }
}

@keyframes steps-pulse-v {
    0% { top: -10%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 92%; opacity: 0; }
}

/* Tablet e celular: etapas na vertical, com a linha à esquerda */
@media (max-width: 991.98px) {
    .steps-track {
        top: 46px;
        bottom: 46px;
        left: 46px;
        right: auto;
        width: 4px;
        height: auto;
        transform: translateX(-50%);
        background: linear-gradient(180deg, var(--navy), var(--blue) 50%, var(--teal));
    }

    .steps-pulse {
        top: 0;
        left: -3px;
        width: 10px;
        height: 18%;
        animation-name: steps-pulse-v;
    }

    .steps-chevron {
        display: none;
    }

    .steps--rich {
        gap: 36px;
    }

    .steps--rich .step {
        display: grid;
        grid-template-columns: 92px 1fr;
        column-gap: 24px;
        padding-inline: 0;
        text-align: left;
    }

    .steps--rich .step-badge {
        grid-row: span 2;
        margin: 0;
    }

    .steps--rich .step h3 {
        align-self: end;
        margin-top: 8px;
    }

    .steps--rich .step p {
        max-width: none;
        margin: 0;
    }
}

@media (max-width: 639.98px) {
    .steps-track {
        top: 36px;
        bottom: 36px;
        left: 36px;
    }

    .steps--rich .step {
        grid-template-columns: 72px 1fr;
        column-gap: 18px;
    }

    .step-badge {
        width: 72px;
        height: 72px;
        font-size: 26px;
        box-shadow: 0 0 0 6px #fff, 0 12px 24px rgba(0, 120, 184, 0.28);
    }

    .step-badge::before {
        inset: -12px;
    }

    .step-num {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .steps-pulse { display: none; }
    .step-badge::before { animation: none; }
    .step-badge { transition: none; }
}

/* Tablet e celular: um trecho de linha liga cada selo ao seguinte
   (assim a linha termina exatamente no último selo, qualquer que seja o tamanho do texto) */
@media (max-width: 991.98px) {
    .steps-track {
        display: none;
    }

    .steps--rich .step {
        position: relative;
    }

    .steps--rich .step:not(:last-child)::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: 46px;
        bottom: -82px;
        left: 46px;
        width: 4px;
        transform: translateX(-50%);
        border-radius: 4px;
        background: linear-gradient(180deg, var(--blue), var(--teal));
    }

    .steps--rich .step:first-child::after {
        background: linear-gradient(180deg, var(--navy), var(--blue));
    }
}

@media (max-width: 639.98px) {
    .steps--rich .step:not(:last-child)::after {
        top: 36px;
        bottom: -72px;
        left: 36px;
    }
}

/* ==========================================================================
   Página Início | ajustes pontuais
   ========================================================================== */

/* Quadro azul de resultados com título integrado */
.results-box {
    margin-bottom: 72px;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(520px 220px at 100% 0%, rgba(0, 177, 183, 0.22), transparent 70%),
        var(--navy);
    box-shadow: 0 20px 40px rgba(0, 44, 83, 0.18);
}

.results-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 30px 30px 26px;
    border-bottom: 1px solid #2a4a69;
}

.results-head-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue), var(--teal-strong));
    color: #fff;
    font-size: 19px;
    box-shadow: 0 8px 20px rgba(0, 177, 183, 0.35);
}

.results-head h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.25rem, 0.9rem + 1vw, 1.6rem);
    font-weight: 700;
    line-height: 1.3;
}

.results-head h3 span {
    background: linear-gradient(90deg, #8ee6e9, #7cb8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* dentro do quadro, a grade de números não tem cantos, sombra nem margem próprios */
.results-box .results-panel {
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 639.98px) {
    .results-box {
        margin-bottom: 56px;
    }

    .results-head {
        align-items: flex-start;
        padding: 22px 20px 20px;
    }

    .results-head-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
}

/* Faixa de logos parada e centralizada (enquanto houver poucos logos) */
.logo-slider--static {
    height: auto;
}

.logo-slider--static::before,
.logo-slider--static::after {
    display: none;
}

.logo-slider--static .logo-track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 72px;
    animation: none;
}

/* ==========================================================================
   Seção "Tecnologia estratégica" com fundo azul (respiro entre seções claras)
   ========================================================================== */
.section--blue {
    overflow: hidden;
    color: #d9e8f5;
    background:
        radial-gradient(560px 420px at 92% 8%, rgba(0, 177, 183, 0.32), transparent 65%),
        radial-gradient(520px 420px at 4% 100%, rgba(111, 114, 242, 0.22), transparent 65%),
        linear-gradient(150deg, #0067a3 0%, #00528a 45%, #003a6b 100%);
}

.section--blue::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 0%, transparent 75%);
}

.section--blue > .container {
    position: relative;
}

.section--blue .tag {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.section--blue .section-title {
    color: #fff;
}

.section--blue .lead {
    color: #d9e8f5;
}

/* destaque de palavras no texto */
.text-hl {
    color: var(--navy);
    font-weight: 700;
}

.section--blue .text-hl {
    color: #8ee6e9;
}

/* tabela comparativa sobre o fundo azul: cabeçalho da coluna Altvia em degradê teal */
.section--blue .compare {
    box-shadow: 0 24px 50px rgba(0, 20, 45, 0.35);
}

.section--blue .compare thead th:last-child {
    background: linear-gradient(90deg, var(--blue), var(--teal-strong));
}

/* ==========================================================================
   Página Infraestrutura & Cloud | ajustes pontuais
   ========================================================================== */

/* ---------- Ilustração "Nossos diferenciais": suporte de quem conhece o projeto ---------- */
.sup-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 20px;
    container-type: inline-size;
    color: #fff;
    background:
        radial-gradient(420px 300px at 50% 20%, rgba(0, 177, 183, 0.3), transparent 65%),
        radial-gradient(360px 280px at 100% 100%, rgba(111, 114, 242, 0.28), transparent 65%),
        linear-gradient(150deg, #001a2c 0%, #002c53 60%, #013a66 100%);
    box-shadow: 0 20px 50px rgba(0, 44, 83, 0.25);
}

.sup-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 0%, transparent 80%);
}

.sup-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sup-link {
    fill: none;
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 2;
    stroke-dasharray: 4 6;
}

.sup-pulse {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 14 86;
    opacity: 0;
}

.sup-pulse--issue {
    stroke: #ffb37a;
    filter: drop-shadow(0 0 5px rgba(255, 160, 100, 0.9));
    animation: sup-issue 6s linear infinite;
}

.sup-pulse--fix {
    stroke: #8ee6e9;
    filter: drop-shadow(0 0 5px rgba(111, 221, 225, 0.95));
    animation: sup-fix 6s linear infinite;
}

.sup-node {
    position: absolute;
    top: 26%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 14%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 30%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 26, 44, 0.8);
    font-size: clamp(16px, 5cqi, 26px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.sup-node--env { left: 15%; color: #dbe6ef; }

.sup-node--core {
    left: 50%;
    width: 20%;
    border-radius: 50%;
    border: 0;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(140deg, #0078b8, #009ba1);
    font-size: clamp(20px, 7cqi, 34px);
    animation: sup-core 6s ease-in-out infinite;
}

.sup-node--core::before {
    content: "";
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    border: 1.5px dashed rgba(142, 230, 233, 0.5);
    animation: why-spin 30s linear infinite;
}

.sup-node--ok {
    left: 85%;
    color: #3ddc97;
    animation: sup-ok 6s ease-in-out infinite;
}

.sup-alert {
    position: absolute;
    top: -22%;
    right: -22%;
    display: grid;
    place-items: center;
    width: 46%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #ff8a4c;
    color: #fff;
    font-size: clamp(8px, 2.2cqi, 12px);
    box-shadow: 0 0 0 3px #002c53;
    animation: sup-alert 6s ease-in-out infinite;
}

.sup-label {
    position: absolute;
    top: 42%;
    z-index: 2;
    transform: translate(-50%, -50%);
    padding: 0.8cqi 2.4cqi;
    border-radius: 999px;
    background: rgba(0, 26, 44, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: clamp(9.5px, 2.5cqi, 12.5px);
    font-weight: 700;
    white-space: nowrap;
}

.sup-label--env { left: 15%; }
.sup-label--core { left: 50%; top: 45%; }
.sup-label--ok { left: 85%; }

/* cartão das etapas do atendimento */
.sup-steps {
    position: absolute;
    left: 5%;
    top: 55%;
    z-index: 2;
    width: 58%;
    padding: 3.2cqi 3.6cqi 3.6cqi;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(0, 26, 44, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

.sup-steps-head {
    display: flex;
    align-items: center;
    gap: 2cqi;
    margin: 0 0 2.8cqi;
    color: #dbe6ef;
    font-size: clamp(9.5px, 2.5cqi, 12.5px);
    font-weight: 700;
}

.sup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3ddc97;
    box-shadow: 0 0 8px rgba(61, 220, 151, 0.8);
}

.sup-steps ol {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 2cqi;
    margin: 0 0 2.6cqi;
    padding: 0;
}

.sup-steps li {
    display: flex;
    align-items: center;
    gap: 1.6cqi;
    margin: 0;
    font-size: clamp(9.5px, 2.6cqi, 13px);
    font-weight: 600;
    white-space: nowrap;
}

.sup-step-ico {
    display: grid;
    place-items: center;
    width: 6cqi;
    min-width: 20px;
    aspect-ratio: 1 / 1;
    border-radius: 30%;
    background: rgba(255, 255, 255, 0.1);
    color: #8ee6e9;
    font-size: clamp(9px, 2.4cqi, 12px);
    animation: sup-step 6s ease-in-out infinite;
}

.sup-steps li:nth-child(2) .sup-step-ico { animation-delay: 0.9s; }
.sup-steps li:nth-child(3) .sup-step-ico { animation-delay: 1.8s; }

.sup-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.12);
}

.sup-progress span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, #0078b8, #6fdde1);
    animation: sup-progress 6s ease-in-out infinite;
}

/* linha do tempo do ciclo (6s): ocorrência > suporte > ajuste > tudo em movimento */
@keyframes sup-alert {
    0%, 30% { opacity: 1; transform: scale(1); }
    10%, 20% { transform: scale(1.18); }
    38%, 100% { opacity: 0; transform: scale(0.6); }
}

@keyframes sup-issue {
    0%, 6% { opacity: 0; stroke-dashoffset: 0; }
    10% { opacity: 1; }
    30% { opacity: 1; stroke-dashoffset: -86; }
    32%, 100% { opacity: 0; stroke-dashoffset: -86; }
}

@keyframes sup-core {
    0%, 30%, 60%, 100% { box-shadow: 0 0 0 0 rgba(0, 177, 183, 0), 0 0 40px rgba(0, 177, 183, 0.45); }
    42% { box-shadow: 0 0 0 10px rgba(0, 177, 183, 0.18), 0 0 60px rgba(0, 177, 183, 0.7); }
}

@keyframes sup-fix {
    0%, 52% { opacity: 0; stroke-dashoffset: 0; }
    56% { opacity: 1; }
    74% { opacity: 1; stroke-dashoffset: -86; }
    76%, 100% { opacity: 0; stroke-dashoffset: -86; }
}

@keyframes sup-ok {
    0%, 72% { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.2); }
    80%, 96% { box-shadow: 0 0 0 6px rgba(61, 220, 151, 0.16), 0 0 30px rgba(61, 220, 151, 0.45); border-color: rgba(61, 220, 151, 0.7); }
    100% { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.2); }
}

@keyframes sup-progress {
    0%, 30% { width: 0; }
    42% { width: 34%; }
    58% { width: 67%; }
    74%, 96% { width: 100%; }
    100% { width: 0; }
}

@keyframes sup-step {
    0%, 32% { background: rgba(255, 255, 255, 0.1); color: #8ee6e9; }
    40%, 92% { background: linear-gradient(135deg, #0078b8, #009ba1); color: #fff; }
    100% { background: rgba(255, 255, 255, 0.1); color: #8ee6e9; }
}

/* até 1199px o card fica logo abaixo da ilustração, sem cobri-la */
@media (max-width: 1199.98px) {
    .media-card--wide .sup-visual + .floating-card {
        margin-top: 16px;
    }
}

@container (max-width: 340px) {
    .sup-steps {
        width: 64%;
        padding: 2.6cqi 3cqi 3cqi;
    }

    .sup-steps li {
        font-size: 9px;
        gap: 1.2cqi;
    }

    .sup-steps-head {
        font-size: 9px;
    }
}

/* ---------- Seção Fórmula 1: frase em destaque e ilustração do pit stop ----------
   Ciclo de 7s: o carro do cliente chega (0-22%), o time Altvia troca os pneus
   com o cronômetro girando (22-58%) e o carro sai com fumaça (58-76%). */
.pit-hl {
    display: block;
    margin-bottom: 6px;
    background: linear-gradient(90deg, #8ee6e9 0%, #6fdde1 45%, #7cb8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.f1-scene {
    position: relative;
    margin: 0 0 24px;
    overflow: hidden;
    border-radius: 14px;
    background: radial-gradient(260px 120px at 50% 100%, rgba(0, 177, 183, 0.18), transparent 70%);
}

.f1-scene svg {
    display: block;
    width: 100%;
    height: auto;
}

.f1-road { fill: rgba(255, 255, 255, 0.04); }
.f1-road-edge { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.5; }
.f1-lane { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; stroke-dasharray: 10 10; }
.f1-box { fill: none; stroke: #6fdde1; stroke-width: 2; opacity: 0.7; }
.f1-box-label { fill: #6fdde1; font-family: var(--font); font-size: 10px; font-weight: 800; letter-spacing: 0.2em; opacity: 0.8; }

/* carro do cliente (cores próprias, diferentes da Altvia) */
.f1-body { fill: url(#f1Client); }
.f1-stripe { fill: rgba(255, 255, 255, 0.9); }
.f1-livery { fill: #fff; font-family: var(--font); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.f1-cockpit { fill: #1a0f14; }
.f1-helmet { fill: #fff; }
.f1-visor { fill: #2b2f86; }
.f1-halo { fill: none; stroke: #2a1a20; stroke-width: 4; stroke-linecap: round; }
.f1-wing { fill: #2a1a20; }
.f1-front-wing { fill: #ffc59a; }
.f1-tyre { fill: #0a1520; stroke: #1d3245; stroke-width: 2; }
.f1-spokes { stroke: #9aa6b2; stroke-width: 2.5; opacity: 0.8; }

.f1-rim {
    fill: none;
    stroke: #9aa6b2;
    stroke-width: 3;
    animation: f1-newtyre 7s infinite;
}

.f1-car { animation: f1-drive 7s infinite; }

.f1-wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: f1-wheel 7s infinite;
}

/* troca de pneus: a roda sai e volta nova */
.f1-swap {
    transform-box: fill-box;
    transform-origin: center;
    animation: f1-swap 7s infinite;
}

.f1-swap:nth-of-type(2) { animation-delay: 0.12s; }

.f1-speed { opacity: 0; animation: f1-speed 7s infinite; }
.f1-speed line { stroke: rgba(255, 210, 170, 0.75); stroke-width: 2.5; stroke-linecap: round; }

.f1-smoke circle {
    fill: rgba(225, 235, 245, 0.85);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: f1-smoke 7s infinite;
}

.f1-smoke circle:nth-child(2) { animation-delay: 0.08s; }
.f1-smoke circle:nth-child(3) { animation-delay: 0.16s; }
.f1-smoke circle:nth-child(4) { animation-delay: 0.24s; }

/* time Altvia */
.mech-helmet { fill: #002c53; stroke: #6fdde1; stroke-width: 1.2; }
.mech-visor { fill: #6fdde1; }
.mech-suit { fill: url(#f1Crew); }
.mech-gun { fill: #dbe6ef; }

.f1-mech {
    opacity: 0;
    animation: f1-crew 7s infinite;
}

.f1-crew > g:nth-child(2) .f1-mech { animation-delay: 0.08s; }
.f1-crew > g:nth-child(3) .f1-mech { animation-delay: 0.16s; }
.f1-crew > g:nth-child(4) .f1-mech { animation-delay: 0.24s; }

.mech-arm {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: f1-arm 0.35s ease-in-out infinite alternate;
}

/* cronômetro */
.f1-watch {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: f1-watch 7s infinite;
}

.watch-face { fill: #001a2c; stroke: #6fdde1; stroke-width: 2.5; }
.watch-ticks { fill: none; stroke: rgba(142, 230, 233, 0.55); stroke-width: 2; stroke-dasharray: 1.5 4.26; }
.watch-btn { fill: #6fdde1; }
.watch-pin { fill: #fff; }

.watch-hand {
    stroke: #ffb37a;
    stroke-width: 2.5;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: 50% 71.43%;
    animation: f1-hand 7s infinite;
}

.f1-chip {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid rgba(111, 221, 225, 0.5);
    border-radius: 999px;
    background: rgba(0, 26, 44, 0.85);
    color: #8ee6e9;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0;
    animation: f1-chip 7s infinite;
}

@keyframes f1-drive {
    0% { transform: translateX(-330px); animation-timing-function: cubic-bezier(0.15, 0.75, 0.3, 1); }
    22% { transform: translateX(0); }
    58% { transform: translateX(0); animation-timing-function: cubic-bezier(0.65, 0, 0.95, 0.4); }
    76%, 100% { transform: translateX(340px); }
}

@keyframes f1-wheel {
    0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.15, 0.75, 0.3, 1); }
    22% { transform: rotate(900deg); }
    58% { transform: rotate(900deg); animation-timing-function: cubic-bezier(0.65, 0, 0.95, 0.4); }
    76%, 100% { transform: rotate(2340deg); }
}

@keyframes f1-swap {
    0%, 31% { transform: scale(1); opacity: 1; }
    35%, 39% { transform: scale(0.25); opacity: 0; }
    44%, 100% { transform: scale(1); opacity: 1; }
}

@keyframes f1-newtyre {
    0%, 37% { stroke: #9aa6b2; }
    40%, 99% { stroke: #6fdde1; }
    100% { stroke: #9aa6b2; }
}

@keyframes f1-crew {
    0%, 23% { opacity: 0; transform: translateY(16px); }
    27%, 52% { opacity: 1; transform: translateY(0); }
    56%, 100% { opacity: 0; transform: translateY(16px); }
}

@keyframes f1-arm {
    from { transform: rotate(-8deg); }
    to { transform: rotate(8deg); }
}

@keyframes f1-watch {
    0%, 23% { opacity: 0; transform: scale(0.6); }
    27%, 54% { opacity: 1; transform: scale(1); }
    58%, 100% { opacity: 0; transform: scale(0.6); }
}

@keyframes f1-hand {
    0%, 25% { transform: rotate(0deg); }
    54% { transform: rotate(1440deg); }
    100% { transform: rotate(1440deg); }
}

@keyframes f1-speed {
    0% { opacity: 0.9; }
    18%, 59% { opacity: 0; }
    64%, 76% { opacity: 1; }
    77%, 100% { opacity: 0; }
}

@keyframes f1-smoke {
    0%, 58% { opacity: 0; transform: translate(0, 0) scale(0.3); }
    62% { opacity: 0.95; transform: translate(-4px, -2px) scale(0.8); }
    82%, 100% { opacity: 0; transform: translate(-26px, -12px) scale(2.4); }
}

@keyframes f1-chip {
    0%, 24% { opacity: 0; transform: translateY(4px); }
    28%, 54% { opacity: 1; transform: translateY(0); }
    58%, 100% { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .sup-pulse, .f1-smoke, .f1-speed { display: none; }
    .sup-alert, .sup-node--core, .sup-node--core::before, .sup-node--ok,
    .sup-step-ico, .sup-progress span,
    .f1-car, .f1-wheel, .f1-swap, .f1-rim, .f1-mech, .mech-arm, .f1-watch, .watch-hand, .f1-chip { animation: none; }
    .sup-progress span { width: 100%; }
    .f1-car { transform: none; }
    .f1-mech, .f1-watch, .f1-chip { opacity: 1; }
}

/* etapas do atendimento na vertical, em cartão mais estreito à esquerda
   (não disputa espaço com o card flutuante do canto) */
.sup-steps {
    top: 53%;
    width: 37%;
}

.sup-steps-head {
    align-items: flex-start;
    line-height: 1.3;
}

.sup-steps-head .sup-dot {
    flex-shrink: 0;
    margin-top: 0.35em;
}

.sup-steps ol {
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.6cqi;
}

@container (max-width: 340px) {
    .sup-steps {
        width: 44%;
    }
}

.sup-steps {
    top: 50%;
    padding: 2.8cqi 3.4cqi 3.2cqi;
}

.sup-steps-head {
    margin-bottom: 2.2cqi;
    white-space: nowrap;
}

.sup-steps ol {
    gap: 1.1cqi;
    margin-bottom: 2.2cqi;
}

/* ícones um pouco mais ao centro, para as etiquetas caberem em telas menores */
.sup-node--env,
.sup-label--env { left: 18%; }
.sup-node--ok,
.sup-label--ok { left: 82%; }

.sup-steps { width: 36%; }

/* ==========================================================================
   Página Início | seção em destaque: Ações sociais e fomento a startups
   Fundo lilás próprio (cor da área institucional) e dois cards escuros.
   ========================================================================== */
.imp-section {
    overflow: hidden;
    background:
        radial-gradient(600px 420px at 10% 0%, rgba(111, 114, 242, 0.22), transparent 65%),
        radial-gradient(560px 420px at 95% 100%, rgba(0, 177, 183, 0.18), transparent 65%),
        linear-gradient(160deg, #f4f3ff 0%, #eef2ff 50%, #ecf8fb 100%);
}

.imp-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(79, 83, 214, 0.16) 1.2px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 80%);
}

/* linhas de luz no topo e na base, marcando a seção */
.imp-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #6f72f2 30%, #00b1b7 70%, transparent);
}

.imp-section > .container { position: relative; }

.imp-tag {
    gap: 8px;
    background: #ecebff;
    color: #3f43c4;
}

.imp-tag i { color: #6f72f2; }

.imp-hl {
    background: linear-gradient(90deg, #4f53d6, #009ba1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.imp-inline-link {
    color: #3f43c4;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(79, 83, 214, 0.35);
    text-underline-offset: 3px;
}

.imp-inline-link:hover { text-decoration-color: #3f43c4; }

.imp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.imp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 40px 38px;
    border-radius: 24px;
    color: #d9dcf5;
    box-shadow: 0 26px 60px rgba(27, 29, 92, 0.28);
}

.imp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 80% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 60% at 80% 0%, #000 0%, transparent 75%);
}

.imp-card > * { position: relative; }

.imp-card--social {
    background:
        radial-gradient(420px 300px at 100% 0%, rgba(195, 197, 255, 0.28), transparent 65%),
        linear-gradient(160deg, #0d0f33 0%, #1b1d5c 55%, #2c2f86 100%);
}

.imp-card--startups {
    background:
        radial-gradient(420px 300px at 100% 0%, rgba(0, 177, 183, 0.32), transparent 65%),
        linear-gradient(160deg, #001a2c 0%, #002c53 55%, #013a66 100%);
}

.imp-card-top { margin-bottom: 18px; }

.imp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.imp-card--social .imp-badge i { color: #c3c5ff; }
.imp-card--startups .imp-badge i { color: #8ee6e9; }

.imp-card h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
    font-weight: 700;
}

.imp-sub {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
}

.imp-card--social .imp-sub { color: #c3c5ff; }
.imp-card--startups .imp-sub { color: #8ee6e9; }

.imp-card p { color: #d9dcf5; font-size: 15.5px; line-height: 1.6; }

.imp-stat {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 6px 0 20px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
}

.imp-stat strong {
    flex-shrink: 0;
    background: linear-gradient(90deg, #c3c5ff, #8ee6e9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.imp-stat span { color: #e4e6fb; font-size: 14.5px; line-height: 1.45; }

.imp-quote {
    margin: 0 0 26px;
    padding: 4px 0 4px 18px;
    border-left: 3px solid #a9acff;
    color: #fff;
    font-size: 15.5px;
    font-style: italic;
    line-height: 1.6;
}

.imp-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

.imp-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 8px;
    background: #fff;
    color: #1b1d5c;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.imp-btn:hover { color: #1b1d5c; transform: translateY(-2px); }

.imp-btn--ghost {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}

.imp-btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

.imp-offers { list-style: none; display: grid; gap: 10px; margin: 4px 0 24px; padding: 0; }

.imp-offers li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
}

.imp-offer-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #0078b8, #009ba1);
    color: #fff;
    font-size: 16px;
}

.imp-list-title {
    margin: 0 0 12px !important;
    color: #9fb3c4 !important;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.imp-startups { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }

.imp-startups a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.imp-startups a:hover {
    color: #fff;
    border-color: rgba(142, 230, 233, 0.7);
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(3px);
}

.imp-st-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(142, 230, 233, 0.15);
    color: #8ee6e9;
    font-size: 15px;
}

.imp-st-name { display: grid; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.imp-st-name small { color: #9fb3c4; font-size: 12.5px; font-weight: 500; }
.imp-st-go { margin-left: auto; color: #8ee6e9; font-size: 13px; }

@media (max-width: 991.98px) {
    .imp-grid { grid-template-columns: 1fr; }
}

@media (max-width: 639.98px) {
    .imp-card { padding: 30px 22px; border-radius: 20px; }
    .imp-stat { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .imp-btn, .imp-startups a { transition: none; }
}

/* ==========================================================================
   Ações sociais e fomento a startups: blocos empilhados com mural de fotos
   ========================================================================== */
.imp-stack {
    display: grid;
    gap: 36px;
}

.imp-stack .imp-card {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: center;
    padding: 48px;
}

.imp-content {
    display: flex;
    flex-direction: column;
}

/* mural: grade de fotos com moldura branca e leve inclinação */
.imp-mural {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(56px, 6.2vw, 84px);
    gap: 14px;
    padding: 8px;
}

.imp-photo {
    position: relative;
    margin: 0;
    padding: 6px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(5, 6, 30, 0.45);
    transform: rotate(var(--tilt, 0deg));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imp-photo:hover {
    z-index: 2;
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 22px 44px rgba(5, 6, 30, 0.55);
}

/* foto real: ocupa todo o espaço, recortada sem distorcer */
.imp-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9px;
    object-fit: cover;
}

/* espaço reservado até a foto chegar */
.imp-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 10px;
    border: 2px dashed rgba(79, 83, 214, 0.35);
    border-radius: 9px;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0 10px, transparent 10px 20px),
        linear-gradient(135deg, #ecebff, #e3f7f8);
    color: #4f53d6;
    text-align: center;
}

.imp-ph i { font-size: 22px; opacity: 0.8; }
.imp-ph span { font-size: 12.5px; font-weight: 700; line-height: 1.3; }

.imp-card--startups .imp-ph {
    border-color: rgba(0, 120, 184, 0.35);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0 10px, transparent 10px 20px),
        linear-gradient(135deg, #e5f6ff, #e3f7f8);
    color: #0078b8;
}

/* posições no mural */
.imp-photo--a { grid-column: 1 / span 4; grid-row: 1 / span 3; --tilt: -1.2deg; }
.imp-photo--b { grid-column: 5 / span 2; grid-row: 1 / span 2; --tilt: 2deg; }
.imp-photo--c { grid-column: 5 / span 2; grid-row: 3 / span 3; --tilt: -1.5deg; }
.imp-photo--d { grid-column: 1 / span 2; grid-row: 4 / span 2; --tilt: 1.6deg; }
.imp-photo--e { grid-column: 3 / span 2; grid-row: 4 / span 2; --tilt: -1deg; }
.imp-photo--f { grid-column: 1 / span 4; grid-row: 4 / span 2; --tilt: 1deg; }

@media (max-width: 1199.98px) {
    .imp-stack .imp-card {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .imp-mural { grid-auto-rows: clamp(48px, 9vw, 84px); }
}

@media (max-width: 639.98px) {
    .imp-stack .imp-card { padding: 30px 22px; }
    .imp-mural { gap: 10px; padding: 4px; grid-auto-rows: 52px; }
    .imp-photo { padding: 4px; }
    .imp-ph i { font-size: 17px; }
    .imp-ph span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .imp-photo { transition: none; }
}

/* Selo "Uma empresa do grupo Leavening" na introdução */
.imp-group {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 12px 22px;
    border: 1px solid rgba(79, 83, 214, 0.15);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(27, 29, 92, 0.1);
    color: #4a5a68;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.imp-group:hover {
    color: #4a5a68;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(27, 29, 92, 0.16);
}

.imp-group img {
    height: 26px;
    width: auto;
}

/* Logo da Unijovem no topo do card */
.imp-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.imp-partner-logo {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(5, 6, 30, 0.3);
}

.imp-partner-logo img {
    height: 30px;
    width: auto;
}

@media (max-width: 639.98px) {
    .imp-group { flex-direction: column; gap: 6px; border-radius: 18px; }
    .imp-group img { height: 22px; }
    .imp-partner-logo img { height: 26px; }
}

/* Logo branco (Unimar) sobre selo translúcido no card escuro */
.imp-partner-logo--dark {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.imp-partner-logo--dark img {
    height: 24px;
}

.imp-card--startups .imp-content > p + p { margin-top: 2px; }
.imp-card--startups .imp-links { margin-top: 24px; }

@media (max-width: 639.98px) {
    .imp-partner-logo--dark img { height: 20px; }
}

/* ==========================================================================
   Cases e Blog | cards de escolha com ilustração
   ========================================================================== */
.hub-card--v2 {
    padding: 0;
    overflow: hidden;
}

.hub-card--v2 .hub-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 30px 34px 34px;
}

.hub-card--v2 h3 { margin-bottom: 14px; font-size: 1.6rem; }
.hub-card--v2 .btn { align-self: flex-start; margin-top: auto; }

.hub-visual {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.hub-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 80%);
}

/* --- Cases: troféu, resultados e gráfico --- */
.hv-cases {
    background:
        radial-gradient(320px 200px at 20% 50%, rgba(0, 177, 183, 0.35), transparent 70%),
        linear-gradient(150deg, #001a2c 0%, #002c53 60%, #013a66 100%);
}

.hv-trophy {
    position: absolute;
    left: 13%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(140deg, #0078b8, #009ba1);
    box-shadow: 0 0 0 10px rgba(0, 177, 183, 0.15), 0 0 40px rgba(0, 177, 183, 0.5);
    color: #fff;
    font-size: 34px;
}

.hv-metric {
    position: absolute;
    display: grid;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(0, 26, 44, 0.7);
    color: #9fb3c4;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    animation: hv-float 6s ease-in-out infinite;
}

.hv-metric b {
    background: linear-gradient(90deg, #8ee6e9, #7cb8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 22px;
    font-weight: 800;
}

.hv-metric--1 { left: 30%; top: 14%; }
.hv-metric--2 { left: 46%; top: 52%; animation-delay: -2s; }
.hv-metric--3 { left: 64%; top: 16%; animation-delay: -4s; }

.hv-bars {
    position: absolute;
    right: 6%;
    bottom: 16%;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 46%;
}

.hv-bars i {
    width: 14px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, #0078b8, #6fdde1);
    transform-origin: bottom;
    animation: hv-bar 3.4s ease-in-out infinite;
}

.hv-bars i:nth-child(1) { height: 28%; }
.hv-bars i:nth-child(2) { height: 44%; animation-delay: -0.4s; }
.hv-bars i:nth-child(3) { height: 58%; animation-delay: -0.8s; }
.hv-bars i:nth-child(4) { height: 76%; animation-delay: -1.2s; }
.hv-bars i:nth-child(5) { height: 100%; animation-delay: -1.6s; }

/* --- Blog: artigos empilhados --- */
.hv-blog {
    background:
        radial-gradient(320px 200px at 80% 30%, rgba(195, 197, 255, 0.3), transparent 70%),
        linear-gradient(160deg, #0d0f33 0%, #1b1d5c 55%, #2c2f86 100%);
}

.hv-post {
    position: absolute;
    left: 50%;
    display: grid;
    gap: 8px;
    width: 46%;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(5, 6, 30, 0.45);
}

.hv-post i {
    display: block;
    height: 7px;
    border-radius: 7px;
    background: #e3e8ef;
}

.hv-post i + i { width: 70%; }

.hv-post--1 { top: 14%; transform: translateX(-62%) rotate(-6deg); }
.hv-post--2 { top: 30%; transform: translateX(-40%) rotate(3deg); }
.hv-post--3 { top: 48%; transform: translateX(-52%) rotate(-1deg); }

.hv-tag {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.hv-tag--cloud { background: #e5f6ff; color: #0078b8; }
.hv-tag--sec { background: #e3f7f8; color: #007177; }
.hv-tag--ia { background: #ecebff; color: #4f53d6; }

.hv-pen {
    position: absolute;
    right: 9%;
    top: 16%;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(140deg, #6f72f2, #009ba1);
    box-shadow: 0 0 30px rgba(111, 114, 242, 0.55);
    color: #fff;
    font-size: 22px;
    animation: hv-float 6s ease-in-out infinite;
}

@keyframes hv-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes hv-bar {
    0%, 100% { transform: scaleY(0.75); }
    50% { transform: scaleY(1); }
}

@media (max-width: 639.98px) {
    .hub-visual { height: 190px; }
    .hv-trophy { width: 64px; height: 64px; font-size: 26px; left: 15%; }
    .hv-metric { padding: 7px 11px; font-size: 10.5px; }
    .hv-metric b { font-size: 18px; }
    .hv-metric--1 { left: 33%; }
    .hv-metric--3 { left: 62%; top: 60%; }
    .hv-metric--2 { left: 33%; top: 58%; }
    .hv-bars { right: 5%; bottom: 52%; height: 32%; }
    .hv-bars i { width: 10px; }
    .hv-post { width: 58%; padding: 11px 13px; }
    .hub-card--v2 .hub-body { padding: 24px 22px 26px; }
}

/* ==========================================================================
   Cases completos | ícones, painel de resultado e bloco de resultado
   ========================================================================== */
.case-full-head {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.case-head-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.25), transparent 55%),
        linear-gradient(140deg, var(--blue), var(--teal-strong));
    box-shadow: 0 12px 26px rgba(0, 120, 184, 0.28);
    color: #fff;
    font-size: 28px;
}

.case-head-text { min-width: 0; }

/* títulos das partes com ícone */
.case-story h4 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.case-story h4::before { display: none; }

.case-h-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 15px;
}

.case-h-ico--problem { background: #fff1e8; color: #d9643f; }
.case-h-ico--solution { background: #e5f6ff; color: var(--blue); }
.case-h-ico--result { background: linear-gradient(135deg, var(--blue), var(--teal-strong)); color: #fff; }

/* bloco "O resultado" em destaque */
.case-result-block {
    padding: 26px 28px;
    border: 1px solid rgba(0, 177, 183, 0.35);
    border-radius: 18px;
    background: linear-gradient(135deg, #eafafb 0%, #eef3ff 100%);
}

.case-result-block p { color: var(--navy); }
.case-result-block .story-strong { font-size: 1.1rem; }

.case-result-block ul li::before,
.case-result-block .story-list li::before {
    color: var(--teal-strong);
}

/* painel lateral com o número principal */
.case-highlight {
    padding: 28px 26px;
    border: 0;
    border-radius: 20px;
    background:
        radial-gradient(260px 180px at 100% 0%, rgba(0, 177, 183, 0.35), transparent 70%),
        linear-gradient(155deg, #001a2c 0%, #002c53 60%, #013a66 100%);
    box-shadow: 0 18px 40px rgba(0, 44, 83, 0.22);
    color: #c9d6e2;
}

.case-hl-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.case-hl-label i { color: #f2cc60; }

.case-hl-figure {
    margin: 0 0 8px;
    background: linear-gradient(90deg, #8ee6e9, #7cb8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.case-hl-caption {
    margin: 0 0 18px;
    color: #e4eef7;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.case-hl-extra {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #c9d6e2;
    font-size: 14px;
    line-height: 1.45;
}

.case-hl-extra i { margin-top: 3px; color: #3ddc97; }

@media (max-width: 639.98px) {
    .case-full-head { gap: 14px; }
    .case-head-ico { width: 52px; height: 52px; border-radius: 14px; font-size: 22px; }
    .case-result-block { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .hv-metric, .hv-bars i, .hv-pen { animation: none; }
}

/* a ilustração ocupa a largura toda do card */
.hub-card--v2 { align-items: stretch; }
.hub-card--v2 .hub-body { align-items: flex-start; }
.hub-card--v2 .hub-examples { align-self: stretch; }

/* ==========================================================================
   Cases e Blog | cards com cores próprias: verde-esmeralda (Cases) e rosa-framboesa (Blog)
   ========================================================================== */
.hub-card--v2 .hub-body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 30px;
}

.hub-card--v2 h3 { margin: 0; }
.hub-card--v2 .btn { margin-top: 0; }

.hub-visual { height: 240px; }

/* --- Cases: verde-esmeralda --- */
.hub-card--cases { border-top: 4px solid #10b981; }

.hub-card--cases .hv-cases {
    background:
        radial-gradient(320px 220px at 18% 50%, rgba(52, 211, 153, 0.35), transparent 70%),
        radial-gradient(260px 180px at 95% 0%, rgba(0, 177, 183, 0.3), transparent 70%),
        linear-gradient(150deg, #022c22 0%, #064e3b 55%, #065f46 100%);
}

.hub-card--cases .hv-trophy {
    background: linear-gradient(140deg, #059669, #14b8a6);
    box-shadow: 0 0 0 10px rgba(52, 211, 153, 0.16), 0 0 40px rgba(52, 211, 153, 0.5);
}

.hub-card--cases .hv-metric {
    border-color: rgba(167, 243, 208, 0.25);
    background: rgba(2, 44, 34, 0.7);
    color: #a7f3d0;
}

.hub-card--cases .hv-metric b {
    background: linear-gradient(90deg, #a7f3d0, #6ee7b7);
    -webkit-background-clip: text;
    background-clip: text;
}

.hub-card--cases .hv-bars i { background: linear-gradient(to top, #059669, #6ee7b7); }
.hub-card--cases h3 { color: #065f46; }

.hub-card--cases .btn-primary {
    background: linear-gradient(90deg, #059669, #14b8a6);
    color: #fff;
}

/* --- Blog: rosa-framboesa --- */
.hub-card--blog { border-top: 4px solid #e11d74; }

.hub-card--blog .hv-blog {
    background:
        radial-gradient(320px 220px at 82% 30%, rgba(244, 114, 182, 0.35), transparent 70%),
        radial-gradient(260px 180px at 0% 100%, rgba(167, 139, 250, 0.3), transparent 70%),
        linear-gradient(160deg, #3b0a2a 0%, #831843 55%, #9d174d 100%);
}

.hub-card--blog .hv-pen {
    background: linear-gradient(140deg, #ec4899, #a855f7);
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.55);
}

.hub-card--blog .hv-tag--cloud { background: #fce7f3; color: #be185d; }
.hub-card--blog .hv-tag--sec { background: #f3e8ff; color: #7e22ce; }
.hub-card--blog .hv-tag--ia { background: #ffe4e6; color: #be123c; }
.hub-card--blog h3 { color: #9d174d; }

.hub-card--blog .btn-primary {
    background: linear-gradient(90deg, #db2777, #a855f7);
    color: #fff;
}

.hub-card--cases .btn-primary:hover,
.hub-card--blog .btn-primary:hover { color: #fff; }

@media (max-width: 639.98px) {
    .hub-visual { height: 200px; }
    .hub-card--v2 .hub-body { padding: 22px; }
}

/* ==========================================================================
   Página Início | Highlights: adequações especializadas (faixa em movimento)
   Dois grupos idênticos deslizam continuamente; pausa ao passar o mouse.
   ========================================================================== */
.hl-section {
    position: relative;
    overflow: hidden;
    padding: 44px 0 52px;
    border-bottom: 1px solid #e8eef3;
    background:
        radial-gradient(520px 160px at 50% 0%, rgba(0, 177, 183, 0.12), transparent 70%),
        linear-gradient(180deg, #f2fbfc 0%, #ffffff 100%);
}

.hl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 14px;
    margin-bottom: 26px;
    text-align: center;
}

.hl-head .tag { margin: 0; }

.hl-title {
    margin: 0;
    color: var(--navy);
    font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem);
    font-weight: 700;
}

.hl-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.hl-track {
    display: flex;
    width: max-content;
    animation: hl-scroll 34s linear infinite;
}

.hl-marquee:hover .hl-track,
.hl-marquee:focus-within .hl-track {
    animation-play-state: paused;
}

.hl-group {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 8px 28px 14px 0;
    list-style: none;
}

.hl-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 14px 26px 14px 14px;
    border: 1px solid #e1e9f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 44, 83, 0.08);
    white-space: nowrap;
}

.hl-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blue), var(--teal-strong));
    box-shadow: 0 8px 18px rgba(0, 155, 161, 0.28);
    color: #fff;
    font-size: 22px;
}

.hl-logo {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 96px;
    height: 54px;
    padding: 0 10px;
    border: 1px solid #e3eee6;
    border-radius: 14px;
    background: #fff;
}

.hl-logo img {
    width: 100%;
    height: auto;
}

.hl-text {
    display: grid;
    line-height: 1.15;
}

.hl-text small {
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hl-text strong {
    color: var(--navy);
    font-size: 1.4rem;
    font-weight: 800;
}

.hl-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #e6f6ec;
    color: #0b6b3a;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.hl-badge i { color: #16a34a; }

@keyframes hl-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 639.98px) {
    .hl-section { padding: 36px 0 40px; }
    .hl-group { gap: 18px; padding-right: 18px; }
    .hl-item { gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; }
    .hl-ico { width: 46px; height: 46px; font-size: 19px; }
    .hl-logo { width: 80px; height: 46px; }
    .hl-text strong { font-size: 1.15rem; }
    .hl-badge { padding: 6px 10px; font-size: 12px; }
}

/* Movimento reduzido: cartões parados e centralizados */
@media (prefers-reduced-motion: reduce) {
    .hl-marquee { -webkit-mask-image: none; mask-image: none; }
    .hl-track { width: auto; justify-content: center; animation: none; }
    .hl-group { flex-wrap: wrap; justify-content: center; padding-right: 0; }
    .hl-group--clone, .hl-item[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Página Início | logos de clientes com tamanho visual equilibrado
   (logos largos limitados pela largura; logos quadrados, pela altura)
   ========================================================================== */
.logo-track {
    padding-right: 64px;   /* emenda perfeita ao recomeçar a faixa */
    animation-duration: 50s;
}

.logo-track img {
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 52px;
    object-fit: contain;
}

/* Terravista é bem mais largo que os demais: um pouco mais de largura para não ficar fino demais */
.logo-track img[src$="terravista.webp"] { max-width: 196px; }

/* ==========================================================================
   Highlights | dois cartões se revezando (baralho)
   Ciclo de 8s: cada cartão fica ~3,5s na frente; a troca leva ~0,5s.
   ========================================================================== */
.hl-stage {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 18px;
}

.hl-deck {
    position: relative;
    display: grid;
    width: min(560px, 100%);
    height: 112px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hl-card {
    position: absolute;
    top: 14px;
    left: 50%;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 16px 28px 16px 16px;
    transform-origin: center;
    animation: hl-swap 8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.hl-card--b { animation-delay: -4s; }

.hl-stage:hover .hl-card,
.hl-stage:hover .hl-dots span {
    animation-play-state: paused;
}

/* frente: centralizado e em destaque | atrás: deslocado, menor e esmaecido */
@keyframes hl-swap {
    0%, 44% {
        z-index: 2;
        opacity: 1;
        filter: none;
        transform: translate(-50%, 0) scale(1);
        box-shadow: 0 18px 40px rgba(0, 44, 83, 0.16);
    }
    47% {
        z-index: 2;
        opacity: 0.9;
        transform: translate(calc(-50% - 90px), -6px) scale(0.95) rotate(-2deg);
    }
    50%, 94% {
        z-index: 1;
        opacity: 0.45;
        filter: saturate(0.6);
        transform: translate(calc(-50% + 34px), -14px) scale(0.9);
        box-shadow: 0 6px 16px rgba(0, 44, 83, 0.08);
    }
    97% {
        z-index: 1;
        opacity: 0.8;
        transform: translate(calc(-50% + 70px), -6px) scale(0.95) rotate(2deg);
    }
    100% {
        z-index: 2;
        opacity: 1;
        filter: none;
        transform: translate(-50%, 0) scale(1);
        box-shadow: 0 18px 40px rgba(0, 44, 83, 0.16);
    }
}

/* indicador de qual cartão está na frente */
.hl-dots {
    display: flex;
    gap: 8px;
}

.hl-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #cdd8e2;
    animation: hl-dot 8s ease-in-out infinite;
}

.hl-dots .hl-dot--b { animation-delay: -4s; }

@keyframes hl-dot {
    0%, 46% { width: 26px; background: var(--teal-strong); }
    50%, 96% { width: 8px; background: #cdd8e2; }
    100% { width: 26px; background: var(--teal-strong); }
}

@media (max-width: 639.98px) {
    .hl-deck { height: 98px; }
    .hl-card { top: 12px; padding: 12px 18px 12px 12px; }

    @keyframes hl-swap {
        0%, 44% { z-index: 2; opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); }
        47% { z-index: 2; opacity: 0.9; transform: translate(calc(-50% - 40px), -4px) scale(0.95) rotate(-2deg); }
        50%, 94% { z-index: 1; opacity: 0.4; filter: saturate(0.6); transform: translate(calc(-50% + 16px), -12px) scale(0.9); }
        97% { z-index: 1; opacity: 0.8; transform: translate(calc(-50% + 30px), -4px) scale(0.95) rotate(2deg); }
        100% { z-index: 2; opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); }
    }
}

/* Movimento reduzido: os dois cartões lado a lado, parados */
@media (prefers-reduced-motion: reduce) {
    .hl-deck {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        width: auto;
        height: auto;
    }

    .hl-card {
        position: static;
        animation: none;
        transform: none;
        opacity: 1;
    }

    .hl-dots { display: none; }
}

/* os dois cartões com a mesma largura: o de trás sempre aparece atrás do da frente */
.hl-card {
    width: min(440px, calc(100% - 44px));
    justify-content: center;
}

@media (max-width: 639.98px) {
    .hl-card {
        width: calc(100% - 28px);
        gap: 10px;
        white-space: normal;
    }

    .hl-card .hl-logo { width: 72px; }
}

/* cartão de trás mais visível (efeito de baralho) */
.hl-deck { height: 124px; }
.hl-card { top: 24px; }

@keyframes hl-swap {
    0%, 44% { z-index: 2; opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); box-shadow: 0 18px 40px rgba(0, 44, 83, 0.16); }
    47% { z-index: 2; opacity: 0.92; transform: translate(calc(-50% - 90px), -8px) scale(0.95) rotate(-2deg); }
    50%, 94% { z-index: 1; opacity: 0.6; filter: saturate(0.55); transform: translate(calc(-50% + 56px), -20px) scale(0.93); box-shadow: 0 8px 18px rgba(0, 44, 83, 0.1); }
    97% { z-index: 1; opacity: 0.85; transform: translate(calc(-50% + 84px), -8px) scale(0.96) rotate(2deg); }
    100% { z-index: 2; opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); box-shadow: 0 18px 40px rgba(0, 44, 83, 0.16); }
}

@media (max-width: 639.98px) {
    .hl-deck { height: 110px; }
    .hl-card { top: 20px; width: calc(100% - 36px); }

    @keyframes hl-swap {
        0%, 44% { z-index: 2; opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); }
        47% { z-index: 2; opacity: 0.92; transform: translate(calc(-50% - 40px), -6px) scale(0.95) rotate(-2deg); }
        50%, 94% { z-index: 1; opacity: 0.6; filter: saturate(0.55); transform: translate(calc(-50% + 24px), -16px) scale(0.93); }
        97% { z-index: 1; opacity: 0.85; transform: translate(calc(-50% + 36px), -6px) scale(0.96) rotate(2deg); }
        100% { z-index: 2; opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .hl-stage { justify-items: stretch; }
    .hl-deck { width: 100%; }
    .hl-card { width: auto; max-width: none; }
}

/* ==========================================================================
   Highlights | etiqueta acima do título, com brilhos ao redor
   ========================================================================== */
.hl-head {
    flex-direction: column;
    gap: 14px;
}

.hl-spark-wrap {
    position: relative;
    display: inline-flex;
    padding: 6px 18px;
}

.hl-tag {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--teal-strong));
    box-shadow: 0 8px 22px rgba(0, 155, 161, 0.35), 0 0 0 4px rgba(0, 177, 183, 0.12);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* reflexo de luz passando pela etiqueta */
.hl-tag::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    animation: hl-shine 3.6s ease-in-out infinite;
}

/* brilhos (estrelas de quatro pontas) piscando ao redor */
.hl-spark {
    position: absolute;
    display: block;
    width: 14px;
    height: 14px;
    animation: hl-twinkle 2.4s ease-in-out infinite;
}

.hl-spark svg { display: block; width: 100%; height: 100%; }
.hl-spark path { fill: #f2c14e; }
.hl-spark--2 path, .hl-spark--4 path { fill: #00b1b7; }

.hl-spark--1 { top: -6px; left: -2px; width: 16px; height: 16px; }
.hl-spark--2 { top: -10px; right: 6px; width: 11px; height: 11px; animation-delay: -0.6s; }
.hl-spark--3 { bottom: -6px; right: -6px; width: 15px; height: 15px; animation-delay: -1.2s; }
.hl-spark--4 { bottom: -4px; left: 10px; width: 9px; height: 9px; animation-delay: -1.8s; }
.hl-spark--5 { top: 50%; right: -18px; width: 10px; height: 10px; margin-top: -5px; animation-delay: -0.9s; }

@keyframes hl-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.55) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(45deg); }
}

@keyframes hl-shine {
    0%, 55% { left: -60%; }
    85%, 100% { left: 130%; }
}

/* logo do CNJ no cartão de Cartórios (mesmo formato do logo da Unimed) */
.hl-logo--cnj {
    width: 112px;
    border-color: #e3e7ec;
}

@media (max-width: 639.98px) {
    .hl-logo--cnj { width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
    .hl-spark, .hl-tag::after { animation: none; }
    .hl-spark { opacity: 0.9; }
    .hl-tag::after { display: none; }
}

/* Página Início | frase em destaque na seção "Por que Altvia" */
.why-callout {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 6px 0 22px;
    padding: 18px 22px;
    border-left: 4px solid var(--teal);
    border-radius: 0 14px 14px 0;
    background: linear-gradient(135deg, #eafafb 0%, #eef5ff 100%);
}

.why-callout-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue), var(--teal-strong));
    box-shadow: 0 8px 18px rgba(0, 155, 161, 0.28);
    color: #fff;
    font-size: 18px;
}

.why-callout p {
    margin: 0;
    color: var(--navy);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.5;
}

.why-callout strong {
    color: var(--teal-ink);
    font-weight: 800;
}

@media (max-width: 639.98px) {
    .why-callout { align-items: flex-start; gap: 12px; padding: 16px 16px 16px 14px; }
    .why-callout-ico { width: 38px; height: 38px; font-size: 16px; }
    .why-callout p { font-size: 1rem; }
}

/* ==========================================================================
   Página Início | Autodiagnóstico de desafios
   Coral (#d9643f / #fdf0ec) = dor (o mesmo tom de "Apagar incêndios");
   ao marcar, o cartão passa para o teal da Altvia = solução.
   A contagem usa contadores CSS; nada é enviado ou armazenado.
   ========================================================================== */
.dx-section { counter-reset: dores; }

.dx-section .section-head .tag { gap: 8px; }
.dx-section .section-head .lead { margin-top: 6px; }

.dx-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dx-item {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1.5px solid #e6ebf0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 44, 83, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.dx-item:hover {
    transform: translateY(-3px);
    border-color: rgba(217, 100, 63, 0.35);
    box-shadow: 0 12px 28px rgba(0, 44, 83, 0.1);
}

.dx-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    padding: 22px 22px 12px;
    cursor: pointer;
}

/* caixa de seleção nativa: invisível, mas acessível pelo teclado e leitores de tela */
.dx-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dx-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.dx-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #fdf0ec;
    color: #d9643f;
    font-size: 19px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.dx-box {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid #cfd8e1;
    border-radius: 8px;
    background: #fff;
    color: transparent;
    font-size: 13px;
    transition: all 0.2s ease;
}

.dx-text {
    color: var(--navy);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
}

.dx-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    margin: 0 22px 20px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #4a5a68;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.dx-tag i { color: var(--teal-strong); }

.dx-tag:hover { background: #e3f3f8; color: var(--navy); }

/* ---------- marcado: passa para o teal da Altvia ---------- */
.dx-item:has(.dx-check:checked) {
    border-color: var(--teal);
    background: linear-gradient(180deg, #f2fcfc 0%, #ffffff 70%);
    box-shadow: 0 12px 30px rgba(0, 155, 161, 0.18);
}

.dx-check:checked { counter-increment: dores; }

.dx-check:checked ~ .dx-top .dx-ico {
    background: linear-gradient(135deg, var(--blue), var(--teal-strong));
    box-shadow: 0 8px 18px rgba(0, 155, 161, 0.3);
    color: #fff;
}

.dx-check:checked ~ .dx-top .dx-box {
    border-color: var(--teal-strong);
    background: var(--teal-strong);
    color: #fff;
}

.dx-item:has(.dx-check:checked) .dx-tag {
    background: #e3f7f8;
    color: #00666a;
}

.dx-check:focus-visible ~ .dx-top .dx-box {
    outline: 3px solid var(--teal);
    outline-offset: 2px;
}

/* ---------- resultado: reage ao que foi marcado ---------- */
.dx-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    margin-top: 32px;
    padding: 22px 28px;
    border: 1.5px dashed #d5dde6;
    border-radius: 20px;
    background: #fff;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.dx-msg {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: #4a5a68;
    font-size: 1.05rem;
    line-height: 1.45;
}

.dx-msg--empty i { color: #d9643f; font-size: 20px; }

.dx-msg--some { display: none; color: var(--navy); }
.dx-msg--some strong { color: var(--teal-ink); }

.dx-count::before {
    content: counter(dores);
    display: grid;
    place-items: center;
    min-width: 56px;
    height: 56px;
    padding: 0 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--blue), var(--teal-strong));
    box-shadow: 0 10px 22px rgba(0, 155, 161, 0.3);
    color: #fff;
    font-size: 1.9rem;
    font-weight: 800;
}

.dx-cta-some { display: none; }

/* com pelo menos um desafio marcado */
.dx-section:has(.dx-check:checked) .dx-result {
    border-style: solid;
    border-color: var(--teal);
    background: linear-gradient(135deg, #eafafb 0%, #eef5ff 100%);
    box-shadow: 0 14px 32px rgba(0, 155, 161, 0.15);
}

.dx-section:has(.dx-check:checked) .dx-msg--empty,
.dx-section:has(.dx-check:checked) .dx-cta-empty { display: none; }

.dx-section:has(.dx-check:checked) .dx-msg--some { display: flex; }
.dx-section:has(.dx-check:checked) .dx-cta-some { display: inline; }

/* ---------- responsivo ---------- */
@media (max-width: 1199.98px) {
    .dx-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639.98px) {
    .dx-grid { grid-template-columns: 1fr; gap: 12px; }
    .dx-card { flex-direction: row; align-items: center; gap: 14px; padding: 16px 16px 8px; }
    .dx-top { display: contents; }
    .dx-ico { order: 1; flex-shrink: 0; width: 40px; height: 40px; font-size: 17px; }
    .dx-text { order: 2; flex: 1; font-size: 15px; }
    .dx-box { order: 3; flex-shrink: 0; }
    .dx-tag { margin: 0 16px 14px; }
    .dx-result { padding: 18px; }
    .dx-result .btn { width: 100%; justify-content: center; }
    .dx-count::before { min-width: 48px; height: 48px; font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dx-item, .dx-ico, .dx-box, .dx-tag, .dx-result { transition: none; }
    .dx-item:hover { transform: none; }
}

/* ==========================================================================
   Autodiagnóstico | a solução só aparece depois de marcar o cartão
   ========================================================================== */
.dx-card { padding-bottom: 20px; }

.dx-hint {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    padding: 4px 0;
    color: #8a96a3;
    font-size: 12.5px;
    font-weight: 600;
}

.dx-hint i { color: #d9643f; }

.dx-item:hover .dx-hint { color: #4a5a68; }

/* etiqueta da solução escondida até marcar */
.dx-tag { display: none; }

.dx-item:has(.dx-check:checked) .dx-hint { display: none; }

.dx-item:has(.dx-check:checked) .dx-card { padding-bottom: 10px; }

.dx-item:has(.dx-check:checked) .dx-tag {
    display: inline-flex;
    min-height: 26px;
    animation: dx-reveal 0.35s ease-out both;
}

@keyframes dx-reveal {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 639.98px) {
    .dx-card { flex-wrap: wrap; padding-bottom: 14px; }
    .dx-hint { order: 4; flex-basis: 100%; padding-left: 54px; }
    .dx-item:has(.dx-check:checked) .dx-card { padding-bottom: 6px; }
    .dx-tag { margin-left: 70px; }
}

@media (prefers-reduced-motion: reduce) {
    .dx-item:has(.dx-check:checked) .dx-tag { animation: none; }
}

@media (max-width: 639.98px) {
    .dx-hint { margin-top: -6px; }
    .dx-item:has(.dx-check:checked) .dx-tag { margin-bottom: 14px; }
}

/* Cases completos: o cartão sempre cabe na tela, mesmo em celulares muito estreitos */
.case-list { grid-template-columns: minmax(0, 1fr); }
.case-full, .case-head-text, .case-full-body, .case-story { min-width: 0; }
.case-full h3 { overflow-wrap: anywhere; }
.case-meta li { white-space: normal; }

/* ==========================================================================
   Ajustes finais
   ========================================================================== */

/* texto apenas para leitores de tela */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Highlights: selo abaixo do nome, nos dois cartões */
.hl-card .hl-text { gap: 2px; }

.hl-card .hl-text .hl-badge {
    justify-self: start;
    margin-top: 6px;
    padding: 5px 11px;
    font-size: 12px;
    white-space: nowrap;
}

.hl-badge--cnj {
    background: #eef2f7;
    color: var(--navy);
}

.hl-badge--cnj i { color: #4a5a68; }

.hl-deck { height: 150px; }

@media (max-width: 639.98px) {
    .hl-deck { height: 136px; }
    .hl-card .hl-text .hl-badge { white-space: normal; font-size: 11.5px; }
}

/* Unijovem: "Unimed Marília" com o verde da Unimed (#00995D) */
.imp-unimed {
    padding: 1px 8px;
    border-radius: 6px;
    background: #00995d;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

/* Fórmula 1: "É como no pit stop da Fórmula 1:" sempre em uma única linha */
.pitstop-quote blockquote { container-type: inline-size; }

.pit-hl {
    white-space: nowrap;
    font-size: clamp(13px, 6.2cqi, 32px);
}

/* Frase animada: o final ("pode ser aqui." / "podem estar aqui.") troca junto com cada item */
.rotator-verbs {
    display: inline-grid;
}

.rotator-verbs span {
    grid-area: 1 / 1;
    opacity: 0;
    animation: rotate-phrase 15s infinite;
}

.rotator-verbs span:nth-child(2) { animation-delay: 3s; }
.rotator-verbs span:nth-child(3) { animation-delay: 6s; }
.rotator-verbs span:nth-child(4) { animation-delay: 9s; }
.rotator-verbs span:nth-child(5) { animation-delay: 12s; }

@media (prefers-reduced-motion: reduce) {
    .rotator-verbs span { animation: none; }
    .rotator-verbs span:first-child { opacity: 1; }
}

/* ==========================================================================
   Contato | desafios selecionados no autodiagnóstico
   ========================================================================== */
.dx-selected {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1.5px solid var(--teal);
    border-radius: 14px;
    background: linear-gradient(135deg, #eafafb 0%, #eef5ff 100%);
}

.dx-selected[hidden] { display: none; }

.dx-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.dx-selected-head p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
}

.dx-selected-head p i { color: var(--teal-strong); }

.dx-edit {
    color: var(--teal-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dx-selected-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dx-selected-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    margin: 0;
    color: var(--navy);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
}

.dx-selected-list li i {
    grid-row: span 2;
    margin-top: 3px;
    color: var(--teal-strong);
}

.dx-selected-list li em {
    color: #4a5a68;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 600;
}

/* ==========================================================================
   Infraestrutura & Cloud | Jornada para Nuvem: processo de migração
   Desktop: linha horizontal com 12 etapas alternando acima/abaixo, seta de
   retorno (Preparação -> Janela de melhorias) e as três ondas tracejadas.
   Tablet/celular: linha do tempo vertical com a mesma seta e as mesmas ondas.
   ========================================================================== */
.jr-section {
    overflow: hidden;
    color: #c9d6e2;
    background:
        radial-gradient(620px 420px at 85% 0%, rgba(0, 177, 183, 0.22), transparent 65%),
        radial-gradient(520px 420px at 0% 100%, rgba(111, 114, 242, 0.2), transparent 65%),
        linear-gradient(160deg, #001a2c 0%, #002c53 60%, #013a66 100%);
}

.jr-section .section-title { color: #fff; }
.jr-section .lead { max-width: 860px; margin-left: auto; margin-right: auto; color: #c9d6e2; font-size: 1.05rem; }

.jr-diagram {
    margin-top: 48px;
    padding: 36px 34px 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(0, 26, 44, 0.45);
}

.jr-track,
.jr-cycle-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------------- desktop ---------------- */
@media (min-width: 992px) {
    .jr-track {
        --col: calc(100% / 12);
        position: relative;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        padding-top: 132px;
    }

    .jr-cycle,
    .jr-cycle-steps { display: contents; }

    .jr-step {
        position: relative;
        height: 270px;
        margin: 0;
    }

    /* barra: 12 segmentos em tons alternados */
    .jr-bar {
        position: absolute;
        top: calc(132px + 118px);
        left: 0;
        right: 0;
        display: flex;
        height: 14px;
        overflow: hidden;
        border-radius: 7px;
        box-shadow: 0 0 24px rgba(0, 177, 183, 0.25);
    }

    .jr-bar i { flex: 1; }
    .jr-bar i:nth-child(4n + 1) { background: #7cc4f0; }
    .jr-bar i:nth-child(4n + 2) { background: #0a5a9e; }
    .jr-bar i:nth-child(4n + 3) { background: #2e8fd0; }
    .jr-bar i:nth-child(4n + 4) { background: #0a5a9e; }

    .jr-dot {
        position: absolute;
        left: 50%;
        width: 14px;
        height: 14px;
        transform: translateX(-50%);
        border: 3px solid #002c53;
        border-radius: 50%;
        background: #8ee6e9;
        box-shadow: 0 0 0 3px rgba(142, 230, 233, 0.25), 0 0 14px rgba(142, 230, 233, 0.6);
    }

    .jr-line {
        position: absolute;
        left: 50%;
        width: 2px;
        height: 22px;
        transform: translateX(-50%);
        background: rgba(142, 230, 233, 0.55);
    }

    .jr-label {
        position: absolute;
        left: 50%;
        width: 150%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
    }

    /* etapas acima da barra */
    .jr-step--up .jr-line { top: 96px; }
    .jr-step--up .jr-dot { top: 82px; }
    .jr-step--up .jr-label { bottom: calc(270px - 76px); }

    /* etapas abaixo da barra */
    .jr-step--down .jr-line { top: 132px; }
    .jr-step--down .jr-dot { top: 152px; }
    .jr-step--down .jr-label { top: 176px; }

    /* seta de retorno: sai do fim da Janela de melhorias e volta para a Preparação do Ambiente */
    .jr-loop {
        position: absolute;
        top: 104px;
        left: calc(var(--col) * 3.5);
        right: calc(var(--col) * 0.65);
        height: calc(132px + 118px - 104px - 2px);
        border: 3px solid #00b1b7;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -6px 18px -8px rgba(0, 177, 183, 0.6);
    }

    .jr-loop::after {
        content: "";
        position: absolute;
        left: -10px;
        bottom: -4px;
        border-left: 8.5px solid transparent;
        border-right: 8.5px solid transparent;
        border-top: 14px solid #00b1b7;
    }

    /* as três ondas, tracejadas, acima da seta */
    .jr-waves {
        position: absolute;
        top: 0;
        left: calc(var(--col) * 3.5);
        right: calc(var(--col) * 0.65);
        display: grid;
        gap: 6px;
    }

    .jr-wave {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0;
    }

    .jr-dash {
        flex: 1;
        border-top: 2px dashed rgba(142, 230, 233, 0.65);
    }

    .jr-wave-label {
        padding: 3px 12px;
        border: 1px solid rgba(142, 230, 233, 0.35);
        border-radius: 999px;
        background: rgba(0, 177, 183, 0.12);
        color: #dff7f8;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

    .jr-wave-label b { color: #8ee6e9; }
}

/* ---------------- tablet e celular: linha do tempo vertical ---------------- */
@media (max-width: 991.98px) {
    .jr-diagram { padding: 26px 20px; }

    .jr-track {
        position: relative;
        padding-left: 30px;
    }

    /* linha vertical em degradê no lugar da barra */
    .jr-track::before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 9px;
        width: 6px;
        border-radius: 6px;
        background: linear-gradient(180deg, #7cc4f0, #2e8fd0 40%, #0a5a9e 70%, #7cc4f0);
    }

    .jr-bar { display: none; }

    .jr-step {
        position: relative;
        margin: 0;
        padding: 9px 0;
    }

    .jr-line { display: none; }

    .jr-dot {
        position: absolute;
        top: 13px;
        left: -27px;
        width: 14px;
        height: 14px;
        border: 3px solid #002c53;
        border-radius: 50%;
        background: #8ee6e9;
        box-shadow: 0 0 10px rgba(142, 230, 233, 0.6);
    }

    .jr-label {
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.35;
    }

    /* ciclo que se repete: as etapas 4 a 11 ficam dentro de um colchete com seta de retorno */
    .jr-cycle {
        position: relative;
        margin: 6px 0;
        padding: 0 46px 0 0;
    }

    .jr-loop {
        position: absolute;
        top: 64px;
        bottom: 18px;
        right: 8px;
        width: 26px;
        border: 3px solid #00b1b7;
        border-left: 0;
        border-radius: 0 12px 12px 0;
    }

    .jr-loop::after {
        content: "";
        position: absolute;
        top: -9.5px;
        left: -12px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 13px solid #00b1b7;
    }

    .jr-waves {
        display: grid;
        gap: 6px;
        margin: 0 -46px 10px 0;
    }

    .jr-wave { display: flex; align-items: center; gap: 10px; margin: 0; }
    .jr-dash { flex: 1; min-width: 16px; border-top: 2px dashed rgba(142, 230, 233, 0.6); }

    .jr-wave-label {
        padding: 2px 10px;
        border: 1px solid rgba(142, 230, 233, 0.35);
        border-radius: 999px;
        background: rgba(0, 177, 183, 0.12);
        color: #dff7f8;
        font-size: 12.5px;
        font-weight: 600;
    }

    .jr-wave-label b { color: #8ee6e9; }
}

/* seta de retorno presa às etapas do ciclo (Preparação do Ambiente -> Janela de melhorias) */
.jr-loop { list-style: none; margin: 0; }

@media (max-width: 991.98px) {
    .jr-cycle-steps { position: relative; }

    .jr-loop {
        top: 20px;
        bottom: 20px;
        right: -38px;
    }
}

/* ==========================================================================
   Cases e Blog | artigos mais recentes do blog (preenchidos automaticamente)
   ========================================================================== */
.blog-recentes-vazio {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 26px;
    border: 1.5px dashed #e3c4d6;
    border-radius: 18px;
    background: #fdf6fa;
}

.blog-recentes-vazio span {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(140deg, #ec4899, #a855f7);
    color: #fff;
    font-size: 20px;
}

.blog-recentes-vazio p { margin: 0; color: #4a5a68; }
.blog-recentes-vazio strong { color: var(--navy); }

.blog-card--link h3 a { color: inherit; text-decoration: none; }
.blog-card--link h3 a::after { content: ""; position: absolute; inset: 0; }
.blog-card--link { position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.blog-card--link:hover { transform: translateY(-3px); }
.blog-card-meta { margin-top: auto; color: #6b7280; font-size: 13px; }

.blog-ver-todos { margin: 28px 0 0; text-align: center; }

@media (max-width: 639.98px) {
    .blog-recentes-vazio { flex-direction: column; align-items: flex-start; }
}