/* ============================================================
   RESET
============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: #f3f7f8;
    color: #172326;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}


/* ============================================================
   PÁGINA
============================================================ */

.pagina {
    min-height: 100vh;
}


/* ============================================================
   CABEÇALHO
============================================================ */

.cabecalho {
    width: 100%;
    background:
        linear-gradient(
            135deg,
            #075b61 0%,
            #00adb5 55%,
            #61c0bf 100%
        );
    padding: 18px 20px;
    box-shadow:
        0 5px 25px rgba(0, 0, 0, .10);
}

.marca {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
}

.marca-icone {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
    font-size: 23px;
    flex-shrink: 0;
}

.marca-texto {
    display: flex;
    flex-direction: column;
}

.marca-texto strong {
    font-size: 17px;
    line-height: 1.2;
}

.marca-texto span {
    margin-top: 2px;
    font-size: 12px;
    opacity: .85;
}


/* ============================================================
   CONTEÚDO
============================================================ */

.conteudo {
    width: min(1120px, calc(100% - 30px));
    margin: 0 auto;
    padding: 42px 0 60px;
}


/* ============================================================
   INTRODUÇÃO
============================================================ */

.introducao {
    max-width: 720px;
    margin-bottom: 25px;
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 7px;
    background: #e0f7f8;
    color: #08777d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.introducao h1 {
    margin: 12px 0 8px;
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.08;
    letter-spacing: -.04em;
    color: #172326;
}

.introducao p {
    margin: 0;
    color: #647276;
    font-size: 15px;
}


/* ============================================================
   CARD PRINCIPAL
============================================================ */

.card-calculadora {
    background: #fff;
    border: 1px solid #e0e8ea;
    border-radius: 18px;
    box-shadow:
        0 16px 45px rgba(23, 35, 38, .07);
    overflow: hidden;
}

.secao {
    padding: 30px;
}

.secao-titulo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
}

.numero {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            135deg,
            #075b61,
            #00adb5
        );
    color: #fff;
    font-weight: 800;
    box-shadow:
        0 7px 16px rgba(0, 173, 181, .20);
}

.secao-titulo h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
}

.secao-titulo p {
    margin: 3px 0 0;
    color: #78868a;
    font-size: 13px;
}

.divisor {
    height: 1px;
    background: #e9eff0;
}


/* ============================================================
   GRID
============================================================ */

.grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.campo-grande {
    grid-column: span 3;
}

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

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

.campo {
    position: relative;
    min-width: 0;
}

.campo label {
    display: block;
    margin-bottom: 7px;
    color: #314246;
    font-size: 13px;
    font-weight: 700;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    border: 1px solid #d6e1e3;
    border-radius: 9px;
    background: #fff;
    color: #172326;
    outline: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.campo input,
.campo select {
    height: 46px;
    padding: 0 13px;
}

.campo textarea {
    min-height: 110px;
    resize: vertical;
    padding: 12px 13px;
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: #a3afb2;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: #00adb5;
    box-shadow:
        0 0 0 3px rgba(0, 173, 181, .10);
}

.campo input:disabled {
    background: #f3f6f7;
    cursor: wait;
}

.campo small {
    display: block;
    margin-top: 6px;
    color: #879397;
    font-size: 11px;
}

.campo-menor {
    max-width: 150px;
}

.campo-erro {
    border-color: #d93636 !important;
    box-shadow:
        0 0 0 3px rgba(217, 54, 54, .08) !important;
}


/* ============================================================
   PESO
============================================================ */

.input-unidade {
    position: relative;
}

.input-unidade input {
    padding-right: 48px;
}

.input-unidade span {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #778589;
    font-size: 13px;
    font-weight: 700;
}


/* ============================================================
   OBSERVAÇÃO
============================================================ */

.campo-observacao {
    margin-top: 20px;
}

.contador {
    position: absolute;
    right: 11px;
    bottom: 9px;
    color: #8b989b;
    font-size: 11px;
    pointer-events: none;
}


/* ============================================================
   AVISO
============================================================ */

.aviso {
    margin: 0 30px 20px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border-radius: 10px;
    background: #f2f8f8;
    border: 1px solid #dceff0;
}

.aviso-icone {
    width: 21px;
    height: 21px;
    min-width: 21px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00adb5;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.aviso p {
    margin: 0;
    color: #617074;
    font-size: 12px;
}


/* ============================================================
   BOTÃO CALCULAR
============================================================ */

.btn-calcular {
    width: calc(100% - 60px);
    min-height: 54px;
    margin: 0 30px;
    border: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background:
        linear-gradient(
            135deg,
            #075b61,
            #00adb5
        );
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    box-shadow:
        0 10px 25px rgba(0, 173, 181, .20);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

.btn-calcular:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 30px rgba(0, 173, 181, .27);
}

.btn-calcular:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}

.btn-seta {
    font-size: 20px;
    line-height: 1;
}

.btn-loading {
    opacity: .9;
}

.privacidade {
    margin: 12px 30px 25px;
    text-align: center;
    color: #8b989b;
    font-size: 11px;
}


/* ============================================================
   RESULTADO
============================================================ */

.resultado {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.resultado[hidden] {
    display: none !important;
}

.resultado-topo {
    display: flex;
    align-items: center;
    gap: 13px;
}

.resultado-ok {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00adb5;
    color: #fff;
    font-size: 21px;
    font-weight: 900;
}

.resultado-topo h2 {
    margin: 3px 0 0;
    font-size: 24px;
    line-height: 1.1;
}

.resultado-valor {
    padding: 25px 28px;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #073e42,
            #075b61,
            #00adb5
        );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow:
        0 15px 35px rgba(0, 83, 89, .18);
}

.resultado-valor span {
    font-size: 13px;
    opacity: .82;
}

.resultado-valor strong {
    font-size: clamp(25px, 5vw, 35px);
    line-height: 1;
}


/* ============================================================
   TRAJETO
============================================================ */

.trajeto-card {
    background: #fff;
    border: 1px solid #dfe8ea;
    border-radius: 16px;
    padding: 25px;
    box-shadow:
        0 12px 30px rgba(23, 35, 38, .05);
}

.trajeto-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf1f2;
}

