/* ...................... tarja ................................................................................................................................................. */


#tarjasup					{ background:#002F3D; color:#fff; border-bottom:none; font-size:14px; }

    #tarjasup a					{ color:#fff; }

    #tarjasup a:hover				{ color:#CCFF00; }

    #tarjasup a.ico_whatsapp4			{ color:#00A886; }

#tarja						{ background:#CCFF00; }

	#nav ul.nav_usuario li a.n_login	{ background:#000; color:#fff; border-radius:40px; outline:5px solid transparent; }

	#nav ul.nav_usuario li a.n_login:hover	{ background:#000; color:#fff; outline-color:rgba(0,0,0,0.1); }


/* ...................... inicial ............................................................................................................................................... */


.bg_portal_verde				{ background:#CCFF00; }

#slideshow					{ color:#000; height:600px; }

#slideshow.slide_portal01			{ background-size:auto; background-position:right bottom; }

  #slideshow::before				{ z-index:1; content:""; position:absolute; inset:-120px -120px auto auto; width:520px; height:520px; border-radius:999px; border:2px solid rgba(34, 197, 94, .35); transform:rotate(12deg); }

  #slideshow::after				{ z-index:1; content:""; position:absolute; inset:auto auto -180px -180px; width:520px; height:520px; border-radius:999px; border:2px solid rgba(34, 197, 94, .22); }

  #slideshow .rel				{ z-index:9; max-width:800px; margin:0; flex-flow:row wrap; align-items:center; }

    #slideshow h1				{ max-width:100%; font-weight:500; font-size:30px; color:#000; }

    #slideshow h2				{ max-width:100%; margin:30px 0 30px 0; font-size:46px; font-weight:700; color:#000; line-height:110%; }

    #slideshow p				{ max-width:100%; font-weight:400; margin:0 0 30px 0; font-size:24px; line-height:120%; }

    #slideshow .botao				{ border-radius:40px; outline:5px solid transparent; }

    #slideshow #b_acessar			{ background-color:#000; color:#CCFF00; margin-right:10px; }
    #slideshow #b_servicos			{ background-color:#fff; color:#000; }

    #slideshow .botao:hover			{ outline-color:rgba(0,0,0,0.1); }

  .stage					{ z-index:2; position:absolute; top:50%; margin-top:-220px; right:400px; min-height:320px; display:flex; justify-content:flex-end; align-items:center; }

    .float-grid					{ position:absolute; inset:0; }

      .float 					{ position:absolute; background:#fff; border-radius:18px; box-shadow:0 14px 30px rgba(2, 6, 23, .18); border:1px solid rgba(255, 255, 255, .12); padding:14px 14px; width:190px; display:flex; gap:10px; align-items:flex-start; transition: all 0.2s ease; }

      .float.f1					{ top:18px; right:320px }
      .float.f2					{ top:92px; right:-200px }
      .float.f3					{ top:210px; right:360px }
      .float.f4					{ top:270px; right:-230px }
      .float.f5					{ top:330px; right:290px }

      .float.f1.e_hover				{ transform:rotate(5deg); transition: all 0.1s ease; }
      .float.f2.e_hover				{ transform:rotate(-5deg); transition: all 0.1s ease; }
      .float.f3.e_hover				{ transform:rotate(5deg); transition: all 0.1s ease; }
      .float.f4.e_hover				{ transform:rotate(-5deg); transition: all 0.1s ease; }
      .float.f5.e_hover				{ transform:rotate(5deg); transition: all 0.1s ease; }

	.float .ic				{ width:34px; height:34px; border-radius:12px; background:#f1f5f9; display:grid; place-items:center; border:1px solid #e2e8f0; flex:0 0 auto; }

	.float .tx				{ font-weight:800; line-height:1.15; }

	  .float .tx span			{ display:block; font-weight:700; color:#475569; font-size:12px; margin-top:6px; }

    .phone					{ width:min(320px, 70vw); height:420px; border-radius:34px; background:linear-gradient(180deg, #4a4a4a 0%, #353434 60%, #3d3c3c 100%); box-shadow:0 16px 40px rgba(2, 6, 23, .18); border:1px solid rgba(255, 255, 255, .14); position:relative; transform:rotate(-7deg); transition: all 0.1s ease; }

      .phone::before				{ content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:118px; height:22px; border-radius:999px; background:rgba(0, 0, 0, .25); border:1px solid rgba(255, 255, 255, .10); }

      .phone .screen				 { position:absolute; inset:56px 14px 14px; border-radius:24px; background:#ffffff; overflow:hidden; }

	.screen .bar 				{ height:56px; background:linear-gradient(120deg, #ccff00, #ccff00); display:flex; align-items:center; justify-content:space-between; padding:0 14px; color:#000; font-weight:800; }

	  .bar-title 				{ display:flex; flex-direction:column; line-height:1.05; font-size:14px; /* ajusta aqui se quiser maior */ }

	  .logo-bar 				{ height:26px; width:auto; display:block; }

	.screen .content 			{ padding:14px; color:#0f172a; }

	  .pill					{ display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border-radius:999px; background:#D93600; font-weight:700; font-size:12px; color:#fff; outline:0px solid rgb(197,34,0,0.3); transition: all 0.1s ease; }
	  .pill:hover, .pill.e_hover		{ color:#fff; text-decoration:none; background-color:#C52200; outline-width:5px; }

	  .mini-card				{ margin-top:12px; border-radius:16px; border:1px solid #e2e8f0; padding:12px; background:#fff; }

	    .mini-card b			{ display:block; margin-bottom:6px }

	    .mini-card small			{ color:#475569; font-size:14px; line-height:110%; }

#servs_portal					{ background:url(images/bg_servs_portal.png); background-size:100% auto; background-position:bottom; background-color:#eee; background-repeat:no-repeat; min-height:500px; padding:100px 0 250px 0; }

  #servs_portal .rel				{ display:flex; flex-flow:column wrap; height:100%; }

  #servs_portal h2				{ flex:0 0 auto; margin:0 0 40px 0; font-size:40px; font-weight:700; text-align:center; color:#000; line-height:110%; }

  #servs_portal ul.set				{ flex:0 0 auto; list-style:none; margin:0; padding:0; display:flex; flex-flow:row wrap; align-items:stretch; justify-content:center; gap:10px; }

    #servs_portal ul.set li			{ flex:0 0 auto; margin:0; padding:0; }

      #servs_portal ul.set li a			{ display:block; color:#000; text-transform:uppercase; font-weight:500; height:40px; line-height:38px; padding:0 20px 0 20px; border-radius:5px; box-sizing:border-box; background:#fff; outline:5px solid transparent; }

      #servs_portal ul.set li a.ativo		{ background:#000; color:#fff; }

      #servs_portal ul.set li a:hover		{ outline-color:rgba(0,0,0,0.1); text-decoration:none; }

  #servs_portal .setdesc			{ flex:1 1 auto; text-align:center; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; margin-top:60px; }

    #servs_portal .setdesc_cont			{ max-width:620px; display:none; background:rgba(255, 255, 255, 0.3); border-radius:5px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:20px; }

    #servs_portal .setdesc_cont.ativo		{ display:block; }

      #servs_portal .setdesc_cont h2		{ font-size:30px; font-weight:500; text-transform:uppercase; margin:0; padding:0; line-height:110%; }
      #servs_portal .setdesc_cont p		{ font-size:16px; margin:30px 0 0 0; padding:0; line-height:140%; }

.vnt_portal					{ background:#002F3D; color:#fff; padding:60px 0 60px 0; }

  .vnt_portal h2				{ margin:0 0 40px 0; font-size:40px; font-weight:700; text-align:center; color:#fff; line-height:110%; }

  .vnt_portal ul				{ display:flex; flex-flow:row wrap; align-items:stretch; gap:20px; list-style:none; margin:0; padding:0; }

    .vnt_portal li				{ flex:0 0 calc(33.3% - 13px); border:1px solid rgba(255,255,255,0.2); box-sizing:border-box; border-radius:5px; padding:20px 20px 20px 100px; color:#fff; position:relative; min-height:100px; }

      .vnt_portal li .ico			{ width:60px; height:60px; position:absolute; top:20px; left:20px; background:left center no-repeat; background-size:40px auto; opacity:0.5; }

      .vnt_portal li .ico.ico_emergencia	{ background-image:url(images/ico_emergencia.png); background-size:60px auto; }
      .vnt_portal li .ico.ico_pae		{ background-image:url(images/ico_pae.png); background-position:10px center; }
      .vnt_portal li .ico.ico_treinamentos	{ background-image:url(images/ico_treinamentos.png); background-size:50px auto; background-position:10px center; }
      .vnt_portal li .ico.ico_frotas		{ background-image:url(images/ico_frota2.png); background-size:50px auto; background-position:5px center; }
      .vnt_portal li .ico.ico_documentacao	{ background-image:url(images/ico_documentacao.png); background-position:10px center; }
      .vnt_portal li .ico.ico_licenciamentos	{ background-image:url(images/ico_licenciamentos.png); background-size:50px auto; background-position:5px center; }

      .vnt_portal li h3				{ margin:0 0 10px 0; font-size:16px; padding:0; font-weight:700; line-height:110%; }

      .vnt_portal li p				{ margin:0; font-size:14px; padding:0; line-height:110%; }

#faq						{  }

  #faq h2					{ margin:0 0 40px 0; font-size:40px; font-weight:700; text-align:center; color:#000; line-height:110%; }

@media only screen and (max-width : 1800px) {

  .stage					{ right:300px; }

}

@media only screen and (max-width : 1600px) {

  .stage					{ right:250px; }

}

@media only screen and (max-width : 1550px) {

  #slideshow .rel				{ max-width:600px; }

    #slideshow .relint				{ flex:0 0 100%; width:100%; }

    #slideshow h1				{ font-size:30px; }

    #slideshow h2				{ font-size:46px; }

    #slideshow p				{ font-size:24px; }

}

@media only screen and (max-width : 1400px) {

  #slideshow .rel				{ max-width:500px; }

  #servs_portal ul.set				{ justify-content:center; }

}

@media only screen and (max-width : 1300px) {

  .stage					{ right:100px; }

      .float.f1					{ top:-30px; }
      .float.f2					{ top:92px; right:290px }
      .float.f3					{ top:197px; }
      .float.f4					{ top:290px; right:300px }
      .float.f5					{ top:390px; right:320px }

}

@media only screen and (max-width : 1150px) {

  .stage					{ right:50px; }

    .vnt_portal li				{ flex:0 0 calc(50% - 10px); }

}

@media only screen and (max-width : 1100px) {

  #slideshow .rel				{ align-items:center; height:100%; }

    #slideshow h1				{ text-align:left; }
    #slideshow h2				{ text-align:left; }

  .stage					{ right:150px; }

    .float-grid					{ right:-3000px; }

}

@media only screen and (max-width : 980px) {

  .stage					{ right:50px; }

}

@media only screen and (max-width : 800px) {

  .stage					{ right:-100px; }

#servs_portal					{ height:auto; padding-top:60px; padding-bottom:150px; }

  #servs_portal .setdesc			{ margin-top:40px; }

    .vnt_portal li				{ flex:0 0 100%; }

}

@media only screen and (max-width : 700px) {

  .stage					{ right:-150px; }

}

@media only screen and (max-width : 610px) {

  .stage					{ display:none; }

  #slideshow .rel				{ max-width:100%; text-align:center; }

    #slideshow h1				{ font-size:30px; text-align:center; }

    #slideshow h2				{ font-size:46px; text-align:center; }

    #slideshow p				{ font-size:24px; text-align:center; }

}