/* ===========================
   HERO
=========================== */
.hero {
    display: grid;
    grid-template-columns: 48% 52%;
    height: 560px;
    min-height: 400px;
    background: var(--white);
    overflow: hidden;
}
.highlight-gold{
    color: var(--gold); ;
}
.hero-text-col {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background: var(--white);
    padding: 120px 32px 28px clamp(48px, 6vw, 120px);
}

.hero-content {
    max-width: 440px;
    width: 100%;
}

.hero-content h1 {
    font-size: clamp(1.9rem, 2.8vw, 2.7rem);
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 14px;
}

.hero-content h1 .highlight {
    color: var(--gold);
}

.hero-content p {
    font-size: 14px;
    color: var(--gray);
    margin-bottom: 28px;
    line-height: 1.7;
}

.hero-btns {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-image-col {
    position: relative;
    overflow: hidden;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}

.hero-image-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            #ffffff 0%,
            rgba(255, 255, 255, 0) 50%);
    z-index: 1;
    pointer-events: none;
}

/* ===========================
   TIMELINE
=========================== */
.timeline-section {
    padding: 50px 0 80px;
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('../../images/home/mapa-mundi.png') center 70% / 80% auto no-repeat;
    position: relative;
    overflow: hidden;
}

.timeline-section>.container {
    position: relative;
    z-index: 1;
}


.timeline {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: visible;
    margin: 110px 0 60px;
    justify-content: center;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    background: var(--gold);
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

.timeline-item {
    position: relative;
    flex: 1;
    min-width: 110px;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.timeline-dot {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--navy);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    transition: transform .3s, box-shadow .3s;
    box-shadow: 0 2px 12px rgba(3, 36, 70, .20);
}

.timeline-item:hover .timeline-dot {
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(201, 141, 35, .30);
}

.timeline-dot img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.timeline-content {
    position: absolute;
    width: 120px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.timeline-item.top .timeline-content {
    bottom: calc(100% + 14px);
}

.timeline-item.bottom .timeline-content {
    top: calc(100% + 14px);
}

/* traço conector dot ↔ texto */
.timeline-item.top .timeline-content::after,
.timeline-item.bottom .timeline-content::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 14px;
    background: var(--gold);
}

.timeline-item.top .timeline-content::after {
    bottom: -14px;
}

.timeline-item.bottom .timeline-content::after {
    top: -14px;
}

.timeline-year {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
}

.timeline-content p {
    font-size: 11px;
    color: var(--gray);
    line-height: 1.4;
}

/* ===========================
   EMPRESAS
=========================== */
.empresas-section {
    padding: 40px 0;
    background: var(--gray-lt);
}

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

.empresa-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1), box-shadow .35s;
}

.empresa-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.empresa-card:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, .14);
}

.empresa-img {
    height: 250px;
    overflow: hidden;
    background: #dbe4f0;
    position: relative;
}

.empresa-img>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.empresa-card:hover .empresa-img>img {
    transform: scale(1.05);
}

.empresa-img-logo {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    border-bottom-right-radius: 10px;
    padding: 10px 14px;
    z-index: 2;
    width: 170px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empresa-img-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: saturate(1.3) contrast(1.1);
}

.empresa-body {
    padding: 28px;
}

.empresa-body h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}

.empresa-body p {
    color: var(--gray);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.saiba-mais {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    transition: gap .2s, color .2s;
}

.saiba-mais span {
    transition: transform .2s;
}

.saiba-mais:hover {
    color: var(--gold-lt);
    gap: 10px;
}

.saiba-mais:hover span {
    transform: translateX(2px);
}

/* Cores por empresa */
.empresa-card:first-child .empresa-body h3,
.empresa-card:first-child .saiba-mais {
    color: #14466d;
}

.empresa-card:first-child .saiba-mais:hover {
    color: #1a5a8a;
}

.empresa-card--jn .empresa-body h3,
.empresa-card--jn .saiba-mais {
    color: #d49c37;
}

.empresa-card--jn .saiba-mais:hover {
    color: #e0ad4a;
}

.empresa-card--jt .empresa-body h3,
.empresa-card--jt .saiba-mais {
    color: #042f1f;
}

.empresa-card--jt .saiba-mais:hover {
    color: #065a3a;
}

/* ===========================
   CLIENTES
=========================== */
.clientes-section {
    padding: 80px 0;
    background: var(--white);
    overflow: hidden;
}

.clientes-carousel {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    margin-top: 48px;
    -webkit-mask: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.clientes-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
}

.clientes-track .cliente-item {
    margin-right: 56px;
}

.cliente-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cliente-item img {
    height: 60px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter .3s, opacity .3s, transform .3s;
}

.cliente-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}

/* ===========================
   POR QUE
=========================== */
.porque-section {
    padding: 20px 0;
    background: var(--navy);
    --mx: 50%;
    --my: 50%;
}

.porque-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mx) var(--my), rgba(201, 141, 35, .07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: background .1s;
}

.porque-section {
    position: relative;
}

.porque-inner {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 72px;
    align-items: start;
}

