body{  font-family: "Montserrat", sans-serif; background-color: #007A42}
@font-face {font-family: 'Riffic Free'; font-style: normal; font-weight: 700; src: local('Riffic Free'), url('../font/RifficFree-Bold.woff') format('woff'); }
a{text-decoration: none;}
.no_list{list-style: none;}
#portada{background: url("../img/portada.webp") fixed; object-fit: cover; height: calc(100vh); padding: 30px;}
.navbar-brand{position: absolute; display: none;}
#menu{justify-content: center; }
.navbar{margin-top: 20px}
#menu {
  justify-content: center;
}

#menu .navbar-nav {
  position: relative; /* 🔑 ahora el logo se posiciona relativo a este bloque */
  border: solid 1px #007A42;
  border-radius: 20px;
  padding: 0 20px;
  align-items: stretch;
  margin-left: 115px;
  background-color: #fff;
}

#menu .navbar-nav:before {
  content: '';
  position: absolute;
  left: -170px;        /* 🔑 pegado a la izquierda del nav centrado */
  top: 50%;
  width: 179px;
  height: 67px;
  transform: translateY(-50%);
  background-image: url("../img/logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  cursor: pointer;
}

#menu .logo-link {position: absolute; left: -179px; top: 50%; transform: translateY(-50%); z-index: 3; /* por encima */ display: block;width: 179px; height: 67px;
}
#menu .logo-link a{ position: absolute;
 width: 179px; height: 67px;}
#menu .navbar-nav{border: solid 1px #007A42;border-radius: 20px;padding: 0 20px; align-items: stretch;margin-left: 115px;position: relative;background-color: #fff;}
#menu .navbar-nav .nav-item{padding: 0 11px; position: relative;}
.nav-link{font-family: 'Riffic Free', sans-serif; color: #007A42; font-size: 11px; line-height: 16px; text-align: center;height: 100%; display: flex ; align-items: center;}
#menu .navbar-nav .nav-item::after{content: ''; position: absolute; left: 0; top: 50%; border-left: solid 1px #007A42; width: 1px; height: 55px; transform: translateY(-50%);}
#menu .navbar-nav .nav-item:nth-child(2)::after{content: none;}


#menu .nav-item.active .nav-link{position: relative;}
#menu .nav-item.active .nav-link::before{position: absolute;content: ''; height: 100%; background-color: #D9EBE3; left: -20px;right: -20px;border-radius: 20px;    top: 0;}
#menu .nav-item.active .nav-link span{    z-index: 1;
position: relative; }
#menu .navbar-nav .nav-item.active::after{content: none;}
#menu .navbar-nav .nav-item.active + .nav-item::after{content: none;}

.navbar-toggler:focus{box-shadow: none}
.navbar-toggler span {display: block; background-color: rgba(255, 255, 255, 0.55); height: 2px; width: 25px; margin-top: 5px; margin-bottom: 5px; position: relative; left: 0; opacity: 1; transition: all 0.35s ease-out; transform-origin: center left; border-radius: 2px}
.navbar-toggler span:nth-child(1) {margin-top: 0.3em; }
.navbar-toggler:not(.collapsed) span:nth-child(1) {transform: translate(15%, -100%) rotate(45deg); }
.navbar-toggler:not(.collapsed) span:nth-child(2) {opacity: 0; }
.navbar-toggler:not(.collapsed) span:nth-child(3) {transform: translate(15%, 33%) rotate(-45deg) ; }
.navbar-toggler span:nth-child(1) {transform: translate(0%, 0%) rotate(0deg) ; }
.navbar-toggler span:nth-child(2) {opacity: 1; }
.navbar-toggler span:nth-child(3) {transform: translate(0%, 0%) rotate(0deg) ; }