.trajeto-icone {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6f8f9;
    color: #008b92;
    font-size: 19px;
    font-weight: 900;
}

.trajeto-titulo strong {
    display: block;
    font-size: 15px;
}

.trajeto-titulo small {
    display: block;
    margin-top: 2px;
    color: #8a9699;
    font-size: 11px;
}

.trajeto-rota {
    padding: 23px 5px;
}

.trajeto-ponto {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ponto {
    width: 13px;
    height: 13px;
    min-width: 13px;
    margin-top: 4px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow:
        0 0 0 2px #00adb5;
}

.ponto.destino {
    box-shadow:
        0 0 0 2px #d93636;
}

.trajeto-ponto small {
    display: block;
    color: #879397;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
}

.trajeto-ponto strong {
    display: block;
    margin-top: 2px;
    color: #334447;
    font-size: 13px;
    line-height: 1.45;
}

.trajeto-linha {
    width: 2px;
    height: 25px;
    margin: 2px 0 2px 5px;
    background:
        linear-gradient(
            to bottom,
            #00adb5,
            #d93636
        );
}

.trajeto-distancia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #edf1f2;
}

.trajeto-distancia > div {
    padding: 17px 5px 0;
}

.trajeto-distancia > div + div {
    padding-left: 20px;
    border-left: 1px solid #edf1f2;
}

.trajeto-distancia span {
    display: block;
    color: #899599;
    font-size: 11px;
}

.trajeto-distancia strong {
    display: block;
    margin-top: 3px;
    color: #172326;
    font-size: 18px;
}


/* ============================================================
   MAPA
============================================================ */

.mapa-card {
    background: #fff;
    border: 1px solid #dfe8ea;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 12px 30px rgba(23, 35, 38, .05);
}

.mapa-card[hidden] {
    display: none !important;
}

.mapa-cabecalho {
    min-height: 68px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #e9eff0;
}

.mapa-cabecalho strong {
    display: block;
    color: #263639;
    font-size: 14px;
}

.mapa-cabecalho small {
    display: block;
    margin-top: 2px;
    color: #8a9699;
    font-size: 11px;
}

.mapa-cabecalho > span {
    max-width: 220px;
    color: #008990;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
}

.mapa {
    width: 100%;
    height: 460px;
    min-height: 460px;
    background: #e7eeee;
}

.leaflet-container {
    width: 100%;
    height: 100%;
    font-family:
        Inter,
        system-ui,
        sans-serif;
}


/* ============================================================
   MARCADOR PERSONALIZADO
============================================================ */

.marcador-personalizado {
    background: transparent !important;
    border: 0 !important;
}