.porque-left .section-label {
    color: var(--gold-lt);
    font-size: 14px;
}

.porque-left h2 {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
    margin: 10px 0 16px;
}

.porque-left>p {
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
    line-height: 1.7;
    margin-bottom: 28px;
}

.porque-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.porque-card {
    background: transparent;
    border-radius: 0;
    padding: 32px 28px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease, background .3s;
    border-right: 2px solid rgba(255, 255, 255, .25);
    border-bottom: 2px solid rgba(255, 255, 255, .25);
}

.porque-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* remove borda direita da última coluna */
.porque-card:nth-child(3n) {
    border-right: none;
}

/* remove borda inferior da última linha */
.porque-card:nth-child(n+4) {
    border-bottom: none;
}

.porque-card:hover {
    background: rgba(255, 255, 255, .05);
}

.porque-icone {
    width: 90px;
    height: 90px;
    margin-bottom: 18px;
}

.porque-icone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.porque-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
}

.porque-card p {
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.55;
}

/* ===========================
   NÚMEROS
=========================== */
.numeros-section {
    padding: 96px 0;
    background: var(--gray-lt);
}

.numeros-inner {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 80px;
    align-items: center;
}

.numeros-left .section-label {
    color: var(--gold);
}

.numeros-left h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
    margin: 10px 0 14px;
}

.numeros-left p {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.65;
}

.numeros-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.numero-item {
    padding: 24px 16px;
}

.numero-item:nth-child(1) { transition-delay: 0ms; }
.numero-item:nth-child(2) { transition-delay: 100ms; }
.numero-item:nth-child(3) { transition-delay: 200ms; }
.numero-item:nth-child(4) { transition-delay: 300ms; }

.numero-icone {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
}

.numero-icone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.numero-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    line-height: 1;
}

.numero-prefix {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    color: var(--gold);
}