::-webkit-scrollbar {width: 9px; height: 9px; }
::-webkit-scrollbar-button {width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {background: #007A42; border: 62px none #ffffff; border-radius: 50px; }
::-webkit-scrollbar-thumb:hover {background: #007A42; }
::-webkit-scrollbar-thumb:active {background: #007A42; }
::-webkit-scrollbar-track {background: #ffffff; border: 54px none #ffffff; border-radius: 76px; }
::-webkit-scrollbar-track:hover {background: #ffffff; }
::-webkit-scrollbar-track:active {background: #ffffff; }
::-webkit-scrollbar-corner {background: transparent; }









#menu.sec-asi_somos .navbar-nav{border-color: #007A42;}
#menu.sec-asi_somos .nav-item .nav-link span{color: #007A42}
#menu.sec-asi_somos .navbar-nav .nav-item::after{border-left-color: #007A42;}
#menu.sec-asi_somos .nav-item.active .nav-link::before{background-color: #D9EBE3}

/****************       SEC-MASTELLONE        **********************/
#menu.sec-mastellone .navbar-nav{border-color: #1C71B5;}
#menu.sec-mastellone .nav-item .nav-link span{color: #1C71B5}
#menu.sec-mastellone .navbar-nav .nav-item::after{border-left-color: #1C71B5;}
#menu.sec-mastellone .nav-item.active .nav-link::before{background-color: #DDEAF4}
#mastellone{background-color: #1C71B5;}
#mastellone .container-fluid{background-color: #DDEAF4;}
#mastellone h3.titulo{background-color: #0070B7;}
ul{list-style: url('data:image/svg+xml,<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.06 0V15.53H4.4C1.97 15.53 0 13.56 0 11.13V4.4C0 1.97 1.97 0 4.4 0H18.06Z" fill="%231C71B5"/></svg>');}
#mastellone strong{color: #1C71B5;font-style: italic;}
.color_text_mastellone{color: #1C71B5;}

#mastellone .tabs_lateral .card{background-color: #BDD8EB; }
#mastellone .tabs_lateral .card .numero,
#mastellone .tabs_lateral .card span{color: #0070B7; }




/****************       SEC-ASEGURAMIENTO        **********************/
#menu.sec-aseguramiento .navbar-nav{border-color: #636768;}
#menu.sec-aseguramiento .nav-item .nav-link span{color: #636768}
#menu.sec-aseguramiento .navbar-nav .nav-item::after{border-left-color: #636768;}
#menu.sec-aseguramiento .nav-item.active .nav-link::before{background-color: #E8E8E8}
#aseguramiento{background-color: #636768;}
#aseguramiento .container-fluid{background-color: #E8E8E8;}
#aseguramiento h3.titulo{background-color: #636768;}
#aseguramiento ul{list-style: url('data:image/svg+xml,<svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.06 0V14.53H4.4C1.97 14.53 0 12.56 0 10.13V4.4C0 1.97 1.97 0 4.4 0H18.06Z" fill="%23636768"/></svg>');}
#aseguramiento ul.verde{list-style: url('data:image/svg+xml,<svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.06 0V14.53H4.4C1.97 14.53 0 12.56 0 10.13V4.4C0 1.97 1.97 0 4.4 0H18.06Z" fill="%23007A42"/></svg>');}
#aseguramiento strong{color: #636768;font-style: italic;}
.color_text_aseguramiento{color: #636768;}

/****************       SEC-AGUA        **********************/
#menu.sec-agua .navbar-nav{border-color: #16BECF;}
#menu.sec-agua .nav-item .nav-link span{color: #16BECF}
#menu.sec-agua .navbar-nav .nav-item::after{border-left-color: #16BECF;}
#menu.sec-agua .nav-item.active .nav-link::before{background-color: #DCF5F8}
#agua{background-color: #16BECF;}
#agua .container-fluid{background-color: #DCF5F8;}
#agua h3.titulo{background-color: #16BECF;}
#agua ul{list-style: url('data:image/svg+xml,<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18.06 4V19.53H4.4C1.97 19.53 0 17.56 0 15.13V8.4C0 5.97 1.97 4 4.4 4H18.06Z" fill="%2316BECF"/></svg>    ');}
#agua strong{color: #16BECF;font-style: italic;}
.color_text_agua{color: #16BECF;}

/****************       SEC-ENERGIA        **********************/
#menu.sec-energia .navbar-nav{border-color: #809A53;}
#menu.sec-energia .nav-item .nav-link span{color: #809A53}
#menu.sec-energia .navbar-nav .nav-item::after{border-left-color: #809A53;}
#menu.sec-energia .nav-item.active .nav-link::before{background-color: #ECF0E5}
#energia{background-color: #809A53;}
#energia .container-fluid{background-color: #ECF0E5;}
#energia h3.titulo{background-color: #809A53;}
#energia ul{list-style: url('data:image/svg+xml,<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.06 0V15.53H4.4C1.97 15.53 0 13.56 0 11.13V4.4C0 1.97 1.97 0 4.4 0H18.06Z" fill="%23809A53"/></svg>');}
#energia strong{color: #809A53;font-style: italic;}
.color_text_energia{color: #809A53;}


/****************       SEC-HUMANO        **********************/
#menu.sec-humano .navbar-nav{border-color: #DE3251;}
#menu.sec-humano .nav-item .nav-link span{color: #DE3251}
#menu.sec-humano .navbar-nav .nav-item::after{border-left-color: #DE3251;}
#menu.sec-humano .nav-item.active .nav-link::before{background-color: #FAE0E5}
#humano{background-color: #DE3251;}
#humano .container-fluid{background-color: #FAE0E5;}
#humano h3.titulo{background-color: #DE3251;}
#humano ul{list-style: url('data:image/svg+xml,<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.06 0V15.53H4.4C1.97 15.53 0 13.56 0 11.13V4.4C0 1.97 1.97 0 4.4 0H18.06Z" fill="%23DE3251"/></svg>');}
#humano strong{color: #DE3251;font-style: italic;}
.color_text_humano{color: #DE3251;}


/****************       SEC-SALUDABLE        **********************/
#menu.sec-saludable .navbar-nav{border-color: #EF8E0C;}
#menu.sec-saludable .nav-item .nav-link span{color: #EF8E0C}
#menu.sec-saludable .navbar-nav .nav-item::after{border-left-color: #EF8E0C;}
#menu.sec-saludable .nav-item.active .nav-link::before{background-color: #FDEEDB}
#saludable{background-color: #EF8E0C;}
#saludable .container-fluid{background-color: #FDEEDB;}
#saludable h3.titulo{background-color: #EF8E0C;}
#saludable ul{list-style: url('data:image/svg+xml,<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.06 0V15.53H4.4C1.97 15.53 0 13.56 0 11.13V4.4C0 1.97 1.97 0 4.4 0H18.06Z" fill="%23EF8E0C"/></svg>');}
#saludable strong{color: #EF8E0C;font-style: italic;}
.color_text_saludable{color: #EF8E0C;}
















section{padding: 100px 40px;}
section .container-fluid{border-radius: 0 20px 20px 0; padding:40px }
.color_azul{color: #1C71B5}
h3.titulo{text-transform: uppercase;  color:#fff; display: inline-block; padding: 0 20px; border-radius: 10px; font-size: 22px}
.riffic{font-family: 'Riffic Free', sans-serif;}


#portada .row{height: calc(100vh - 80px);}
#asi_somos{background-color: #007A42;}
#asi_somos .container-fluid{background-color: #B9DACB; padding: 40px 180px 40px 40px}

#asi_somos [class^="col"] img{display: block; margin: 23px auto 0; width: 100%; object-position: bottom; object-fit: contain;}
#asi_somos [class^="col"] span{font-size: 13px; display: block; text-transform: uppercase; line-height: 15px; font-weight: 600;}
#asi_somos [class^="col"] span:first-of-type{font-family: 'Riffic Free', sans-serif; font-size: 50px; line-height: normal; }


#asi_somos [class^="col"]:last-child{margin-left: 16.66666667%; display: flex ; align-items: center;}
#asi_somos [class^="col"]:last-child img{ display: inline; width: auto; padding: 8px; margin: 0 -50px 0 0; }
#asi_somos [class^="col"]:last-child span{ display: inline; margin: 0 0 0 20px; text-align: left;}

.tabs_lateral{transform: translateY(-50%); right: 0; top: 50%; position: absolute; }
.tabs_lateral .card{border-radius: 20px 0 0 20px}
.tabs_lateral .card .card-body{padding: 1.5rem;}
.tabs_lateral .card span{display: block;line-height: 18px;color: #007a42;}
.tabs_lateral .card:first-child{background-color: #D9EBE3; margin-bottom:20px }
.tabs_lateral .card:last-child{background-color: #007A42;}
.tabs_lateral .card:last-child span{ color: #fff}
.tabs_lateral .card .numero{font-family: 'Riffic Free', sans-serif;font-size: 100px;color: #007A42;line-height: 85px;}






#aseguramiento #panel {background-color: #D4D5D6; border-radius: 20px; border: 0;}
#aseguramiento #panel .card-body{padding: 40px; text-transform: uppercase;}
#aseguramiento .check {list-style: none; display: flex; justify-content: space-evenly; align-items: center; padding: 0; margin: 0; flex-wrap:wrap; } 
#aseguramiento .check li {display: flex; align-items: center; gap: 2px; position: relative; color:#646768} 
#aseguramiento .check li::before {content: ""; display: inline-block; width: 35px; height: 35px; background: url("../img/aseguramiento/check.svg") no-repeat center/contain; }
                        
#aseguramiento img[src="img/asisomos/tambos.svg"] + img[src="img/asisomos/tambos.svg"]{margin-top: -50px; display: block;}


.filtro_negro{    filter: brightness(0); margin-left: -15px;}
 






ul li ul{list-style:none}
ul li ul.sustentabilidad{padding-left: 0;list-style: none}
ul li ul.sustentabilidad li{display: flex;margin: 27px 0; ;}
ul li ul.sustentabilidad li p{margin: 0;}

ul li ul.sustentabilidad li::before {content: ""; display: inline-block; vertical-align: middle; width: 72px; height: 72px; margin-right: 10px; background-size: contain; background-repeat: no-repeat}

ul li ul.sustentabilidad li:nth-child(1)::before{background-image: url(../img/compromiso/estrategia.svg);}
ul li ul.sustentabilidad li:nth-child(2)::before{background-image: url(../img/compromiso/desempeno.svg);}
ul li ul.sustentabilidad li:nth-child(3)::before{background-image: url(../img/compromiso/proceso.svg); }
ul li ul.sustentabilidad span{background-image: url('data:image/svg+xml,<svg width="686" height="62" viewBox="0 0 686 62" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M685.4 32.0098C688.21 12.9698 638.09 4.04977 621.78 2.88977C535.65 2.77977 125.58 -6.84023 47.6301 9.63977C32.5801 13.9698 -5.12989 16.2098 0.580113 37.0998C10.1196 72 500.62 50.9098 606.71 61.6698C633.66 63.0198 675.42 61.1198 685.39 32.0098M612.26 2.19977C612.14 2.17977 612.11 2.15977 612.24 2.09977C612.24 2.13977 612.25 2.15977 612.26 2.19977Z" fill="%230070B7"/></svg>'); background-size: cover; font-size: 24px; background-position: center; font-family: 'Riffic Free', sans-serif; padding: 8px; color: #0070B7;}



@media (max-width: 1199px) { 
#menu .navbar-nav .nav-item{padding: 0px 8px}
.navbar-brand {position: relative; display: block;}
.nav-link {font-size: 11px; }
#asi_somos [class^="col"] img[src="img/asisomos/cantidad_productiva.svg"] + span:after {line-height: 10px; font-size: 11px; top: -14px; }
#asi_somos [class^="col"] span:first-of-type{font-size: 33px}
    #menu .navbar-nav:before{content: none; }
    #menu .navbar-nav{margin: 0}
    #menu .navbar-nav .nav-link{display: block;}
    #menu .navbar-nav .nav-link br{display: none}
    #menu .navbar-nav .nav-item{text-align: center;}
    #menu .navbar-nav .nav-item::after{display: none}
}
@media (max-width: 991px) {
}
@media (max-width: 768px) {
    #asi_somos [class^="col"]:last-child{margin-left: 0; display: block ; align-items: center;}
    #asi_somos [class^="col"]:last-child span{display: block; text-align: center; margin: 0}
    #asi_somos [class^="col"]:last-child img{margin: 0 0 -22px}
    ul{padding: 0}
#asi_somos .container-fluid{padding: 40px}
#asi_somos [class^="col"]:last-child{margin: 0}
.tabs_lateral{transform: none; margin-top: 23px; text-align: center; position: relative;}
#aseguramiento .check{display: block;}
#aseguramiento .check li{margin-bottom: 5px}
.w-md-100{width: 100%!important}
#aseguramiento #panel .display-5{font-size: 1.5rem;}
h3.titulo{text-align: center; display: block; padding: 8px;}
ul li ul.sustentabilidad{padding: 0; margin-left: -2rem;}
ul li ul.sustentabilidad li::before {margin: 0 auto;}
ul li ul.sustentabilidad li {margin:0; flex-direction: column; justify-content: center; text-align: center; }

h3.titulo + h3.titulo{margin-top: -20px; }
}