:root{
 --azul:#102c43;
 --escuro:#0a2033;
 --destaque:#18a7ca;
 --texto:#27394a;
 --claro:#f2f6f9;
 --borda:#dce5ea;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 color:var(--texto);
 background:#fff;
 font-family:system-ui,-apple-system,BlinkMacSystemFont,
 "Segoe UI",Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{width:min(1180px,90%);margin:auto}
.cabecalho{
 background:#fff;
 position:sticky;
 top:0;
 z-index:20;
 box-shadow:0 4px 22px #0b253512;
}
.topo{
 min-height:84px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:25px;
}
.marca{
 display:flex;
 align-items:center;
 gap:12px;
 color:var(--azul);
 font-weight:900;
 font-size:1.25rem;
 letter-spacing:.04em;
}
.marca small{
 display:block;
 font-weight:650;
 font-size:.63rem;
 letter-spacing:.28em;
}
.marca-icone{
 width:48px;height:48px;
 display:grid;place-items:center;
 background:var(--azul);
 color:white;
 border-radius:12px;
 font-size:1.7rem;
}
nav{display:flex;align-items:center;gap:24px}
nav>a{font-size:.91rem;font-weight:650}
nav>a:hover,.link:hover{color:var(--destaque)}
.botao-menu{
 padding:13px 17px;
 color:#fff;
 background:var(--azul);
 border-radius:7px;
}
.menu-toggle{display:none}
.hero{
 color:#fff;
 background:
 radial-gradient(circle at 85% 25%,#266b8955,transparent 45%),
 linear-gradient(115deg,#071b2d,#123f5b 85%);
 min-height:560px;
 display:flex;align-items:center;
}
.hero-conteudo{padding:95px 0}
.sobretitulo,.etiqueta{
 font-size:.78rem;
 font-weight:800;
 letter-spacing:.16em;
}
.sobretitulo{color:#78def1}
.etiqueta{color:#0788a5}
h1,h2,h3{line-height:1.18}
h1{font-size:clamp(2.3rem,5vw,4.5rem)}
h2{font-size:clamp(1.85rem,3vw,2.8rem)}
.hero h1{max-width:950px;margin:20px 0}
.hero h1 em{color:#71d5e8;font-style:normal}
.hero p{
 max-width:680px;
 font-size:1.17rem;
 line-height:1.8;
 color:#dae9f1;
}
.acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.botao{
 display:inline-block;
 padding:15px 24px;
 font-weight:750;
 border-radius:7px;
 transition:transform .2s,background .2s;
}
.botao:hover{transform:translateY(-2px)}
.primario{background:var(--destaque);color:#042337}
.secundario{border:1px solid #a0b5c4;color:#fff}
.secao{padding-top:84px;padding-bottom:84px}
.duas-colunas{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:70px;
 align-items:center;
}
.duas-colunas p,.texto-pagina p{
 font-size:1.08rem;
 line-height:1.85;
}
.fundo-claro{background:var(--claro)}
.cards{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:22px;
 margin-top:34px;
}
.card{
 background:white;
 border:1px solid var(--borda);
 border-radius:12px;
 overflow:hidden;
 box-shadow:0 10px 25px #102c4309;
}
.card img{
 display:block;
 width:100%;
 height:215px;
 object-fit:cover;
}
.card-conteudo{padding:26px}
.card-conteudo p{line-height:1.7}
.card-conteudo small{color:#627a88}
.link{font-weight:800;color:#087e9b}
.valores{background:#fff}
.valor{
 padding:28px;
 border:1px solid var(--borda);
 border-radius:12px;
}
.valor span{font-weight:800;color:var(--destaque)}
.valor p{line-height:1.7}
.chamada{
 background:#123952;
 color:#fff;
 padding:55px 0;
}
.chamada-conteudo{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
}
.chamada h2{margin:14px 0}
.chamada p{color:#d6e7ee}
.titulo-interno{
 background:linear-gradient(120deg,#0c2539,#174a64);
 color:white;
 padding:76px 0;
}
.titulo-interno h1{font-size:clamp(2rem,4vw,3.6rem)}
.texto-pagina{max-width:860px;min-height:300px}
.imagem-noticia{
 width:100%;
 max-height:470px;
 object-fit:cover;
 border-radius:12px;
}
.resumo{font-weight:650}
footer{background:#081d2e;color:#d3dfe8;padding-top:60px}
.rodape-grid{
 display:grid;
 grid-template-columns:1.3fr 1fr 1fr;
 gap:45px;
}
footer h3{color:white;font-size:1.05rem}
footer p{line-height:1.8}
footer a{overflow-wrap:anywhere}
.rodape-final{
 margin-top:35px;
 padding:23px 0;
 border-top:1px solid #ffffff28;
 display:flex;
 justify-content:space-between;
 gap:15px;
 font-size:.85rem;
}
@media(max-width:850px){
 .topo{min-height:72px}
 .menu-toggle{
  display:block;
  border:0;
  background:var(--azul);
  color:white;
  border-radius:7px;
  padding:9px 14px;
  font-size:1.4rem;
  cursor:pointer;
 }
 nav{
  display:none;
  position:absolute;
  top:72px;
  left:0;right:0;
  background:white;
  padding:25px 5%;
  flex-direction:column;
  align-items:stretch;
  gap:20px;
  box-shadow:0 12px 20px #0002;
 }
 nav.aberto{display:flex}
 .duas-colunas{grid-template-columns:1fr;gap:15px}
 .cards{grid-template-columns:1fr}
 .rodape-grid{grid-template-columns:1fr}
 .chamada-conteudo{flex-direction:column;align-items:flex-start}
 .hero{min-height:500px}
 .secao{padding-top:65px;padding-bottom:65px}
 .rodape-final{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .botao{transition:none}
}


/* IDENTIDADE OFICIAL TRANSLESSA */
.logo-oficial {
    display: block;
    width: auto;
    max-width: min(245px, 55vw);
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

.hero {
    background-image:
      linear-gradient(
        100deg,
        rgba(5, 21, 34, 0.93) 0%,
        rgba(10, 36, 55, 0.84) 48%,
        rgba(10, 36, 55, 0.35) 100%
      ),
      url("/static/portal/banner-translessa.5ad05259a7aa.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero h1 {
    text-shadow: 0 3px 20px rgba(0,0,0,.22);
}

.marca {
    flex-shrink: 0;
}

@media (max-width: 850px) {
    .logo-oficial {
        max-width: 200px;
        max-height: 52px;
    }

    .hero {
        background-image:
          linear-gradient(
            90deg,
            rgba(5,21,34,.93),
            rgba(10,36,55,.75)
          ),
          url("/static/portal/banner-translessa.5ad05259a7aa.png");
        background-position: center;
    }
}


/* HERO EDITAVEL CMS */
.hero {
    position: relative;
    isolation: isolate;
}
.hero-imagem {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.hero:has(.hero-imagem)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(5,21,34,.94),
        rgba(10,36,55,.76) 60%,
        rgba(10,36,55,.35)
    );
    z-index: -1;
}
.hero-conteudo {
    position: relative;
    z-index: 1;
}


/* IMAGENS INSTITUCIONAIS CMS */
.figura-pagina {
    margin: 0 0 32px;
}
.imagem-pagina {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}


/* COTACAO TRANSLESSA */
.form-cotacao {
 display:grid;
 gap:20px;
 max-width:740px;
}
.campo-cotacao {
 display:flex;
 flex-direction:column;
 gap:8px;
}
.campo-cotacao label {font-weight:700}
.campo-cotacao input:not([type=checkbox]),
.campo-cotacao textarea {
 width:100%;
 padding:13px 15px;
 border:1px solid #c7d5df;
 border-radius:8px;
 font:inherit;
}
.campo-cotacao:has(input[type=checkbox]) {
 flex-direction:row;
 align-items:center;
}
.campo-oculto {
 position:absolute;
 left:-10000px;
 width:1px;
 height:1px;
 overflow:hidden;
}
.form-cotacao button {
 border:0;
 cursor:pointer;
 justify-self:start;
}
.erro-campo {color:#ae2732}
.nota-privacidade {
 font-size:.9rem;
 line-height:1.7;
}
.aviso-sucesso {
 background:#eaf7ee;
 border-left:4px solid #278453;
 padding:24px;
 border-radius:8px;
}


/* TRANSLESSA - FORMULARIO RESPONSIVO V12 */

.form-cotacao {
    grid-template-columns: minmax(0, 1fr) 110px;
    column-gap: 16px;
    row-gap: 20px;
}

.form-cotacao > :not(.campo-cidade):not(.campo-uf) {
    grid-column: 1 / -1;
}

.form-cotacao > .campo-cidade {
    grid-column: 1;
    min-width: 0;
}

.form-cotacao > .campo-uf {
    grid-column: 2;
    min-width: 0;
}

.form-cotacao .campo-cotacao input:not([type=checkbox]),
.form-cotacao .campo-cotacao textarea,
.form-cotacao .campo-cotacao select {
    box-sizing: border-box;
    max-width: 100%;
}

.form-cotacao .campo-cotacao select {
    width: 100%;
    min-height: 48px;
    padding: 12px 10px;
    border: 1px solid #c7d5df;
    border-radius: 8px;
    background-color: #fff;
    color: inherit;
    font: inherit;
}

.form-cotacao .campo-cotacao input:focus-visible,
.form-cotacao .campo-cotacao textarea:focus-visible,
.form-cotacao .campo-cotacao select:focus-visible {
    outline: 2px solid #2563a6;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .form-cotacao {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-cotacao > .campo-cidade,
    .form-cotacao > .campo-uf,
    .form-cotacao > :not(.campo-cidade):not(.campo-uf) {
        grid-column: 1;
    }
}


/* TRANSLESSA - AJUSTE UFS V12.1 */

@media (min-width: 601px) {
    .form-cotacao {
        grid-template-columns: minmax(0, 1fr) 170px;
    }

    .form-cotacao > .campo-uf label {
        white-space: nowrap;
    }
}

.form-cotacao .campo-uf select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 10px;
    font-size: 15px;
}

.form-cotacao .campo-cidade,
.form-cotacao .campo-uf {
    min-width: 0;
}


/* TRANSLESSA UF V12.2 */

@media (min-width: 701px) {
    .form-cotacao {
        grid-template-columns: minmax(0, 1fr) 180px;
        column-gap: 16px;
    }

    .form-cotacao > .campo-uf {
        grid-column: 2;
        min-width: 0;
    }

    .form-cotacao > .campo-uf label {
        white-space: nowrap;
        font-size: 14px;
    }
}

.form-cotacao .campo-uf select {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 48px;
    font-size: 14px;
    padding: 10px 8px;
}

@media (max-width: 700px) {
    .form-cotacao {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-cotacao > .campo-cidade,
    .form-cotacao > .campo-uf {
        grid-column: 1;
    }
}