.pin-mapa {
    width: 34px;
    height: 34px;
    position: relative;
    border-radius: 50% 50% 50% 0;
    background: var(--cor-pin);
    transform: rotate(-45deg);
    border: 3px solid #fff;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, .35);
}

.pin-mapa span {
    position: absolute;
    width: 9px;
    height: 9px;
    top: 9px;
    left: 9px;
    border-radius: 50%;
    background: #fff;
}


/* ============================================================
   ERRO DE ROTA
============================================================ */

.erro-rota {
    padding: 13px 18px;
    background: #fff7f7;
    border-top: 1px solid #f3dddd;
    color: #9a3b3b;
    font-size: 12px;
}

.erro-rota[hidden] {
    display: none !important;
}


/* ============================================================
   CONTATO
============================================================ */

.contato-card {
    padding: 27px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #dfe8ea;
    box-shadow:
        0 12px 30px rgba(23, 35, 38, .05);
}

.contato-titulo {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 22px;
}

.contato-icone {
    width: 39px;
    height: 39px;
    min-width: 39px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6f8f9;
    color: #008b92;
}

.contato-titulo h3 {
    margin: 0;
    font-size: 17px;
}

.contato-titulo p {
    margin: 4px 0 0;
    color: #7a888c;
    font-size: 12px;
    line-height: 1.55;
}

.grid-contato {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.btn-contato {
    width: 100%;
    height: 51px;
    margin-top: 20px;
    border: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    background: #075b61;
    color: #fff;
    font-weight: 800;
    transition:
        background .18s ease,
        transform .18s ease;
}

.btn-contato:hover {
    background: #06494d;
    transform: translateY(-1px);
}

.btn-contato strong {
    font-size: 19px;
}

.contato-privacidade {
    margin: 10px 0 0;
    text-align: center;
    color: #929da0;
    font-size: 10px;
}


/* ============================================================
   NOVA COTAÇÃO
============================================================ */

.btn-nova {
    width: 100%;
    min-height: 48px;
    border: 1px solid #cbdadd;
    border-radius: 9px;
    background: #fff;
    color: #075b61;
    font-weight: 800;
    transition:
        background .18s ease,
        border-color .18s ease;
}

.btn-nova:hover {
    background: #edf9fa;
    border-color: #00adb5;
}


/* ============================================================
   RODAPÉ
============================================================ */

.rodape {
    width: min(1120px, calc(100% - 30px));
    margin: 0 auto;
    padding: 22px 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #899599;
    font-size: 11px;
}


/* ============================================================
   RESPONSIVO
============================================================ */

@media (max-width: 850px) {

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

    .campo-grande {
        grid-column: span 2;
    }

    .campo-menor {
        max-width: none;
    }

}


@media (max-width: 650px) {

    .cabecalho {
        padding: 15px;
    }

    .conteudo {
        width: min(
            100% - 20px,
            600px
        );

        padding-top: 27px;
        padding-bottom: 40px;
    }

    .introducao {
        margin-bottom: 20px;
    }

    .introducao h1 {
        font-size: 31px;
    }

    .card-calculadora {
        border-radius: 14px;
    }

    .secao {
        padding: 23px 18px;
    }

    .grid,
    .grid-carga,
    .grid-data,
    .grid-contato {
        grid-template-columns: 1fr;
    }

    .campo-grande {
        grid-column: auto;
    }

    .secao-titulo {
        margin-bottom: 20px;
    }

    .aviso {
        margin-left: 18px;
        margin-right: 18px;
    }

    .btn-calcular {
        width: calc(100% - 36px);
        margin-left: 18px;
        margin-right: 18px;
    }

    .privacidade {
        margin-left: 18px;
        margin-right: 18px;
    }

    .resultado-valor {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .trajeto-card {
        padding: 20px;
    }

    .trajeto-distancia {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .trajeto-distancia > div + div {
        padding-left: 5px;
        padding-top: 0;
        border-left: 0;
    }

    .mapa-cabecalho {
        align-items: flex-start;
        flex-direction: column;
    }

    .mapa-cabecalho > span {
        max-width: none;
        text-align: left;
    }

    .mapa {
        height: 360px;
        min-height: 360px;
    }

    .contato-card {
        padding: 21px;
    }

    .rodape {
        width: calc(100% - 20px);
    }

}


@media (max-width: 400px) {

    .mapa {
        height: 330px;
        min-height: 330px;
    }

    .resultado-topo h2 {
        font-size: 21px;
    }

}