.numero-valor {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

.numero-unidade {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    margin: 6px 0 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.numero-item p {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.4;
}

/* ===========================
   CTA
=========================== */
.cta-section {
    padding: 80px 0;
    background: var(--white);
}

.cta-card {
    position: relative;
    background: linear-gradient(135deg, var(--navy) 0%, #072f5a 100%);
    border-radius: 24px;
    overflow: hidden;
    padding: 80px 60px;
    text-align: center;
}

.cta-inner {
    position: relative;
    z-index: 2;
}

.cta-inner h2 {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 20px;
}

.cta-inner .highlight {
    color: var(--gold-lt);
}

.cta-inner p {
    color: rgba(255, 255, 255, .75);
    margin-bottom: 40px;
    font-size: 17px;
}

.cta-skyline {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    width: 100%;
    max-width: 1100px;
    z-index: 1;
    opacity: 0.05;
    filter: brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(350deg);
}

.cta-skyline img {
    width: 100%;
    display: block;
}

/* ===========================
   RESPONSIVO — PRINCIPAL
=========================== */

/* ─── Large Desktop (≥1400px) ─── */
@media (min-width: 1400px) {
    .hero {
        height: 680px;
    }

    .hero-content {
        max-width: 540px;
    }

    .hero-content h1 {
        font-size: 3.1rem;
    }

    .hero-content p {
        font-size: 15px;
    }

    .timeline-dot {
        width: 84px;
        height: 84px;
    }

    .timeline-dot img {
        width: 62px;
        height: 62px;
    }

    .timeline-year {
        font-size: 22px;
    }

    .empresas-grid {
        gap: 32px;
    }

    .numero-valor {
        font-size: 3.8rem;
    }
}

/* ─── Ultra-wide (≥1920px) ─── */
@media (min-width: 1920px) {
    .hero {
        height: 820px;
    }

    .hero-content {
        max-width: 680px;
    }

    .hero-content h1 {
        font-size: 3.8rem;
    }

    .hero-content p {
        font-size: 17px;
        max-width: 520px;
    }

    .timeline {
        margin: 130px 0 80px;
    }

    .timeline-dot {
        width: 96px;
        height: 96px;
    }

    .timeline-dot img {
        width: 72px;
        height: 72px;
    }

    .timeline-item {
        min-width: 140px;
    }

    .timeline-year {
        font-size: 24px;
    }

    .numero-valor {
        font-size: 4.5rem;
    }
}

/* ─── Tablet Landscape (≤1024px) ─── */
@media (max-width: 1024px) {
    .hero-text-col {
        padding: 96px 40px 40px;
    }

    /* Timeline — horizontal compacta no tablet */
    .timeline {
        margin: 90px 0 50px;
    }

    .timeline-item {
        min-width: 76px;
    }

    .timeline-dot {
        width: 56px;
        height: 56px;
    }

    .timeline-dot img {
        width: 42px;
        height: 42px;
    }

    .timeline-content {
        width: 76px;
    }

    .timeline-year {
        font-size: 13px;
    }

    .timeline-content p {
        font-size: 11px;
    }

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

    .porque-inner {
        grid-template-columns: 1fr;
    }

    .porque-left {
        text-align: center;
    }

    .porque-left .btn {
        display: inline-flex;
    }

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

    .numeros-left {
        text-align: center;
    }

    .cta-card {
        padding: 60px 40px;
    }
}

/* ─── Tablet Portrait / Mobile (≤768px) ─── */
@media (max-width: 768px) {

    /* Tipografia mobile */
    .hero-content h1 {
        font-size: clamp(1.55rem, 6vw, 2rem);
    }

    .porque-left h2,
    .numeros-left h2,
    .cta-inner h2 {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem);
    }

    /* Hero */
    .hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto 240px;
        height: auto;
    }

    .hero-text-col {
        padding: 96px 24px 32px;
        justify-content: flex-start;
    }

    .hero-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-btns .btn {
        justify-content: center;
    }

    .hero-image-gradient {
        background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 40%);
    }

    /* Seções */
    .timeline-section,
    .empresas-section,
    .clientes-section,
    .numeros-section,
    .cta-section {
        padding: 56px 0;
    }

    .porque-section {
        padding: 48px 0;
    }

    /* Timeline — vertical centralizada no mobile */
    .timeline {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 0;
        margin: 0;
        overflow-x: visible;
    }

    .timeline::before {
        display: none;
    }

    /* Linha vertical no centro da tela, atrás das bolinhas */
    .timeline::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        background: var(--gold);
        z-index: 0;
    }

    /* Grid 3 colunas: espaço | bolinha (56px) | texto
       As duas colunas 1fr são iguais → bolinha fica exatamente no centro */
    .timeline-item {
        display: grid;
        grid-template-columns: 1fr 56px 1fr;
        column-gap: 12px;
        align-items: center;
        flex: none;
        min-width: unset;
        width: 100%;
        height: auto;
    }

    .timeline-item .timeline-dot {
        grid-column: 2;
        grid-row: 1;
        width: 56px;
        height: 56px;
        flex-shrink: unset;
    }

    .timeline-item .timeline-dot img {
        width: 40px;
        height: 40px;
    }

    .timeline-item .timeline-content {
        grid-column: 3;
        grid-row: 1;
        position: static;
        width: auto;
        left: auto;
        transform: none;
        text-align: left;
    }

    .timeline-item.top .timeline-content,
    .timeline-item.bottom .timeline-content {
        top: auto;
        bottom: auto;
    }

    .timeline-item.top .timeline-content::after,
    .timeline-item.bottom .timeline-content::after {
        display: none;
    }

    .timeline-year {
        font-size: 17px;
        margin-bottom: 2px;
    }

    .timeline-content p {
        font-size: 13px;
    }

    /* Clientes — carrossel mobile */
    .clientes-carousel {
        -webkit-mask: none;
        mask: none;
        transform: translateZ(0);
    }

    .clientes-track .cliente-item {
        margin-right: 40px;
    }

    /* Empresas */
    .empresas-grid {
        grid-template-columns: 1fr;
    }

    .empresa-img-logo {
        width: 148px;
        height: 68px;
    }

    /* Por que — 2 colunas, conteúdo centralizado */
    .porque-cards {
        grid-template-columns: 1fr 1fr;
    }

    .porque-card {
        padding: 20px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .porque-card:nth-child(3n) {
        border-right: 2px solid rgba(255, 255, 255, .25);
    }

    .porque-card:nth-child(n+4) {
        border-bottom: 2px solid rgba(255, 255, 255, .25);
    }

    .porque-card:nth-child(2n) {
        border-right: none;
    }

    .porque-card:nth-child(n+5) {
        border-bottom: none;
    }

    /* Números */
    .numeros-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* CTA */
    .cta-card {
        padding: 44px 24px;
    }

    .cta-inner p {
        font-size: 14px;
    }

    .cta-card .btn-lg {
        padding: 12px 28px;
        font-size: 15px;
    }
}

/* ─── Mobile Pequeno (≤480px) ─── */
@media (max-width: 480px) {

    /* Tipografia */
    .hero-content h1 {
        font-size: clamp(1.4rem, 7vw, 1.8rem);
    }

    .porque-left h2,
    .numeros-left h2,
    .cta-inner h2 {
        font-size: clamp(1.25rem, 6vw, 1.5rem);
    }

    /* Hero */
    .hero {
        grid-template-rows: auto 200px;
    }

    .hero-btns .btn {
        width: 100%;
    }

    /* Por que — 1 coluna */
    .porque-cards {
        grid-template-columns: 1fr;
    }

    .porque-card {
        border-right: none;
        border-bottom: 2px solid rgba(255, 255, 255, .25);
    }

    .porque-card:nth-child(3n),
    .porque-card:nth-child(2n) {
        border-right: none;
    }

    .porque-card:nth-child(n+4),
    .porque-card:nth-child(n+5) {
        border-bottom: 2px solid rgba(255, 255, 255, .25);
    }

    .porque-card:last-child {
        border-bottom: none;
    }

    /* Números */
    .numeros-grid {
        grid-template-columns: 1fr;
    }

    .numero-valor {
        font-size: 2.4rem;
    }

    /* CTA */
    .cta-card {
        padding: 36px 16px;
    }
}